4.3.1 #permalink .cols Breakpoint Modifiers
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