Layout

Container

Use .flx-container for a fluid container which has a max viewport width of 1200px and is fluid on mobile. By default the component has 1.6rem left and right.

  • Container gutter: 16px
  • Available space: 1168px
<div class=“flx-container”>
    <!-- Content here -->
</div>

Fluid container

Add .flx-container--fluid after .flx-container for a full width container that spans the entire viewport. By default the component has 1.6rem left and right.

  • Container gutter: 16px
  • Available space: 1168px

<div class=“flx-container flx-container—fluid”>
    <!– Content here –>
</div>

Bootstrap grid

Our grid uses the Bootstrap grid system but we have doubled it to 24 columns for our needs. We also use a 20px gutter which is 10px on either side of a column. Follow the Bootstrap documentation for more information on breakpoint classes.

Example
.col-md-24
.col-md-12
.col-md-12
.col-md-8
.col-md-8
.col-md-8
.col-md-6
.col-md-6
.col-md-6
.col-md-6
.col-md-4
.col-md-4
.col-md-4
.col-md-4
.col-md-4
.col-md-4
.col-md-2
.col-md-2
.col-md-2
.col-md-2
.col-md-2
.col-md-2
.col-md-2
.col-md-2
.col-md-2
.col-md-2
.col-md-2
.col-md-2