From 1f3b525645527bda87820e54cb613e7ec5fed3c8 Mon Sep 17 00:00:00 2001 From: jlukic Date: Wed, 13 Aug 2014 12:48:58 -0400 Subject: [PATCH] Updates grid docs --- server/documents/collections/grid.html.eco | 54 ++++++++++++++++++++-- server/files/stylesheets/semantic.css | 10 ++-- 2 files changed, 55 insertions(+), 9 deletions(-) diff --git a/server/documents/collections/grid.html.eco b/server/documents/collections/grid.html.eco index f8c2d31b7..0b6f58b44 100755 --- a/server/documents/collections/grid.html.eco +++ b/server/documents/collections/grid.html.eco @@ -18,19 +18,20 @@ themes : ['default']
+ Introduction Types Elements Variations
-

Standard

+

Introduction

-

Simple Grid

+

Grid

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

-
+

A grid does not need to specify rows, content will automatically flow to the next row when all the grid columns are taken in the current row.

All grid systems must assume an arbitrary amount of column rows. Semantic's default theme assumes 16 columns
@@ -54,10 +55,13 @@ themes : ['default']
+

Grid with Rows

A grid can wrap groups of columns into rows

- +
+ The bottom and top rows, when rows are specified will sit flush with the edge of the grid.

+

The Benefits of Rows

It's often easier to have dynamic content output without nested rows, but using row wrappers is the only way for variations like equal height and vertically divided to function correctly.

@@ -100,6 +104,47 @@ themes : ['default']
+
+

Nested grids

+

A grid can be placed inside another grid

+ +
+

Any grid column can be broken up using a second grid, however for the content of the inner grid to align with the outter grid, you will need to use the fitted grid variation on the inner grid, removing the outer margins from the first and last element.

+
+
+

Column Count

+

Each grid is divided into 16 columns, so a grid inside a grid inside a column, sub-divides that column into 16 more columns. This means for example, a eight wide column on a nested grid inside a two wide column, is the same as a one wide column on the outer grid.

+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +

Types

Page Grid

@@ -136,6 +181,7 @@ themes : ['default']
+

Divided Grid

A grid can have dividers between its columns

diff --git a/server/files/stylesheets/semantic.css b/server/files/stylesheets/semantic.css index 2e68519e0..2a9a8c208 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: 205px; + min-height: 275px; } #example .collection.cards { min-height: 350px; @@ -1131,12 +1131,12 @@ body.guide .main.container > * { #example .ui.type.cards .image .grid .row:first-child { border-top: none; } -#example .highlighted.example .grid .column:first-child, -#example .ui.type.cards .image .grid .column:first-child { +#example .highlighted.example .grid .column:not(.grid):first-child, +#example .ui.type.cards .image .grid .column:not(.grid):first-child { box-shadow: none; } -#example .highlighted.example .grid .column, -#example .ui.type.cards .image .grid .column { +#example .highlighted.example .grid .column:not(.grid), +#example .ui.type.cards .image .grid .column:not(.grid) { min-height: 50px; -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);