From 7bed0a8aa1080114503e895ff9d44e326571f096 Mon Sep 17 00:00:00 2001 From: Jack Lukic Date: Tue, 7 May 2013 14:28:32 -0400 Subject: [PATCH] iterating on text size issues, rem/em/px Former-commit-id: 0fae7f753b266e8a0a28c6f3d6ed0ced34022d73 Former-commit-id: 69dd5b1054c98361e2eae0046b870e0b3e0b3f95 --- node/src/documents/collections/grid.html | 125 +++++++++++++++++- .../semantic/src/collections/form.css | 8 +- .../semantic/src/collections/grid.css | 30 ++++- .../semantic/src/collections/menu.css | 20 +-- .../semantic/src/elements/block.css | 11 +- .../semantic/src/elements/icons.css | 8 +- node/src/files/stylesheets/semantic.css | 38 +++++- node/src/layouts/default.html.eco | 4 +- src/collections/form.css | 8 +- src/collections/grid.css | 30 ++++- src/collections/menu.css | 20 +-- src/elements/block.css | 11 +- src/elements/icons.css | 8 +- 13 files changed, 245 insertions(+), 76 deletions(-) diff --git a/node/src/documents/collections/grid.html b/node/src/documents/collections/grid.html index f6d6eda28..7e18f39ef 100755 --- a/node/src/documents/collections/grid.html +++ b/node/src/documents/collections/grid.html @@ -67,7 +67,7 @@ type : 'UI Collection'

Rows

A basic grid has padding on the first and last columns of each row.

A row is used to create vertical padding between rows of columns on a page. If no rows are specified, a grid column will sit flush along each side of the grid.

-

/p> +

@@ -172,7 +172,8 @@ type : 'UI Collection'

Responsive Grid

-

A responsive grid is a special type of grid useful for designing page layouts. A standard grid does not make any assumptions about how it should change gutters depending on content. Page grids will automatically resize the gutters as a browsers resolution changes size.

+

A responsive grid is a special type of grid useful for designing page layouts.

+

A standard grid does not make any assumptions about how it should change gutters depending on content. Page grids will automatically resize the gutters as a browsers resolution changes size.

@@ -201,8 +202,8 @@ type : 'UI Collection'
-

Evenly Divided Grid

-

A grid can be divided into equal parts.

+

Changing column count

+

A grid can have a different number of columns

@@ -274,6 +275,118 @@ type : 'UI Collection'
+
+

Vertical Alignment

+

A grid or row can specify its vertical alignment can have its columns vertically centered.

+
+
+
+
+
+ Dogs +
+
+ Poodle +
+
+ Cockerspaniel +
+
+
+
+
+
+ Dogs +
+
+ Poodle +
+
+ Cockerspaniel +
+
+
+
+
+
+ Dogs +
+
+ Poodle +
+
+
+
+
+
+
+
+ Dogs +
+
+ Poodle +
+
+
+
+
+
+ Dogs +
+
+ Poodle +
+
+ Cockerspaniel +
+
+
+
+
+
+ Dogs +
+
+ Poodle +
+
+
+
+
+
+
+
+ Dogs +
+
+ Poodle +
+
+
+
+
+
+ Dogs +
+
+ Poodle +
+
+ Cockerspaniel +
+
+
+
+
+
+ Dogs +
+
+
+
+
+
+

Evenly Divided Grid w/ Rows

Content that does not match evenly finish a row will be centered in the next row

@@ -355,8 +468,8 @@ type : 'UI Collection'

Columns

-

Wide Column

-

A grid column can span across multiple column rows.

+

Column Width

+

A column can span across multiple grid columns.

