From: Eric Morris Date: Mon, 6 Jan 2014 21:59:46 +0000 (-0800) Subject: Add full-width row example to docs. X-Git-Tag: v1.0.5~2 X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=4d7298419fd6d1b4ef816482d3ebc29d2baef1d9;p=thirdparty%2Ffoundation%2Ffoundation-emails.git Add full-width row example to docs. --- diff --git a/docs/components/grid.php b/docs/components/grid.php index cfbb9881..d27ece40 100644 --- a/docs/components/grid.php +++ b/docs/components/grid.php @@ -317,6 +317,52 @@

+

Full-Width Rows

+

When working with designs that call for a container that's colored to stand out from the background (like the example above), it can often be helpful to have full-width rows that can be styled separately, especially for elements like headers or ad breaks. Since the rows of the Ink grid are usually restrained to the width of the container, this design pattern requires a slightly different syntax than normal.

+

To create a full-width row, just follow this process:

+
    +
  1. Create a standard “container > row > column” block.
    2. +
  2. Swap the .row and .container classes, keeping the tables in the same place.
    3. +
  3. Add center code to the outside (.row) table.
    4. +
+

The row should now extend to the edge of the viewport, while the content is still restricted to the width of the container, so both can be styled accordingly.

+
Reverse Row Syntax
+ + + +
+ + + + + +
+ + + + + + +
+ + Content + +
+ +
+ +
+ + +' +, 'html'); ?> +
+
Full Width Row
+

In the example below, the rows have a white background, while the body is light blue.

+ +
+

Expanders

When the Ink grid is shown on a small screen, the .columns tables expand to the full width of the container and stack vertically. On some clients, however, the columns don't expand properly if the content isn't as wide as the screen. While this might not seem so bad, it can cause your layout to appear broken if you are using a background color on the .columns table or are centering the content.

To get around this, an empty <td> with a class of expander is used after the <td> containing the actual content in the .columns table. This extra <td> isn't displayed, but it forces the content <td> to expand to full width.

diff --git a/docs/docs.php b/docs/docs.php index 7c67d76f..9835f9b0 100644 --- a/docs/docs.php +++ b/docs/docs.php @@ -7,6 +7,7 @@ #if-centerClass {height: 220px;} #if-offsetColumns {height: 165px;} #if-textPad {height: 440px;} + #if-fullWidth {height: 280px;} #if-subGrid {height: 140px;} #if-blockGrid {height: 540px;} #if-visibilityClasses {height: 110px;} @@ -22,6 +23,7 @@ #if-centerClass {height: 270px;} #if-offsetColumns {height: 165px;} #if-textPad {height: 480px;} + #if-fullWidth {height: 320px;} #if-subGrid {height: 210px;} #if-blockGrid {height: 1000px;} #if-visibilityClasses {height: 110px;} diff --git a/docs/examples/full-width.html b/docs/examples/full-width.html new file mode 100644 index 00000000..8ad554cc --- /dev/null +++ b/docs/examples/full-width.html @@ -0,0 +1,99 @@ + + + + + + + + + + + + +
+
+ + + + + + + +
+ + + + + +
+ + + + + + +
+
Normal Row
+

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore eius repellendus voluptates nisi vitae nulla similique provident expedita. Fuga, magni, iusto vel a aperiam nihil expedita voluptas odio hic odit!

+
+ +
+ +
+ + + + + +
+
+ + + + + +
+ + + + + + +
+
Full Width Row
+

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore eius repellendus voluptates nisi vitae nulla similique provident expedita. Fuga, magni, iusto vel a aperiam nihil expedita voluptas odio hic odit!

+
+ +
+ +
+
+ + + +
+
+ + \ No newline at end of file