4 #permalink Columns & Grid system

A flexible grid system to build dynamic content columns on different screen sizes.

Source: grid/css/grid.css, line 1

4.1 #permalink .grid

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

Outer wrapping container for a complete row of grid cells

Examples
Default styling
...
.grid--flipped
Inverts the direction of grid cells (left and right)
...
.grid--nogaps
Removes the gutter between the cells
...
Markup 
<div class="grid {modifiers}">
    <div class="grid_cell cols--8">
        <div class="grid_body">
            <div class="styleguide_block"> ... </div>
        </div>
    </div>
</div>
Source: grid/css/grid.css, line 11

4.3 #permalink .cols

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

Modifies the width of elements, optinally depending on the current browser window size (see styleguide section 4.3.1 if you need more information). The .cols--X classes as well as their breakpoint modifiers can be used on any element which has either display: block, display: inline-block, display: table or display: flex set

Example
...
...
...
...
...
...
...
...
...
...
...
...
Markup 
<div class="cols--1">
    <div class="styleguide_block"> ... </div>
</div>
<div class="cols--2">
    <div class="styleguide_block"> ... </div>
</div>
<div class="cols--3">
    <div class="styleguide_block"> ... </div>
</div>
<div class="cols--4">
    <div class="styleguide_block"> ... </div>
</div>
<div class="cols--5">
    <div class="styleguide_block"> ... </div>
</div>
<div class="cols--6">
    <div class="styleguide_block"> ... </div>
</div>
<div class="cols--7">
    <div class="styleguide_block"> ... </div>
</div>
<div class="cols--8">
    <div class="styleguide_block"> ... </div>
</div>
<div class="cols--9">
    <div class="styleguide_block"> ... </div>
</div>
<div class="cols--10">
    <div class="styleguide_block"> ... </div>
</div>
<div class="cols--11">
    <div class="styleguide_block"> ... </div>
</div>
<div class="cols--12">
    <div class="styleguide_block"> ... </div>
</div>
Source: grid/css/grid-cols.css, line 1

4.3.1 #permalink .cols Breakpoint Modifiers

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

Modifies the width of elements depending on specified breakpoints. All used media queries are written with Mobile-First in mind, so the breakpoint defines the minimum width the actual browser window must have for the modifier to work. Breakpoints are defined from 500px through to 1200px in 100px steps. Please note that the examples below do not show all available modifiers, so you might have to define a breakpoint which differs from the used one in the example below. The complete list of all supported breakpoints is: cols--500-X, cols--600-X, cols--700-X, cols--800-X, cols--900-X, cols--1000-X, cols--1100-X and cols--1200-X

Examples
Default styling
...
.cols--700-1
Modifies the width to span 1 column if the window is 700px+ wide
...
.cols--700-2
Modifies the width to span 2 columns if the window is 700px+ wide
...
.cols--700-3
Modifies the width to span 3 columns if the window is 700px+ wide
...
.cols--700-4
Modifies the width to span 4 columns if the window is 700px+ wide
...
.cols--700-5
Modifies the width to span 5 columns if the window is 700px+ wide
...
.cols--700-6
Modifies the width to span 6 columns if the window is 700px+ wide
...
.cols--700-7
Modifies the width to span 7 columns if the window is 700px+ wide
...
.cols--700-8
Modifies the width to span 8 columns if the window is 700px+ wide
...
.cols--700-9
Modifies the width to span 9 columns if the window is 700px+ wide
...
.cols--700-10
Modifies the width to span 10 columns if the window is 700px+ wide
...
.cols--700-11
Modifies the width to span 11 columns if the window is 700px+ wide
...
.cols--700-12
Modifies the width to span 12 columns if the window is 700px+ wide
...
Markup 
<div class="cols--12 {modifiers}">
    <div class="styleguide_block"> ... </div>
</div>
Source: grid/css/grid-cols.css, line 59