The grid is a helpful layout tool that can be used where needed. Keep in mind that most OpenGov interfaces are comprised of 100% width elements and don't need a grid.
To use columns there are a couple things to do:
1) Ensure that the content is wrapped in <div class=".ui-width-wrapper"></div>. This sets the proper left and right padding.
2) Wrap each row of columns in <div class="ui-row"></div>. The row class does some fancy stuff with negative left and right margins to unsure that .ui-col-#of6 elements have the same left and right edge as everything else.
I'm a normal paragraph tag and since I'm simply 100% width, I can being wrapped in .ui-row or .ui-col-6of6.
Right below me is a 6 of 6 column wrapped in a .ui-row container and below that are two 3 of 3 columns which are also wrapped in a .ui-row container.
I'm another normal paragraph tag sandwiched between two .ui-rows. Notice how my left and right edges are still aligned to the same edge as the column divs!
NOTE: Since you can't make quarters out of 6, you'll need to use '.ui-col-3of12'.
<div class="ui-width-wrapper kss-grid-example">
<p>I'm a normal paragraph tag and since I'm simply 100% width, I can being wrapped in .ui-row or .ui-col-6of6.</p>
<p>Right below me is a 6 of 6 column wrapped in a .ui-row container and below that are two 3 of 3 columns which are also wrapped in a .ui-row container.</p>
<div class="ui-row">
<div class="ui-col-6of6"></div>
</div>
<div class="ui-row">
<div class="ui-col-3of6"></div>
<div class="ui-col-3of6"></div>
</div>
<p>I'm another normal paragraph tag sandwiched between two .ui-rows. Notice how my left and right edges are still aligned to the same edge as the column divs!</p>
<div class="ui-row">
<div class="ui-col-2of6"></div>
<div class="ui-col-4of6"></div>
</div>
<div class="ui-row">
<div class="ui-col-5of6"></div>
<div class="ui-col-1of6"></div>
</div>
<p>NOTE: Since you can't make quarters out of 6, you'll need to use '.ui-col-3of12'.</p>
<div class="ui-row">
<div class="ui-col-3of12"></div>
<div class="ui-col-3of12"></div>
<div class="ui-col-3of12"></div>
<div class="ui-col-3of12"></div>
</div>
</div>You can nest grid columns within grid columns. When nesting, remember these two things:
1) Grid columns always need to have .ui-row as their direct parent. 2) Grid column widths are relative percentages of their parents. So, if you nest .ui-col-3of6 (width: 50%) within a .ui-col-5of6 (width: 83%), it will end up being an odd 50% of 83% (or 41.5%) which does not align to the grid.
Below are some exampes of proper nesting.
<div class="ui-width-wrapper kss-grid-example kss-nested-grid-examples">
<div class="ui-row">
<div class="ui-col-3of6">
<div class="ui-row">
<div class="ui-col-1of3 nobreak"></div>
<div class="ui-col-2of3 nobreak"></div>
</div>
</div>
<div class="ui-col-3of6">
<div class="ui-row">
<div class="ui-col-2of3 nobreak"></div>
<div class="ui-col-1of3 nobreak"></div>
</div>
</div>
</div>
<div class="ui-row">
<div class="ui-col-4of6">
<div class="ui-row">
<div class="ui-col-2of4"></div>
<div class="ui-col-2of4"></div>
</div>
</div>
<div class="ui-col-2of6">
<div class="ui-row">
<div class="ui-col-1of2"></div>
<div class="ui-col-1of2"></div>
</div>
</div>
</div>
</div>In some cases, you'll need to shift a column one or two column units to the left or right.
To do so, use the ui-offset mixin.
$columns - Unit. The number of columns to shift.$direction - Offset left or right. Default is left.@include offset(2);
When using breakpoints, it's best to stick to our predefined widths.
@include breakpoint($breakMedium) { color: red }
$breakLarge: 1280px
$breakMedium: 960px
$breakSmall: 640px
Beginning of tablet sizes
$break480: 480px
720 (+ 70px for side nav)
$break790: 790px
1080 (+ 70px for side nav)
$break1150: 1150px
1440 (+ 70px for side nav)
$break1510: 1510px
1870 (+ 70px for side nav)
$break1870: 1870px
Using @media queries, the grid responsively adapts to your screen size. If you don't want the columns to change sizes, simply add .nobreak.
| Grids | 960px or more | Between 960px and 640px | 640px or less |
|---|---|---|---|
.ui-col1of6 |
16.6% | 100% | 100% |
.ui-col3of12 |
25% | 50% | 100% |
.ui-col2of6 |
33.3% | 50% | 100% |
.ui-col3of6 |
50% | 50% | 100% |
.ui-col4of6 |
66.6% | 100% | 100% |
.ui-col5of6 |
83.3% | 100% | 100% |
.ui-col6of6 |
100% | 100% | 100% |
In some cases, you'll need to shift a column one or two column units to the left or right.
To do so, use the ui-offset mixin.