From 0a59fdc3326dedf881f26225190aa0275d3288fe Mon Sep 17 00:00:00 2001 From: jlukic Date: Tue, 12 Aug 2014 00:18:40 -0400 Subject: [PATCH] Enhances grid docs, fixes some consistency issues, adds grid fixed width variables --- server/documents/collections/grid.html.eco | 83 +++++++++++-------- server/documents/views/statistic.html.eco | 81 ++++++++++++++++++ server/files/stylesheets/semantic.css | 28 ++++--- src/definitions/collections/grid.less | 6 ++ .../default/collections/grid.variables | 11 ++- 5 files changed, 162 insertions(+), 47 deletions(-) diff --git a/server/documents/collections/grid.html.eco b/server/documents/collections/grid.html.eco index 95a5f4ed3..1d34624fa 100755 --- a/server/documents/collections/grid.html.eco +++ b/server/documents/collections/grid.html.eco @@ -18,9 +18,8 @@ themes : ['default']
- Standard + Types Elements - Variations
@@ -28,11 +27,12 @@ themes : ['default']

Standard

-

Grid

+

Basic Grid

A grid is made up of columns of content with gutters to provide negative space between columns.

-
All grid systems must assume an arbitrary amount of column rows. Semantic by default assumes 16 columns
-
+
All grid systems must assume an arbitrary amount of column rows. Semantic's default theme assumes 16 columns
+ +
@@ -51,43 +51,56 @@ themes : ['default']
+
+

Enhanced Grid

+

A grid can include additional nesting for rows. This allows variations like equal height and vertically divided

to function correctly and ensures the bottom grid row will always sit flush with content below.

-
-

Page Grid

-

A page grid is used to layout page contents into a grid system. Page grids exists on the top level of a web site. A page grid has gutters to the left and right of its columns to center content on a page.

- -

Standard Page Grid

-

A page grid will automatically resize its gutters as a browser's width changes. This will preserve a percentage of width as a gutter.

-
-
-
- - - Mail - - - - Lab - - - - Favorites - +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
-
- Inbox -

Welcome to your inbox. Would you like to see more information?

+
+
+
+
+
+
+
+
+
+
+
+
+
-

Fixed Page Grid

-

A fixed page grid only changes its gutter sizes once per breakpoint, this will preserve a fixed grid size for each screen type

-
+
+

Page Grid

+

A page grid is used to layout page contents into a grid system. Page grids exists on the top level of a web site. A page grid has gutters to the left and right of its columns to center content on a page.

+ +

Page Grid

+

A page grid will automatically resize its gutters as a browser's width changes. This will preserve a percentage of width as a gutter.

+ +
@@ -209,7 +222,7 @@ themes : ['default']

Rows

-

A row is used to create vertical padding between groups of columns on a page. If no rows are specified columns will sit flush vertically.

+

A row is used to create vertical padding between groups of columns on a page.

@@ -379,7 +392,7 @@ themes : ['default']

Columns

-

Columns each contain gutters giving them equal vertical spacing from other columns. Columns by default do not take up their entire row height.

+

Columns each contain gutters giving them equal spacing from other columns.

diff --git a/server/documents/views/statistic.html.eco b/server/documents/views/statistic.html.eco index 64a4edf20..b16652f5b 100644 --- a/server/documents/views/statistic.html.eco +++ b/server/documents/views/statistic.html.eco @@ -291,4 +291,85 @@ themes : ['Default']
+
+

Sizes

+

A statistic can vary in size

+
+
+ 22 +
+
+ Breeds of Dog +
+
+
+
+
+
+
+ 22 +
+
+ Breeds of Dog +
+
+
+
+ 31 +
+
+ Famous Dogs in Films +
+
+
+
+ 22 +
+
+ US Presidents Owned Dogs +
+
+
+
+
+

Sizes

+

A statistic can vary in size

