From f4523dea41ef79e904947817e8a47a9eb81a1361 Mon Sep 17 00:00:00 2001 From: jlukic Date: Sat, 20 Sep 2014 21:58:38 -0400 Subject: [PATCH] Adding more grid documentation --- server/documents/collections/grid.html.eco | 222 +++++++++++++-------- server/files/stylesheets/semantic.css | 6 +- 2 files changed, 145 insertions(+), 83 deletions(-) diff --git a/server/documents/collections/grid.html.eco b/server/documents/collections/grid.html.eco index 958c21d6f..507074ea0 100755 --- a/server/documents/collections/grid.html.eco +++ b/server/documents/collections/grid.html.eco @@ -43,30 +43,27 @@ themes : ['Default'] - -
-

Specifying Column Widths

-

Column widths can be specified either using (x) wide class names or subdividing a grid or row using an (x) column grid or (x) column row

-
-
-
-
-
+
+

Grid Row Spacing

+

Grid columns have vertical spacing above and below each column to create vertical flow between columns. Consecutive grids will automatically preserve row spacing between grids.

+
+ The first and last row of columns will set flush with the edge of the grid. To allow first and last columns to have vertical spacing as well use a vertically padded grid variation. To allow horizontal gutters to exist as well use a padded grid
-
-
-
-
-
-
-
-
-
-
-
+
Button before grid
+
+
+
+
+
+
+
+
Button after grid
+ +

How To Use

+

Column Flow

A grid does not necessarily need to specify rows. If you include columns as direct child of ui grid content will automatically flow to the next row when all the grid columns are taken in the current row.

@@ -83,34 +80,43 @@ themes : ['Default']
-
-

Specifying Rows

-

Specifying wrapping row elements allows you to manually control line breaks for rows, and use additional row variations.

-
- -
-
Why Include Row Markup?
-

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.

-
-
+
+

Column Widths

+

Column widths can be specified using (x) wide class names, each row will add up to 16 columns, if a column cannot fit it will automatically flow to the next row

+
If you create a grid with only one column, you do not need to specify width, it will automatically be assumed to be a sixteen wide column
+
+
+
+
+
+
+
+
+
+
+ +
+

Column Count

+

Grid or individidual grid rows can be divided evenly using (x) column grid or (x) column row

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

Specifying Alignment

You can specify alignment using alignment variations on a grid, row, or column level.

-
+
Word Order Requirements

Keep in mind multi-word variations like right floated require you to specify both class names side-by-side, this helps preserve syntax when stacking variations like a right floated left aligned column

@@ -146,56 +152,38 @@ themes : ['Default']
-
-

Grid Row Spacing

-

Grid columns have vertical spacing above and below each column to create vertical flow between columns.

-
- Grids use negative margins to ensure the first and last row of columns will set flush with the edge of the grid. Consecutive grids will automatically preserve row spacing between grids. To allow first and last columns to have vertical padding use a vertically padded grid variation. -
-
Button before grid
-
-
-
-
-
-
-
-
-
Button after grid
-
+

Rows

-
-

Nesting Grids

-

You can include grids even inside other grids, this can be useful for things like dividing rows inside of a page grid.

-
-
Matching Column Widths on Nested Grids
-

Each grid is divided into 16 columns, so a grid inside another grid column sub-divides that column into sixteen more columns.

-

This means, an eight wide column in grid located inside a two wide column, is the same width as a one wide column on the outer grid.

+
+

Using Rows

+

Specifying wrapping row elements allows you to manually control line breaks for rows, and use additional row variations.

+
+ +
+
Why Include Row Markup?
+

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.

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

Page Grids

+ +

Responsive Page Grids

-

Page Gutters

-

A page grid is designed to provide a responsive container suitable for wrapping the entire contents of your page.

+

Adding Page Gutters

+

A page grid is a type of grid designed to provide a responsive container for wrapping the entire contents of your page.

@@ -210,8 +198,8 @@ themes : ['Default']

Page Grid Breakpoints

-

Semantic's page grid, by default, uses percentage values for page gutters. This means your page container will constantly adjust as the browser width changes, giving you the largest possible space for each breakpoint

-

grid row and column all can receive responsive classes to make them appear only on a particular device.

+

Semantic's page grid, by default, uses percentage values for page gutters. This means your page container will constantly adjust as the browser width changes, giving you the largest possible space for each breakpoint.

+

Grids, rows, and columns can receive responsive classes to make them appear only on a particular device.

@@ -261,8 +249,51 @@ themes : ['Default']
+
+

Responsive Patterns

+

Semantic includes two common patterns for adjusting grids on different devices.

+

Doubling grids automatically double their specified column width on each device jump. So a 4 column grid, will jump to two on tablet, and one on mobile.

-

Formatting Grids

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

Stackable Grid

+

Stackable grids will not adjust their column width until mobile, where all grid columns will become full width

+

+
+
+
+
+
+
+ + +

Formatting Grids

Content Inside Grids

@@ -322,6 +353,33 @@ themes : ['Default']
+
+

Nesting Grids

+

You can include grids even inside other grids, this can be useful for things like dividing rows inside of a page grid.

+
+
Matching Column Widths on Nested Grids
+

Each grid is divided into 16 columns, so a grid inside another grid column sub-divides that column into sixteen more columns.

+

This means, an eight wide column in grid located inside a two wide column, is the same width as a one wide column on the outer grid.

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

Full Width Backgrounds

Grids use negative margins to remove first and last column margins, this means you cannot directly apply a background color on a grid. To add a background try wrapping your grid inside another container, for example a ui segment.

diff --git a/server/files/stylesheets/semantic.css b/server/files/stylesheets/semantic.css index fc70f2a02..487cf49be 100755 --- a/server/files/stylesheets/semantic.css +++ b/server/files/stylesheets/semantic.css @@ -300,7 +300,7 @@ a:hover { height: 1px; position: absolute; right: 100%; - top: -55px; + top: -30px; width: 1px; } @@ -704,6 +704,10 @@ body#example.hide { Overview Mode -----------------*/ +#example .right.floated.overview.button { + margin-bottom: 0.5em; +} + #example.overview h2.ui.header { margin-bottom: 0.5em; }