-
Notifications
You must be signed in to change notification settings - Fork 14
Foundation Grid System Patterns
[Alice October 13]: Basic Notes on Patterns Used in Foundation's Grid System
http://foundation.zurb.com/docs/grid.php
Uses floating to achieve grid layout mechanism.
- Concept of a row (.row)
- Concept of a column (.column)
- Concept of a base unit (core proportional variable) (.one, .two, .three, etc.)
These form a regular patterned logic that leaves the act of positioning to the end-user to manipulate children content elements. In this case, Foundation used the technique of a regular 2-level wrapper
“The grid is built around two key elements: rows and columns. Rows create a max-width and contain the columns; columns create the actual structure. For layouts to work properly, always put your page content inside a row and a column.”
<div class="row">
<div class="eight columns">
Main content...
</div>
<div class="four columns">
Sidebar...
</div>
</div>
Children content elements do not have general positioning and width; only specialized cases. Generally when special positioning is required, the scope is limited by extending grid with element modifier class, such as:
.parent-grid>.content-element {special overwrite settings;}
.content-element.grid-unit {special overwrite settings;}
The Grid System is an abstraction of layout away from the content entities of a site. Generally, the Grid classes are modular definitions where their semantic meaning is referencing design function rather than content meaning. Their audience is not the web-end user who is consuming content – rather the design template author who is positioning content.
As, such, their existence in the same markup sphere with content entities can create confusion. There are many strategies in dealing with this. Some systems rely on a prefix scheme such as l-offset (where the prefix “l” references “layout”) to distinguish the grid mechanism from the content entities. In the case of Foundation, a tiled sentence structure is create (centered around the “column” unit) as the base and extra properties as modifiers of columns – creating a descriptive set describing a layout mechanism:
.four.columns.end
.four.columns.centered
.four.columns.offset-by-one
.four.columns.push-two
.four.columns.mobile-three-up
.block-grid.-three-up
This forms an elegant class string, however, the drawback is that the numbering is slightly counter-intuitive ; as four refers to a divisor rather than a count. For example, in the 12 column system four.columns really refers to 4 units spanned to form 1 column – and thus creating a 3-cloumn layout. To the new user, four.columns may initially read as “a 4-column layout”.
Foundation uses first, last, nth child techniques to deal with the padding/margin needs of placement and in dealing with browser irregularities.
To accommodate layout choices that do not fit mathematical patterns, concepts such as the “end of a row” are helped by helper classes such as (.end) – in which an end user can decide specific over-rides to regular children & count patterns.
(.end), (.offset-by-one), (.push), (.pull),(.centered)
-
End of Row “In order to work around browsers' different rounding behaviours, Foundation will float the last column in a row to the right so the edge aligns. If your row doesn't have a count that adds up to 12 columns, you can tag the last column with class="end" in order to override that behaviour.”
-
Offsets “Offsets allow you to create additional space between columns in a row.”
-
Centering “Centered columns are placed in the middle of the row. This does not center their content, but centers the grid element itself. This is a convenient way to make sure a block is centered, even if you change the number of columns it contains.”
-
Explicit Source Ordering “Sometimes within the grid you want the order of your markup to not necessarily be the same as the order items are flowed into the grid. Using these source ordering classes, you can shift columns around on desktops and tablets.”