+
+
+ 22 +
+
+ Breeds of Dog +
+
+
+
+
+
+
+ 22 +
+
+ Breeds of Dog +
+
+
+
+ 31 +
+
+ Famous Dogs in Films +
+
+
+
+ 22 +
+
+ US Presidents Owned Dogs +
+
+
+
+
diff --git a/server/files/stylesheets/semantic.css b/server/files/stylesheets/semantic.css index 45c05acf1..7bde5f383 100755 --- a/server/files/stylesheets/semantic.css +++ b/server/files/stylesheets/semantic.css @@ -1107,7 +1107,7 @@ body.guide .main.container > * { } #example .highlighted.example { - min-height: 390px; + min-height: 205px; } #example .highlighted.example .grid, #example .ui.type.items .image .grid { @@ -1115,30 +1115,36 @@ body.guide .main.container > * { -moz-animation: grid 15s ease infinite; background-color: #F6F6F6; margin: 0em auto; + box-shadow: + 0px 0px 0px 1px rgba(0, 0, 0, 0.1), + 0px 1px 2px 0px rgba(0, 0, 0, 0.1) + ; } #example .highlighted.example .grid .row, #example .ui.type.items .image .grid .row { border-top: 1px solid #DDDDDD; } +#example .highlighted.example .grid .row:first-child, +#example .ui.type.items .image .grid .row:first-child { + border-top: none; +} +#example .highlighted.example .grid .column:first-child, +#example .ui.type.items .image .grid .column:first-child { + box-shadow: none; +} #example .highlighted.example .grid .column, #example .ui.type.items .image .grid .column { - background-color: #F4F4F4; min-height: 50px; - -webkit-box-shadow: 0px 0px 0px 1px #E2E2E2; - -moz-box-shadow: 0px 0px 0px 1px #E2E2E2; - box-shadow: 0px 0px 0px 1px #E2E2E2; + -webkit-box-shadow: -1px 0px 0px 0px rgba(0, 0, 0, 0.1); + -moz-box-shadow: -1px 0px 0px 0px rgba(0, 0, 0, 0.1); + box-shadow: -1px 0px 0px 0px rgba(0, 0, 0, 0.1); } #example .highlighted.example .grid .segment, #example .ui.type.items .image .grid .segment { - min-height: 50px; + min-height: 60px; text-align: center; padding-left: 0em; padding-right: 0em; - -webkit-box-shadow: 0px 0px 0px 1px #DDDDDD; - -moz-box-shadow: 0px 0px 0px 1px #DDDDDD; - box-shadow: 0px 0px 0px 1px #DDDDDD; - -webkit-border-radius: 0px; - -moz-border-radius: 0px; border-radius: 0px; } diff --git a/src/definitions/collections/grid.less b/src/definitions/collections/grid.less index c9fc39329..e0284032a 100755 --- a/src/definitions/collections/grid.less +++ b/src/definitions/collections/grid.less @@ -134,36 +134,42 @@ body > .ui.grid:not(.page) { min-width: @minWidth; padding-left: 0%; padding-right: 0%; + width: @computerWidth; margin-left: @computerGutter; margin-right: @computerGutter; } @media only screen and (max-width : (@tabletBreakpoint - 1)) { .ui.page.grid { + width: @mobileWidth; margin-left: @mobileGutter; margin-right: @mobileGutter; } } @media only screen and (min-width : @tabletBreakpoint) { .ui.page.grid { + width: @tabletWidth; margin-left: @tabletGutter; margin-right: @tabletGutter; } } @media only screen and (min-width : @computerBreakpoint) { .ui.page.grid { + width: @computerWidth; margin-left: @computerGutter; margin-right: @computerGutter; } } @media only screen and (min-width : @largeMonitorBreakpoint) { .ui.page.grid { + width: @largeMonitorWidth; margin-left: @largeMonitorGutter; margin-right: @largeMonitorGutter; } } @media only screen and (min-width : @widescreenMonitorBreakpoint) { .ui.page.grid { + width: @widescreenMonitorWidth; margin-left: @widescreenMonitorGutter; margin-right: @widescreenMonitorGutter; } diff --git a/src/themes/packages/default/collections/grid.variables b/src/themes/packages/default/collections/grid.variables index 638c098d4..a0b6ea620 100755 --- a/src/themes/packages/default/collections/grid.variables +++ b/src/themes/packages/default/collections/grid.variables @@ -30,11 +30,20 @@ Page ---------------*/ -/* Standard */ +/* Column Gutters */ +@mobileWidth: auto; @mobileGutter: 1em; + +@tabletWidth: auto; @tabletGutter: 8%; + +@computerWidth: auto; @computerGutter: 13%; + +@largeMonitorWidth: auto; @largeMonitorGutter: 18%; + +@widescreenMonitorWidth: auto; @widescreenMonitorGutter: 23%;