SMB ATG UTK 1.0.1-7

Grids & Containers

This UI Toolkit uses a simple system of containers to wrap page content and the Foundation grid in a way that provides consistent alignment across breakpoints.

Grids

The grids we use are simply the basic Foundation grid and the Foundation block grid, depending on layout needs. A simple example of the basic grid can be seen below. Visit the Foundation documentation for a deeper explanation.

This is a twelve column section in a row. Each of these includes a div.callout element so you can see where the columns are — it’s not required at all for the grid.

Six columns

Four columns

Grid breakpoints

We use the following breakpoint classes for our grid columns:

Breakpoint class	Viewport width
xsmall	0
small	320px
medium	480px
large	768px
xlarge	1024px
xxlarge	1364px

Containers

This container system is not compatible with the Zurb Foundation Combined Column/Row component <div class="column row"></div>, which should be avoided in all markup. There are two types of containers available. Both may be used with or without nested row > columns, depending on layout needs:

Container-full .container-full — a container that is 100% of the defined site width (not browser width, unless smaller breakpoints are reached).
Container-responsive .container-responsive — a container with left and right padding that changes responsively depending on breakpoints and guarantees structured alignment of design components.

Container-full

                                <!-- With nested row > columns -->
                                <div class="container-full">
                                    <div class="row">
                                        <div class="large-12 columns">
                                            …
                                        </div>
                                    </div>
                                </div>
                                
                                <!-- Without nested row > columns -->
                                <div class="container-full">
                                    …
                                </div>

Container-responsive

                                <!-- With nested row > columns -->
                                <div class="container-responsive">
                                    <div class="row">
                                        <div class="large-12 columns">
                                            …
                                        </div>
                                    </div>
                                </div>
                                
                                <!-- Without nested row > columns -->
                                <div class="container-responsive">
                                    …
                                </div>

Real-world example

We are columns nested in a row that is nested in a container-responsive.

Real-world example markup

                                <div class="container-full">
                                    <img src="images/full-width-test-image.png" class="global-margin-bottom" alt="example full-width image">
                                </div>
                                <div class="container-responsive">
                                    <div class="row">
                                        <div class="large-4 columns">
                                            <div class="callout secondary">
                                                We are columns nested in a row that is nested in a <strong>container-responsive.</strong>
                                            </div>
                                        </div>
                                        <div class="large-4 columns">
                                            <div class="callout secondary">
                                                We are columns nested in a row that is nested in a <strong>container-responsive.</strong>
                                            </div>
                                        </div>
                                        <div class="large-4 columns">
                                            <div class="callout secondary">
                                                We are columns nested in a row that is nested in a <strong>container-responsive.</strong>
                                            </div>
                                        </div>
                                    </div>
                                </div>

Nested Container Responsive

As a general rule, containers should not be nested within each other, but if necessary, we have styling that will override the inevitable extra padding.

Below is an example of a .container-responsive nested within another .container-responsive.

Outer container-responsive

Inner container-responsive