Breakpoints are defined browser widths that allow for different layouts to appear when the browser is within that declared width.
small targets mobile devices.
medium targets tablets.
large targets desktops.
xlarge targets high resolution displays (think 4K and 5K displays).
Currently, the UI-Toolkit has the following four breakpoint values in pixels:
Start by adding an element with a class of .row. This will create a horizontal block to contain vertical columns.
Next, add the .columns class to a child element of that row. If you only add the .columns class, that column will span the entire width of the containing .row.
Specify the widths of each column with the .small-#, .medium-#, .large-# and .xlarge-# classes, where "#" represents a number of columns you want to occupy.
This manner of number usage within class names will permiate the UITK. Avoid headaches by having the value of those columns add up to the number "12" within it's containing .row. Check out the example below.
The UI-Toolkit is mobile-first. Always code for small screens first; larger displays will inherit those styles. Customize/override for larger screens as necessary to easily match your designs.
<div class="grid-example">
<div class="row">
<div class="small-3 medium-6 large-4 xlarge-1 columns"></div>
<div class="small-3 medium-4 large-4 xlarge-2 columns"></div>
<div class="small-6 medium-2 large-4 xlarge-9 columns"></div>
</div>
<div class="row">
<div class="large-1 xlarge-6 columns"></div>
<div class="large-7 xlarge-2 columns"></div>
<div class="large-4 xlarge-4 columns"></div>
</div>
<div class="row">
<div class="small-3 large-2 columns"></div>
<div class="small-3 large-8 columns"></div>
<div class="small-6 large-2 columns"></div>
</div>
<div class="row">
<div class="small-3 xlarge-11 columns"></div>
<div class="small-9 xlarge-1 columns"></div>
</div>
<div class="row">
<div class="large-4 columns"></div>
<div class="large-8 columns"></div>
</div>
<div class="row">
<div class="small-6 large-5 columns"></div>
<div class="small-6 large-7 columns"></div>
</div>
<div class="row">
<div class="large-6 columns"></div>
<div class="large-6 columns"></div>
</div>
</div>
Small grids expand to all larger screens seamlessly. This means whichever number of columns you declare for small screens will be also used for medium screens, large screens and xlarge screens unless overwitten by a larger screen class.
<div class="grid-example">
<div class="row">
<div class="small-10 columns"></div>
<div class="small-2 columns"></div>
</div>
<div class="row">
<div class="small-9 columns"></div>
<div class="small-3 columns"></div>
</div>
</div>
Medium grids expand to larger screens as well. This means whichever number of columns you declare for medium screens will be also used for large screens and xlarge screens unless overwitten by a larger screen class.
Medium sized screens will inherit small columns if they are declared and aren't overwritten with medium columns.
<div class="grid-example">
<div class="row">
<div class="small-10 medium-4 columns"></div>
<div class="small-2 medium-8 columns"></div>
</div>
<div class="row">
<div class="small-9 medium-11 columns"></div>
<div class="small-3 medium-1 columns"></div>
</div>
</div>
Large grids expand to larger screens. This means whichever number of columns you declare for large screens will be also used for xlarge screens unless overwitten by a xlarge screen class.
Large sized screens will inherit small and/or medium columns if they are declared and aren't overwritten with large columns.
<div class="grid-example">
<div class="row">
<div class="small-10 medium-4 large-1 columns"></div>
<div class="small-2 medium-8 large-11 columns"></div>
</div>
<div class="row">
<div class="small-9 medium-11 large-2 columns"></div>
<div class="small-3 medium-1 large-10 columns"></div>
</div>
</div>
Extra large grids expand to full width of the screen up to 5K resolution. This means whichever number of columns you declare for xlarge screens will be also used for screen widths 1201 pixels or more up to 5120 pixels.
Extra large sized screens will inherit small, medium and/or large columns if they are declared and aren't overwritten with large columns.
<div class="grid-example">
<div class="row">
<div class="small-10 medium-4 large-1 xlarge-7 columns"></div>
<div class="small-2 medium-8 large-11 xlarge-5 columns"></div>
</div>
<div class="row">
<div class="small-9 medium-11 large-2 xlarge-6 columns"></div>
<div class="small-3 medium-1 large-10 xlarge-6 columns"></div>
</div>
</div>
Note that, by default, a .row element will occupy the entire width of its parent. In the event that your grid-layout has no parent, you may use the .grid-container class to constrain the width of your grid.
<div class="grid-container grid-example">
<div class="row">
<div class="small-2 medium-1 large-4 xlarge-3 columns"></div>
<div class="small-4 medium-2 large-4 xlarge-6 columns"></div>
<div class="small-6 medium-9 large-4 xlarge-3 columns"></div>
</div>
</div>
The construction of our grid is such that the exterior columns will not have any gutters on their outward facing sides. This is to say that the left- and right-most columns will not have any additional spacing between them and their containers.
<div class="bg-off-white">
<div class="row grid-spacing-example">
<div class="small-4 columns"></div>
<div class="small-4 columns"></div>
<div class="small-4 columns"></div>
</div>
</div>
As such, it is the responsibility of a grid's container class to supply appropriate spacing between the grid elements and their neighbors in the UI. It is recommended that this be implemented using the various padding utility-classes available.
For example, below, we use the .padding-medium class to apply spacing around our grid.
<div class="bg-off-white padding-medium">
<div class="row grid-spacing-example">
<div class="small-4 columns"></div>
<div class="small-4 columns"></div>
<div class="small-4 columns"></div>
</div>
</div>
In other contexts, we could use a variety of other padding-classes for a similar effect, but with different measurements.
Another quality of the construction of our grid is that the column itself is actually intended to act as a wrapper around sub-elements rather than being the element itself. This can be seen quite clearly when demonstrating columns with a background-color.
<div class="bg-off-white padding-medium">
<div class="row grid-fill-example">
<div class="small-4 col cell-props"></div>
<div class="small-4 col cell-props"></div>
<div class="small-4 col cell-props"></div>
</div>
</div>
In the example above, the .cell-props class applies a background-color and a border. Because it is being applied directly to the column itself rather than to a child, the grid does not appear to be correctly spaced.
In the example below, we fix this by applying the .cell-props class to a child of a column element.
<div class="bg-off-white padding-medium">
<div class="row grid-fill-example">
<div class="small-4 columns">
<div class="cell-props"></div>
</div>
<div class="small-4 columns">
<div class="cell-props"></div>
</div>
<div class="small-4 columns">
<div class="cell-props"></div>
</div>
</div>
</div>
Note that throughout this page, we apply special CSS to better visually illustrate our examples. In these examples, sub-elements such as the ones described above do not exist.
You can nest the grids indefinitely, though at a certain point it will get absurd.
<div class="grid-example">
<div class="row collapse">
<div class="small-9 columns">
<div class="row collapse">
<div class="small-11 columns">
<div class="row collapse">
<div class="small-6 columns"></div>
<div class="small-6 columns"></div>
</div>
</div>
<div class="small-1 columns"></div>
</div>
</div>
<div class="small-3 columns">
<div class="row collapse">
<div class="small-6 columns"></div>
<div class="small-6 columns"></div>
</div>
</div>
</div>
</div>
Skip (offset) up to 11 columns to the right by using classes like .small-offset-#, .medium-offset-#, .large-offset-# and .xlarge-offset-#. Remember, UITK is mobile-first. Any class added to affect a smaller viewport/display will also take effect in larger viewports/displays.
The example below uses medium classes, which effect medium, large and xlarge unless overwitten with a larger viewport/display class.
<div class="grid-example">
<div class="row small-collapse large-uncollapse">
<div class="medium-1 columns"></div>
<div class="medium-11 columns"></div>
</div>
<div class="row small-collapse large-uncollapse">
<div class="medium-1 columns"></div>
<div class="medium-10 medium-offset-1 columns"></div>
</div>
<div class="row small-collapse large-uncollapse">
<div class="medium-1 columns"></div>
<div class="medium-9 medium-offset-2 columns"></div>
</div>
<div class="row small-collapse large-uncollapse">
<div class="medium-1 columns"></div>
<div class="medium-8 medium-offset-3 columns"></div>
</div>
</div>
In order to work around browsers' different rounding behaviors, 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 a class of .end in order to override that behavior.
<div class="grid-example">
<div class="row">
<div class="medium-3 columns"></div>
<div class="medium-3 columns"></div>
<div class="medium-3 columns"></div>
</div>
<div class="row">
<div class="medium-3 columns"></div>
<div class="medium-3 columns"></div>
<div class="medium-3 columns end"></div>
</div>
</div>
The .collapse class lets you remove column gutters (padding).
<div class="grid-example">
<div class="row collapse">
<div class="small-6 columns"></div>
<div class="small-6 columns"></div>
</div>
</div>
There are times when you won't want each media query to be collapsed or uncollapsed. In this case, use the media query size you want and collapse or uncollapse and add that to your .row element. The following example removes the gutter at the small breakpoint and then adds the gutter to columns at the large breakpoint. With the UITK being mobile-first, the classes added to small will apply to all larger classes unless changed - which in this example we do with the large uncollapse. This means the uncollapse will apply to the xlarge breakpoint also.
<div class="grid-example">
<div class="row small-collapse large-uncollapse">
<div class="small-6 columns"></div>
<div class="small-6 columns"></div>
</div>
</div>
Center your columns by adding a class of .small-centered to your column. This will be inherited by larger breakpoints by default, but you can also center solely on a specific breakpoint. The classes needed are:
.small-centered.medium-centered.large-centered.xlarge-centeredTo uncenter on a specific breakpoint, add the uncentered equivalent for that breakpoint. Those classes are:
.small-uncentered.medium-uncentered.large-uncentered.xlarge-uncentered<div class="grid-example">
<div class="row">
<div class="small-3 small-centered columns"></div>
</div>
<div class="row">
<div class="small-6 large-centered columns"></div>
</div>
<div class="row">
<div class="small-9 small-centered large-uncentered columns"></div>
</div>
<div class="row">
<div class="small-11 small-centered columns"></div>
</div>
</div>
All that mobile-first development will pay off here. Using these source ordering classes, you can shift columns around between breakpoints. This means if you place sub-navigation below main content on small displays, you have the option to position the sub-navigation on either the left or right of the page for large displays.
Prefix push/pull with the size of the device you want to apply the styles to. .medium-push-#, .large-push-# (where # represents a number of columns) is the syntax you'll use. Use .large-reset-order to reset pushed or pulled columns to their original position on large screens.
<div class="grid-example">
<div class="row">
<div class="small-10 small-push-2 columns medium-reset-order"></div>
<div class="small-2 small-pull-10 columns medium-reset-order"></div>
</div>
<div class="row">
<div class="large-9 large-push-3 columns xlarge-reset-order"></div>
<div class="large-3 large-pull-9 columns xlarge-reset-order"></div>
</div>
<div class="row">
<div class="large-8 large-push-4 columns"></div>
<div class="large-4 large-pull-8 columns"></div>
</div>
<div class="row">
<div class="small-5 small-push-7 medium-7 medium-push-5 columns"></div>
<div class="small-7 small-pull-5 medium-5 medium-pull-7 columns"></div>
</div>
<div class="row">
<div class="medium-6 medium-push-6 columns"></div>
<div class="medium-6 medium-pull-6 columns"></div>
</div>
</div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmodtempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodoconsequat. Duis aute irure dolor in reprehenderit in voluptate velit essecillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat nonproident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Grid
Create powerful multi-device layouts quickly and easily with the 12 column, nest-able Foundation grid. If you're familiar with grid systems, you'll feel right at home. If not, you'll learn quickly.