From cbecc8831919275ce2a37fcee077389013a742fe Mon Sep 17 00:00:00 2001 From: jlukic Date: Sat, 2 Nov 2013 02:40:53 -0400 Subject: [PATCH] Adds attached header style, updates some doc styles --- .../documents/collections/breadcrumb.html.eco | 3 +- server/documents/elements/header.html.eco | 66 +++++++++++-------- server/documents/elements/icon.html.eco | 2 +- src/elements/header.less | 8 ++- 4 files changed, 46 insertions(+), 33 deletions(-) diff --git a/server/documents/collections/breadcrumb.html.eco b/server/documents/collections/breadcrumb.html.eco index bfbbdd408..3e5d7e850 100755 --- a/server/documents/collections/breadcrumb.html.eco +++ b/server/documents/collections/breadcrumb.html.eco @@ -21,7 +21,8 @@ type : 'UI Collection'

Types

-

A simple breadcrumb

+

Breadcrumb

+

A standard breadcrumb

Food
/
diff --git a/server/documents/elements/header.html.eco b/server/documents/elements/header.html.eco index 9c159cf11..d476721d4 100755 --- a/server/documents/elements/header.html.eco +++ b/server/documents/elements/header.html.eco @@ -59,7 +59,7 @@ type : 'UI Element'

Page Headings

Headers may be oriented to give the heirarchy of a section in the context of the page

Page headings size themselves relative to the base font of the entire page not the surrounding text.
-
+

First header

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.

Second header

@@ -71,7 +71,7 @@ type : 'UI Element'
Fifth header

Phasellus ultrices nulla quis nibh. Quisque a lectus. Donec consectetuer ligula vulputate sem tristique cursus. Nam nulla quam, gravida non, commodo a, sodales sit amet, nisi.

-
+
Base Font Base Font
@@ -81,7 +81,7 @@ type : 'UI Element'

Content Headings

Headers may be oriented to give the importance of a section in the context of the content that surrounds it

Content headings size themselves relative to the base font of the surrounding text
-
+
Huge Header

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.

Large Header
@@ -93,7 +93,7 @@ type : 'UI Element'
Tiny Header

Phasellus ultrices nulla quis nibh. Quisque a lectus. Donec consectetuer ligula vulputate sem tristique cursus. Nam nulla quam, gravida non, commodo a, sodales sit amet, nisi.

-
+
Base Font Base Font
@@ -111,18 +111,47 @@ type : 'UI Element'

Variations

+ +
+

Dividing

+

A header can be formatted to divide itself from the content below it

+

+ The nature of dogs +

+

Understanding how dogs behave in nature can help us to better fulfill their needs when we bring them into our homes.

+

When a puppy enters the world, his first pack leader is his mother. Canine moms teach rules, boundaries, and limitations from day one!

+

Newborn puppies don't get a name like we do. The closest thing to a personality is a dog's status within the pack. In the animal world, there are two positions: the leader and the follower.

+
+ + +
+

Block

+

A header can be formatted to appear inside a content block

+

+ Block Header +

+

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.

+
+

Attached

-

A header can be attached to other content

+

A header can be attached to other content, like a segment

- Sign Up For Our Site + Section 1

-
+

Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat.

Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.

+

+ Section 2 +

+
+

Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat.

+

Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.

+

- Thanks + Thanks for reading

@@ -183,27 +212,6 @@ type : 'UI Element'
-
-

Dividing

-

A header can be formatted to divide itself from the content below it

-

- The nature of dogs -

-

Understanding how dogs behave in nature can help us to better fulfill their needs when we bring them into our homes.

-

When a puppy enters the world, his first pack leader is his mother. Canine moms teach rules, boundaries, and limitations from day one!

-

Newborn puppies don't get a name like we do. The closest thing to a personality is a dog's status within the pack. In the animal world, there are two positions: the leader and the follower.

-
- - -
-

Block

-

A header can be formatted to create a block

-

- Block Header -

-

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.

-
-

Inverted

diff --git a/server/documents/elements/icon.html.eco b/server/documents/elements/icon.html.eco index a755f0deb..45fa76158 100755 --- a/server/documents/elements/icon.html.eco +++ b/server/documents/elements/icon.html.eco @@ -24,7 +24,7 @@ type : 'UI Element'

Icon Set

An icon sets contains an arbitrary number of glyphs

- Icons serve a very similar function to text in a page. In semantic icons receive a special tag "i" which allow for an abbreviated markup when sitting along-side text. + Icons serve a very similar function to text in a page. In Semantic icons receive a special tag <i> which allow for an abbreviated markup when sitting along-side text.
diff --git a/src/elements/header.less b/src/elements/header.less index d1e88ed54..2a8324745 100755 --- a/src/elements/header.less +++ b/src/elements/header.less @@ -351,10 +351,14 @@ h5.ui.header { --------------------*/ .ui.attached.header { - background-color: #E0E0E0; - padding: 0.5em 1rem; + background-color: #F0F0F0; + margin: 0em; + padding: 0.75rem 1rem; box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1); } +.ui.attached:not(.top, .bottom) { + margin: 0em; +} .ui.top.attached.header { margin-bottom: 0em; border-radius: 0.3125em 0.3125em 0em 0em;