From 3e6bd6f5c73c31f0bf7c37ff4ce04150cea451e7 Mon Sep 17 00:00:00 2001 From: Jack Lukic Date: Tue, 14 May 2013 18:26:07 -0400 Subject: [PATCH] day of iterating on header variations, tweaks to homepage, icons, menus --- node/src/documents/collections/menu.html | 18 +- node/src/documents/elements/header.html | 93 +++++++++-- node/src/documents/index.html | 15 +- node/src/documents/modules/checkbox.html | 2 +- .../semantic/src/collections/menu.css | 50 +++--- .../semantic/src/elements/button.css | 10 +- .../semantic/src/elements/header.css | 154 ++++++++++++++++-- .../semantic/src/elements/icons.css | 2 +- .../semantic/src/elements/progress.css | 3 - node/src/files/components/semantic/src/ui.css | 3 + node/src/files/javascript/semantic.js | 4 +- node/src/files/stylesheets/semantic.css | 8 + node/src/layouts/default.html.eco | 1 + src/collections/menu.css | 50 +++--- src/elements/button.css | 10 +- src/elements/header.css | 154 ++++++++++++++++-- src/elements/icons.css | 2 +- src/elements/progress.css | 3 - 18 files changed, 470 insertions(+), 112 deletions(-) create mode 100644 node/src/files/components/semantic/src/ui.css diff --git a/node/src/documents/collections/menu.html b/node/src/documents/collections/menu.html index c485f2e69..3ad75d424 100755 --- a/node/src/documents/collections/menu.html +++ b/node/src/documents/collections/menu.html @@ -403,11 +403,19 @@ type : 'UI Collection'

Fluid

-

A menu may take the size of its container, and be divided evenly.

-
-
Choice 1
-
Choice 2
-
Choice 3
+

A menu may take the size of its container.

+
+
Choice
+
+
+ +
+

Evenly sized items

+

A menu may divide its items evenly

+
+
Buy
+
Sell
+
Rent
diff --git a/node/src/documents/elements/header.html b/node/src/documents/elements/header.html index 1938dfcc6..02dc2d17e 100755 --- a/node/src/documents/elements/header.html +++ b/node/src/documents/elements/header.html @@ -22,10 +22,10 @@ type : 'UI Element'

Standard

-

Page Headings

-

Page headings are ordered headings showing the structure of content on a page. There size is always relative to the page's font size

-
+

Page Headings

+

Page headings are ordered headings showing the structure of content on a page. There size is always relative to the page's font size

+

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

@@ -37,16 +37,16 @@ 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 +
-

Content Headings

-

Content headings are specified by their size and will change their size relative to the font-size of the content that surrounds it.

-
-
-
-
-
+

Content Headings

+

Content headings are specified by their size and will change their size relative to the font-size of the content that surrounds it.

+

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

@@ -58,13 +58,17 @@ 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 +

States

Disabled

-

A header bar can show activity

+

A header can show that its inactive

Disabled Header
@@ -72,4 +76,71 @@ type : 'UI Element'

Variations

+
+

Icon Header

+

A header can be formatted to be displayed with an icon

+

+ + Paint a Picture +

+
+ +
+

Floated Header

+

A header can be formatted to be displayed with an icon

+
+

+ Go Forward +

+

+ Go Back +

+
+
+
+

Text Alignment

+

A header can be formatted to be displayed with an icon

+
+

+ Right +

+

+ Left +

+

+ and Center +

+
+
+ +
+

Dividing Header

+

A header can be formatted to be displayed with an icon

+

+ + Step 1 +

+
+ +
+

Attached

+

A header can be attached to other content

+

+ Sign Up For Our Site +

+
+

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 +

+ +
+ + +

Groups

+ + +
\ No newline at end of file diff --git a/node/src/documents/index.html b/node/src/documents/index.html index 3c71cbe6e..0f5d756fd 100755 --- a/node/src/documents/index.html +++ b/node/src/documents/index.html @@ -22,15 +22,24 @@ type : 'Semantic'
-

Learn HTML

+

+ + Learn HTML +

Semantic code is designed to be human readable, so front end code can be understood by anyone.

-

Redesign? Easy

+

+ + Swap Designs +

Semantic provides an exchange format for UI, so swapping out designs doesn't mean rewriting your site's codebase.

-

Build Smarter

+

+ + Build Smarter +

Semantic UI is developed around the semantic standard which seeks to make front end decisions less arbitrary.

