Global styles, such as typography, colors, grid, etc.
Brandaris includes a powerful mobile-first grid system for building layouts of all shapes and sizes. It’s based on a 12 column layout and has multiple tiers.
At a high level, here’s how the grid system works:
.container
for fixed width or .container-fluid
for full width—center your site’s contents and help align your grid content. You can use it in combination with .container-full
for a conatiner without side padding..col-sm
.width
s are set in percentages, so they’re always fluid and sized relative to their parent element.padding
to create the gutters between individual columns..col-sm-4
applies to small, medium, large, and extra large devices).Add any number of auto sizing columns to a row. Let the grid figure it out.
<div class="row">
<div class="col-xs">
One of three columns
</div>
<div class="col-xs">
One of three columns
</div>
<div class="col-xs">
One of three columns
</div>
</div>
Add classes to align elements to the start or end of a row as well as the top, bottom, or center of a column.
Align all columns to the start of the .row
. This is default.
<div class="row start-xs">
<div class="col-4">
...
</div>
<div class="col-4">
...
</div>
</div>
Align all columns to the center of the .row
.
<div class="row center-xs">
<div class="col-4">
...
</div>
<div class="col-4">
...
</div>
</div>
Align all columns to the end of the .row
.
<div class="row end-xs">
<div class="col-4">
...
</div>
<div class="col-4">
...
</div>
</div>
You can also use different alignments for different viewport sizes:
<div class="row center-xs end-sm start-lg">
<div class="col-xs-6">
All together now
</div>
</div>
Align all columns at the top of the .row
. This is default.
<div class="row top-xs">
<div class="col-4">
...
</div>
<div class="col-4">
...
</div>
<div class="col-4">
...
</div>
</div>
Align all columns in the middle of the .row
.
<div class="row middle-xs">
<div class="col-4">
...
</div>
<div class="col-4">
...
</div>
<div class="col-4">
...
</div>
</div>
Align all columns to the bottom of the .row
.
<div class="row bottom-xs">
<div class="col-4">
...
</div>
<div class="col-4">
...
</div>
<div class="col-4">
...
</div>
</div>
Stretch all columns for equal, full, height in the .row
.
<div class="row full-xs">
<div class="col-4">
...
</div>
<div class="col-4">
...
</div>
<div class="col-4">
...
</div>
</div>
Add classes to reorder columns.
<div class="row">
<div class="col-xs">
1
</div>
<div class="col-xs">
2
</div>
<div class="col-xs first-xs">
3
</div>
</div>
<div class="row">
<div class="col-xs last-xs">
1
</div>
<div class="col-xs">
2
</div>
<div class="col-xs">
3
</div>
</div>
<div class="row reverse">
<div class="col-xs">
1
</div>
<div class="col-xs">
2
</div>
<div class="col-xs">
3
</div>
</div>