Colume One Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum iaculis sapien sed dui porta id sagittis sapien imperdiet. Quisque suscipit dui vel sapien dapibus a faucibus sapien mattis. Nulla facilisi. Aliquam vitae ante a quam tincidunt blandit. Duis adipiscing, metus at dictum auctor, odio enim ornare urna, quis aliquam arcu nibh vitae felis. Donec gravida aliquam enim in mattis. Phasellus risus purus, luctus quis lobortis eget, dignissim quis ante.
diff --git a/node/src/files/components/semantic/src/collections/form.css b/node/src/files/components/semantic/src/collections/form.css index 036757a2b..2e804352b 100644 --- a/node/src/files/components/semantic/src/collections/form.css +++ b/node/src/files/components/semantic/src/collections/form.css @@ -415,7 +415,7 @@ /* Standard */ .ui.small.form { - font-size: 14px; + font-size: 0.875em; } .ui.small.form textarea, .ui.small.form input[type="text"], @@ -424,13 +424,9 @@ font-size: 1em; } -.ui.form { - font-size: 16px; -} - /* Large */ .ui.large.form { - font-size: 18px; + font-size: 1.125em; } .ui.large.form label { font-weight: bold; diff --git a/node/src/files/components/semantic/src/collections/grid.css b/node/src/files/components/semantic/src/collections/grid.css index b11029eb7..1e5393448 100644 --- a/node/src/files/components/semantic/src/collections/grid.css +++ b/node/src/files/components/semantic/src/collections/grid.css @@ -34,22 +34,22 @@ } @media only screen and (min-width : 1000px) { .ui.responsive.grid { - padding: 0% 7.5%; + padding: 0% 12.5%; } } @media only screen and (min-width : 1500px) { .ui.responsive.grid { - padding: 0% 10%; + padding: 0% 15%; } } @media only screen and (min-width : 1750px) { .ui.responsive.grid { - padding: 0% 15%; + padding: 0% 20%; } } @media only screen and (min-width : 2000px) { .ui.responsive.grid { - padding: 0% 20%; + padding: 0% 27%; } } @@ -278,13 +278,29 @@ Vertically Centered -----------------------*/ - /* Vertical Centered */ -.ui.centered.grid .column, -.ui.centered.column { +.ui.aligned.grid, +.ui.grid .aligned.row { + display: table; + width: 100%; +} +.ui.aligned.grid .column, +.ui.grid .aligned.row .column { display: table-cell; +} + +.ui.top.aligned.grid .column, +.ui.grid .top.aligned.row .column { + vertical-align: top; +} +.ui.middle.aligned.grid .column, +.ui.grid .middle.aligned.row .column { vertical-align: middle; } +.ui.bottom.aligned.grid .column, +.ui.grid .bottom.aligned.row .column { + vertical-align: bottom; +} /*------------------- diff --git a/node/src/files/components/semantic/src/collections/menu.css b/node/src/files/components/semantic/src/collections/menu.css index e5ef54895..17bb7b5ed 100644 --- a/node/src/files/components/semantic/src/collections/menu.css +++ b/node/src/files/components/semantic/src/collections/menu.css @@ -433,12 +433,12 @@ .ui.contrasting.menu .item > a { color: #FFFFFF; } -.ui.link.menu .item:hover, -.ui.menu .item.hover, -.ui.menu .link.item:hover, -.ui.menu a.item:hover, -.ui.menu .dropdown.item.hover, -.ui.menu .dropdown.item:hover { +.ui.link.contrasting.menu .item:hover, +.ui.contrasting.menu .item.hover, +.ui.contrasting.menu .link.item:hover, +.ui.contrasting.menu a.item:hover, +.ui.contrasting.menu .dropdown.item.hover, +.ui.contrasting.menu .dropdown.item:hover { background-color: rgba(255, 255, 255, 0.05); } .ui.contrasting.menu .item .item, @@ -992,14 +992,14 @@ ---------------*/ .ui.small.menu .item { - font-size: 14px; + font-size: 0.875rem; } .ui.small.vertical.menu { - width: 200px; + width: 18rem; } .ui.menu .item { - font-size: 16px; + font-size: 1rem; } .ui.vertical.menu { width: 230px; @@ -1007,7 +1007,7 @@ .ui.large.menu .item { - font-size: 18px; + font-size: 1.125rem; } .ui.large.vertical.menu { width: 275px; diff --git a/node/src/files/components/semantic/src/elements/block.css b/node/src/files/components/semantic/src/elements/block.css index 9e4b5a3a6..58937dee3 100644 --- a/node/src/files/components/semantic/src/elements/block.css +++ b/node/src/files/components/semantic/src/elements/block.css @@ -23,7 +23,6 @@ background-color: rgba(0, 0, 0, 0.04); padding: 1em; - font-size: 16px; line-height: 1.33; color: rgba(0, 0, 0, 0.6); @@ -245,17 +244,17 @@ ---------------*/ .ui.small.block { - font-size: 14px; + font-size: 0.875em; } .ui.block { - font-size: 16px; + font-size: 1em; } .ui.large.block { - font-size: 18px; + font-size: 1.125em; } .ui.huge.block { - font-size: 24px; + font-size: 1.5em; } .ui.massive.block { - font-size: 32px; + font-size: 2px; } \ No newline at end of file diff --git a/node/src/files/components/semantic/src/elements/icons.css b/node/src/files/components/semantic/src/elements/icons.css index e9d3ce88b..d3c0627f3 100644 --- a/node/src/files/components/semantic/src/elements/icons.css +++ b/node/src/files/components/semantic/src/elements/icons.css @@ -21,16 +21,20 @@ i.icon { width: 1em; height: 1em; - margin: 0px 0.2em 0px 0px; + margin: 0em 0.2em 0em 0em; font-style: normal; line-height: 1; font-weight: normal; text-decoration: inherit; text-align: center; - -webkit-font-smoothing: antialiased; vertical-align: baseline; + + -webkit-font-smoothing: antialiased; + -moz-font-smoothing: antialiased; + font-smoothing: antialiased; + } i.icon:before { font-family: 'Icons'; diff --git a/node/src/files/stylesheets/semantic.css b/node/src/files/stylesheets/semantic.css index f643ae3f3..ead1eb777 100755 --- a/node/src/files/stylesheets/semantic.css +++ b/node/src/files/stylesheets/semantic.css @@ -81,7 +81,6 @@ h3::selection { font-style: normal; font-weight: normal; font-stretch: normal; - font-size-adjust: 0.448; } @font-face { font-family: 'Neutraface'; @@ -94,7 +93,6 @@ h3::selection { font-style: normal; font-weight: bold; font-stretch: normal; - font-size-adjust: 0.448; } @font-face { @@ -108,7 +106,6 @@ h3::selection { font-style: italic; font-weight: normal; font-stretch: normal; - font-size-adjust: 0.448; } @@ -117,8 +114,14 @@ h3::selection { /******************************* Global *******************************/ + +html, +body { + font-size: 16px; +} + body#example { - font-family: "Neutraface", "Helvetica Neue", "Arial", sans-serif; + font-family: "Neutraface", "Helvetica Neue", "Helvetica", "Arial", sans-serif; background: #FCFCFC url(../images/bg.jpg) repeat; margin: 0px; padding: 0px 0px 150px; @@ -127,6 +130,31 @@ body#example { min-width: 990px; } +/* + +h1, +h2, +h3, +h4, +h5, +h6, +.ui { + font-family: "Neutraface", "Helvetica Neue", "Helvetica", "Arial", sans-serif; + font-size-adjust: 0.5; +} + +p, +ul, +.ui.grid, +li { + font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif; + font-size-adjust: none; +} + +*/ + + + /* text and headers */ h1 { margin: 0px 0px 20px; @@ -285,7 +313,7 @@ box-shadow: 3px 0px 2px rgba(0, 0, 0, 0.2); */ font-family: 'Neutraface'; } -#example .side.buttons { +#example .sidebar.button { position: fixed; margin-top: 75px; } diff --git a/node/src/layouts/default.html.eco b/node/src/layouts/default.html.eco index 59faa2ddc..0a0a11a4f 100755 --- a/node/src/layouts/default.html.eco +++ b/node/src/layouts/default.html.eco @@ -132,9 +132,7 @@
-
-
Menu
-
+
Menu
<%- @content %> diff --git a/src/collections/form.css b/src/collections/form.css index 036757a2b..2e804352b 100755 --- a/src/collections/form.css +++ b/src/collections/form.css @@ -415,7 +415,7 @@ /* Standard */ .ui.small.form { - font-size: 14px; + font-size: 0.875em; } .ui.small.form textarea, .ui.small.form input[type="text"], @@ -424,13 +424,9 @@ font-size: 1em; } -.ui.form { - font-size: 16px; -} - /* Large */ .ui.large.form { - font-size: 18px; + font-size: 1.125em; } .ui.large.form label { font-weight: bold; diff --git a/src/collections/grid.css b/src/collections/grid.css index b11029eb7..1e5393448 100755 --- a/src/collections/grid.css +++ b/src/collections/grid.css @@ -34,22 +34,22 @@ } @media only screen and (min-width : 1000px) { .ui.responsive.grid { - padding: 0% 7.5%; + padding: 0% 12.5%; } } @media only screen and (min-width : 1500px) { .ui.responsive.grid { - padding: 0% 10%; + padding: 0% 15%; } } @media only screen and (min-width : 1750px) { .ui.responsive.grid { - padding: 0% 15%; + padding: 0% 20%; } } @media only screen and (min-width : 2000px) { .ui.responsive.grid { - padding: 0% 20%; + padding: 0% 27%; } } @@ -278,13 +278,29 @@ Vertically Centered -----------------------*/ - /* Vertical Centered */ -.ui.centered.grid .column, -.ui.centered.column { +.ui.aligned.grid, +.ui.grid .aligned.row { + display: table; + width: 100%; +} +.ui.aligned.grid .column, +.ui.grid .aligned.row .column { display: table-cell; +} + +.ui.top.aligned.grid .column, +.ui.grid .top.aligned.row .column { + vertical-align: top; +} +.ui.middle.aligned.grid .column, +.ui.grid .middle.aligned.row .column { vertical-align: middle; } +.ui.bottom.aligned.grid .column, +.ui.grid .bottom.aligned.row .column { + vertical-align: bottom; +} /*------------------- diff --git a/src/collections/menu.css b/src/collections/menu.css index e5ef54895..17bb7b5ed 100755 --- a/src/collections/menu.css +++ b/src/collections/menu.css @@ -433,12 +433,12 @@ .ui.contrasting.menu .item > a { color: #FFFFFF; } -.ui.link.menu .item:hover, -.ui.menu .item.hover, -.ui.menu .link.item:hover, -.ui.menu a.item:hover, -.ui.menu .dropdown.item.hover, -.ui.menu .dropdown.item:hover { +.ui.link.contrasting.menu .item:hover, +.ui.contrasting.menu .item.hover, +.ui.contrasting.menu .link.item:hover, +.ui.contrasting.menu a.item:hover, +.ui.contrasting.menu .dropdown.item.hover, +.ui.contrasting.menu .dropdown.item:hover { background-color: rgba(255, 255, 255, 0.05); } .ui.contrasting.menu .item .item, @@ -992,14 +992,14 @@ ---------------*/ .ui.small.menu .item { - font-size: 14px; + font-size: 0.875rem; } .ui.small.vertical.menu { - width: 200px; + width: 18rem; } .ui.menu .item { - font-size: 16px; + font-size: 1rem; } .ui.vertical.menu { width: 230px; @@ -1007,7 +1007,7 @@ .ui.large.menu .item { - font-size: 18px; + font-size: 1.125rem; } .ui.large.vertical.menu { width: 275px; diff --git a/src/elements/block.css b/src/elements/block.css index 9e4b5a3a6..58937dee3 100755 --- a/src/elements/block.css +++ b/src/elements/block.css @@ -23,7 +23,6 @@ background-color: rgba(0, 0, 0, 0.04); padding: 1em; - font-size: 16px; line-height: 1.33; color: rgba(0, 0, 0, 0.6); @@ -245,17 +244,17 @@ ---------------*/ .ui.small.block { - font-size: 14px; + font-size: 0.875em; } .ui.block { - font-size: 16px; + font-size: 1em; } .ui.large.block { - font-size: 18px; + font-size: 1.125em; } .ui.huge.block { - font-size: 24px; + font-size: 1.5em; } .ui.massive.block { - font-size: 32px; + font-size: 2px; } \ No newline at end of file diff --git a/src/elements/icons.css b/src/elements/icons.css index e9d3ce88b..d3c0627f3 100755 --- a/src/elements/icons.css +++ b/src/elements/icons.css @@ -21,16 +21,20 @@ i.icon { width: 1em; height: 1em; - margin: 0px 0.2em 0px 0px; + margin: 0em 0.2em 0em 0em; font-style: normal; line-height: 1; font-weight: normal; text-decoration: inherit; text-align: center; - -webkit-font-smoothing: antialiased; vertical-align: baseline; + + -webkit-font-smoothing: antialiased; + -moz-font-smoothing: antialiased; + font-smoothing: antialiased; + } i.icon:before { font-family: 'Icons';