diff --git a/node/src/documents/modules/checkbox.html b/node/src/documents/modules/checkbox.html index dbc05044a..06e1b5f95 100755 --- a/node/src/documents/modules/checkbox.html +++ b/node/src/documents/modules/checkbox.html @@ -34,7 +34,7 @@ type : 'UI Module' ;
-
+

Check Box

The html required for a standard UI checkbox

diff --git a/node/src/files/components/semantic/src/collections/menu.css b/node/src/files/components/semantic/src/collections/menu.css index 037e6d575..ae94ca8e1 100644 --- a/node/src/files/components/semantic/src/collections/menu.css +++ b/node/src/files/components/semantic/src/collections/menu.css @@ -59,7 +59,7 @@ vertical-align: middle; line-height: 1.2em; - min-height: 1.2em; + min-height: 1.25em; -webkit-transition: opacity 0.1s linear, @@ -624,11 +624,18 @@ .ui.basic.menu .item:before { display: none; } + +/* disable variations */ .ui.basic.pointing.menu item.active:after { -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; } +.ui.basic.attached.menu { + -webkit-box-shadow: none; + -moz-box-shadow: none; + box-shadow: none; +} /*-------------- Icon Only @@ -829,49 +836,50 @@ .ui.vertical.menu.fluid { width: 100%; } -.ui.menu.fluid, -.ui.menu.fluid .item { - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - -ms-box-sizing: border-box; - box-sizing: border-box; - text-align: center; -} -.ui.menu.fluid .item { + + +/*------------------- + Evenly Sized +--------------------*/ + +.ui.item.menu, +.ui.item.menu .item { + width: 100%; padding-left: 0px !important; padding-right: 0px !important; + text-align: center; } -.ui.menu.two.fluid .item { +.ui.menu.two.item .item { width: 50%; } -.ui.menu.three.fluid .item { +.ui.menu.three.item .item { width: 33.333%; } -.ui.menu.four.fluid .item { +.ui.menu.four.item .item { width: 25%; } -.ui.menu.five.fluid .item { +.ui.menu.five.item .item { width: 20%; } -.ui.menu.six.fluid .item { +.ui.menu.six.item .item { width: 16.666%; } -.ui.menu.seven.fluid .item { +.ui.menu.seven.item .item { width: 14.285%; } -.ui.menu.eight.fluid .item { +.ui.menu.eight.item .item { width: 12.500%; } -.ui.menu.nine.fluid .item { +.ui.menu.nine.item .item { width: 11.11%; } -.ui.menu.ten.fluid .item { +.ui.menu.ten.item .item { width: 10.0%; } -.ui.menu.eleven.fluid .item { +.ui.menu.eleven.item .item { width: 9.09%; } -.ui.menu.twelve.fluid .item { +.ui.menu.twelve.item .item { width: 8.333%; } diff --git a/node/src/files/components/semantic/src/elements/button.css b/node/src/files/components/semantic/src/elements/button.css index 09f8a14a6..a95f2f69e 100644 --- a/node/src/files/components/semantic/src/elements/button.css +++ b/node/src/files/components/semantic/src/elements/button.css @@ -185,9 +185,9 @@ background-position: 50% 50%; background-repeat: no-repeat; - -moz-border-radius: 0.3125em; - -webkit-border-radius: 0.3125em; - border-radius: 0.3125em; + -moz-border-radius: 0.2em; + -webkit-border-radius: 0.2em; + border-radius: 0.2em; } /* Opposite color loader */ .ui.grey.button.loading, @@ -261,7 +261,9 @@ border-color: #588D0F; } -/* Disabled State */ +/*------------------- + Disabled +--------------------*/ .ui.button.disabled, .ui.button.disabled.hover, .ui.button.disabled.down { diff --git a/node/src/files/components/semantic/src/elements/header.css b/node/src/files/components/semantic/src/elements/header.css index 378d86a9d..f615c7ea2 100644 --- a/node/src/files/components/semantic/src/elements/header.css +++ b/node/src/files/components/semantic/src/elements/header.css @@ -107,26 +107,148 @@ h5.ui.header { *******************************/ -/* Attached Header */ -.ui.header.attached, -.ui.header.attached.top { +/*------------------- + Colors +--------------------*/ + +.ui.blue.header { + color: #6ECFF5; +} +.ui.black.header { + color: #5C6166; +} +.ui.green.header { + color: #A1CF64; +} +.ui.red.header { + color: #EF4D6D; +} +.ui.purple.header { + color: #564F8A; +} +.ui.teal.header { + color: #00B5AD; +} + +/*------------------- + Inverted Colors +--------------------*/ + +.ui.inverted.blue.header { + background-color: #6ECFF5; + color: #FFFFFF; +} +.ui.inverted.header { + background-color: #5C6166; + color: #FFFFFF; +} +.ui.inverted.green.header { + background-color: #A1CF64; + color: #FFFFFF; +} +.ui.inverted.red.header { + background-color: #EF4D6D; + color: #FFFFFF; +} +.ui.inverted.purple.header { + background-color: #564F8A; + color: #FFFFFF; +} +.ui.inverted.teal.header { + background-color: #00B5AD; + color: #FFFFFF; +} + +/*------------------- + Aligned +--------------------*/ + +.ui.left.aligned.header { + text-align: left; +} +.ui.right.aligned.header { + text-align: right; +} +.ui.center.aligned.header { + text-align: center; +} + +/*------------------- + Floated +--------------------*/ + +.ui.floated.header, +.ui.left.floated.header { + float: left; +} +.ui.right.floated.header { + float: right; +} + +/*------------------- + Dividing +--------------------*/ + +.huge.ui.header { + min-height: 1em; + line-height: 1.33em; + font-size: 2em; +} +.large.ui.header { + line-height: 1.33em; + font-size: 1.5em; +} +.medium.ui.header { + margin-bottom: 0.25em; +} +.small.ui.header { + margin-bottom: 0.25em; +} +.tiny.ui.header { + margin-bottom: 0em; +} + +/*------------------- + Attached +--------------------*/ + +.ui.attached.header { + padding: 0.7em 1rem; + + -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1); + -moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1); box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1); - margin: 0em; +} +.ui.top.attached.header { + margin-bottom: 0em; - -webkit-border-radius: 4px 4px 0px 0px; - -moz-border-radius: 4px 4px 0px 0px; - border-radius: 4px 4px 0px 0px; + -webkit-border-radius: 0.3125em 0.3125em 0em 0em; + -moz-border-radius: 0.3125em 0.3125em 0em 0em; + border-radius: 0.3125em 0.3125em 0em 0em; } -.ui.header.attached.bottom { +.ui.bottom.attached.header { margin-top: 0em; - -webkit-border-radius: 0px 0px 4px 4px; - -moz-border-radius: 0px 0px 4px 4px; - border-radius: 0px 0px 4px 4px; -} -.ui.header.simple { - border-radius: 0em; - background-color: #FAFAFA; - background-image: none; + + -webkit-border-radius: 0em 0em 0.3125em 0.3125em; + -moz-border-radius: 0em 0em 0.3125em 0.3125em; + border-radius: 0em 0em 0.3125em 0.3125em; +} + + +/*------------------- + Icon +--------------------*/ + +.ui.header.icon { + display: inline-block; + text-align: center; +} +.ui.header.icon .icon { + display: block; + font-size: 4em; + width: auto; + margin: 0rem auto 2rem; + padding: 0em; } diff --git a/node/src/files/components/semantic/src/elements/icons.css b/node/src/files/components/semantic/src/elements/icons.css index d3c0627f3..f47cf4adc 100644 --- a/node/src/files/components/semantic/src/elements/icons.css +++ b/node/src/files/components/semantic/src/elements/icons.css @@ -21,7 +21,7 @@ i.icon { width: 1em; height: 1em; - margin: 0em 0.2em 0em 0em; + margin: 0em 0.25em 0em 0em; font-style: normal; line-height: 1; diff --git a/node/src/files/components/semantic/src/elements/progress.css b/node/src/files/components/semantic/src/elements/progress.css index 2e4c07621..9aa3ebcfb 100644 --- a/node/src/files/components/semantic/src/elements/progress.css +++ b/node/src/files/components/semantic/src/elements/progress.css @@ -201,9 +201,6 @@ .ui.red.progress .bar { background-color: #EF4D6D; } -.ui.blue.progress .bar { - background-color: #6ECFF5; -} .ui.purple.progress .bar { background-color: #564F8A; } diff --git a/node/src/files/components/semantic/src/ui.css b/node/src/files/components/semantic/src/ui.css new file mode 100644 index 000000000..f911710b9 --- /dev/null +++ b/node/src/files/components/semantic/src/ui.css @@ -0,0 +1,3 @@ +.ui.red { + +} \ No newline at end of file diff --git a/node/src/files/javascript/semantic.js b/node/src/files/javascript/semantic.js index bffb53867..7f9fe4357 100755 --- a/node/src/files/javascript/semantic.js +++ b/node/src/files/javascript/semantic.js @@ -54,7 +54,7 @@ semantic.ready = function() { increase: function() { var - $container = $(this).closest('.ui.segment'), + $container = $(this).parent().prev('.ui.segment'), fontSize = parseInt( $container.css('font-size'), 10) ; $container @@ -63,7 +63,7 @@ semantic.ready = function() { }, decrease: function() { var - $container = $(this).closest('.ui.segment'), + $container = $(this).parent().prev('.ui.segment'), fontSize = parseInt( $container.css('font-size'), 10) ; $container diff --git a/node/src/files/stylesheets/semantic.css b/node/src/files/stylesheets/semantic.css index 14cf9caa5..20dbda2cd 100755 --- a/node/src/files/stylesheets/semantic.css +++ b/node/src/files/stylesheets/semantic.css @@ -362,9 +362,16 @@ box-shadow: 3px 0px 2px rgba(0, 0, 0, 0.2); */ -moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1); box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1); } +#example .solid .column { + text-align: center; +} + #example .stripe { color: #7E7E7E; } +#example .stripe .header { + color: #333333; +} #example .stripe .message { margin: 0em; padding: 0em; @@ -594,6 +601,7 @@ box-shadow: 3px 0px 2px rgba(0, 0, 0, 0.2); */ /* examples */ #example .example { + clear: both; position: relative; } #example .example .grid i.code { diff --git a/node/src/layouts/default.html.eco b/node/src/layouts/default.html.eco index d60f3472e..880223933 100755 --- a/node/src/layouts/default.html.eco +++ b/node/src/layouts/default.html.eco @@ -24,6 +24,7 @@ + diff --git a/src/collections/menu.css b/src/collections/menu.css index 037e6d575..ae94ca8e1 100755 --- a/src/collections/menu.css +++ b/src/collections/menu.css @@ -59,7 +59,7 @@ vertical-align: middle; line-height: 1.2em; - min-height: 1.2em; + min-height: 1.25em; -webkit-transition: opacity 0.1s linear, @@ -624,11 +624,18 @@ .ui.basic.menu .item:before { display: none; } + +/* disable variations */ .ui.basic.pointing.menu item.active:after { -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; } +.ui.basic.attached.menu { + -webkit-box-shadow: none; + -moz-box-shadow: none; + box-shadow: none; +} /*-------------- Icon Only @@ -829,49 +836,50 @@ .ui.vertical.menu.fluid { width: 100%; } -.ui.menu.fluid, -.ui.menu.fluid .item { - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - -ms-box-sizing: border-box; - box-sizing: border-box; - text-align: center; -} -.ui.menu.fluid .item { + + +/*------------------- + Evenly Sized +--------------------*/ + +.ui.item.menu, +.ui.item.menu .item { + width: 100%; padding-left: 0px !important; padding-right: 0px !important; + text-align: center; } -.ui.menu.two.fluid .item { +.ui.menu.two.item .item { width: 50%; } -.ui.menu.three.fluid .item { +.ui.menu.three.item .item { width: 33.333%; } -.ui.menu.four.fluid .item { +.ui.menu.four.item .item { width: 25%; } -.ui.menu.five.fluid .item { +.ui.menu.five.item .item { width: 20%; } -.ui.menu.six.fluid .item { +.ui.menu.six.item .item { width: 16.666%; } -.ui.menu.seven.fluid .item { +.ui.menu.seven.item .item { width: 14.285%; } -.ui.menu.eight.fluid .item { +.ui.menu.eight.item .item { width: 12.500%; } -.ui.menu.nine.fluid .item { +.ui.menu.nine.item .item { width: 11.11%; } -.ui.menu.ten.fluid .item { +.ui.menu.ten.item .item { width: 10.0%; } -.ui.menu.eleven.fluid .item { +.ui.menu.eleven.item .item { width: 9.09%; } -.ui.menu.twelve.fluid .item { +.ui.menu.twelve.item .item { width: 8.333%; } diff --git a/src/elements/button.css b/src/elements/button.css index 09f8a14a6..a95f2f69e 100755 --- a/src/elements/button.css +++ b/src/elements/button.css @@ -185,9 +185,9 @@ background-position: 50% 50%; background-repeat: no-repeat; - -moz-border-radius: 0.3125em; - -webkit-border-radius: 0.3125em; - border-radius: 0.3125em; + -moz-border-radius: 0.2em; + -webkit-border-radius: 0.2em; + border-radius: 0.2em; } /* Opposite color loader */ .ui.grey.button.loading, @@ -261,7 +261,9 @@ border-color: #588D0F; } -/* Disabled State */ +/*------------------- + Disabled +--------------------*/ .ui.button.disabled, .ui.button.disabled.hover, .ui.button.disabled.down { diff --git a/src/elements/header.css b/src/elements/header.css index 378d86a9d..f615c7ea2 100755 --- a/src/elements/header.css +++ b/src/elements/header.css @@ -107,26 +107,148 @@ h5.ui.header { *******************************/ -/* Attached Header */ -.ui.header.attached, -.ui.header.attached.top { +/*------------------- + Colors +--------------------*/ + +.ui.blue.header { + color: #6ECFF5; +} +.ui.black.header { + color: #5C6166; +} +.ui.green.header { + color: #A1CF64; +} +.ui.red.header { + color: #EF4D6D; +} +.ui.purple.header { + color: #564F8A; +} +.ui.teal.header { + color: #00B5AD; +} + +/*------------------- + Inverted Colors +--------------------*/ + +.ui.inverted.blue.header { + background-color: #6ECFF5; + color: #FFFFFF; +} +.ui.inverted.header { + background-color: #5C6166; + color: #FFFFFF; +} +.ui.inverted.green.header { + background-color: #A1CF64; + color: #FFFFFF; +} +.ui.inverted.red.header { + background-color: #EF4D6D; + color: #FFFFFF; +} +.ui.inverted.purple.header { + background-color: #564F8A; + color: #FFFFFF; +} +.ui.inverted.teal.header { + background-color: #00B5AD; + color: #FFFFFF; +} + +/*------------------- + Aligned +--------------------*/ + +.ui.left.aligned.header { + text-align: left; +} +.ui.right.aligned.header { + text-align: right; +} +.ui.center.aligned.header { + text-align: center; +} + +/*------------------- + Floated +--------------------*/ + +.ui.floated.header, +.ui.left.floated.header { + float: left; +} +.ui.right.floated.header { + float: right; +} + +/*------------------- + Dividing +--------------------*/ + +.huge.ui.header { + min-height: 1em; + line-height: 1.33em; + font-size: 2em; +} +.large.ui.header { + line-height: 1.33em; + font-size: 1.5em; +} +.medium.ui.header { + margin-bottom: 0.25em; +} +.small.ui.header { + margin-bottom: 0.25em; +} +.tiny.ui.header { + margin-bottom: 0em; +} + +/*------------------- + Attached +--------------------*/ + +.ui.attached.header { + padding: 0.7em 1rem; + + -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1); + -moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1); box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1); - margin: 0em; +} +.ui.top.attached.header { + margin-bottom: 0em; - -webkit-border-radius: 4px 4px 0px 0px; - -moz-border-radius: 4px 4px 0px 0px; - border-radius: 4px 4px 0px 0px; + -webkit-border-radius: 0.3125em 0.3125em 0em 0em; + -moz-border-radius: 0.3125em 0.3125em 0em 0em; + border-radius: 0.3125em 0.3125em 0em 0em; } -.ui.header.attached.bottom { +.ui.bottom.attached.header { margin-top: 0em; - -webkit-border-radius: 0px 0px 4px 4px; - -moz-border-radius: 0px 0px 4px 4px; - border-radius: 0px 0px 4px 4px; -} -.ui.header.simple { - border-radius: 0em; - background-color: #FAFAFA; - background-image: none; + + -webkit-border-radius: 0em 0em 0.3125em 0.3125em; + -moz-border-radius: 0em 0em 0.3125em 0.3125em; + border-radius: 0em 0em 0.3125em 0.3125em; +} + + +/*------------------- + Icon +--------------------*/ + +.ui.header.icon { + display: inline-block; + text-align: center; +} +.ui.header.icon .icon { + display: block; + font-size: 4em; + width: auto; + margin: 0rem auto 2rem; + padding: 0em; } diff --git a/src/elements/icons.css b/src/elements/icons.css index d3c0627f3..f47cf4adc 100755 --- a/src/elements/icons.css +++ b/src/elements/icons.css @@ -21,7 +21,7 @@ i.icon { width: 1em; height: 1em; - margin: 0em 0.2em 0em 0em; + margin: 0em 0.25em 0em 0em; font-style: normal; line-height: 1; diff --git a/src/elements/progress.css b/src/elements/progress.css index 2e4c07621..9aa3ebcfb 100755 --- a/src/elements/progress.css +++ b/src/elements/progress.css @@ -201,9 +201,6 @@ .ui.red.progress .bar { background-color: #EF4D6D; } -.ui.blue.progress .bar { - background-color: #6ECFF5; -} .ui.purple.progress .bar { background-color: #564F8A; }