Github Repo v1.0.1

Layout


The css-framework uses Bootstrap’s grid system, which uses a series of containers, rows, and columns to layout and align content. It’s built with flexbox and is fully responsive.

Rows & Columns

col-sm-8
col-sm-4
col-sm
col-sm
col-sm
<div class="row">
  <div class="col-sm-8">col-sm-8</div>
  <div class="col-sm-4">col-sm-4</div>
</div>
<div class="row">
  <div class="col-sm">col-sm</div>
  <div class="col-sm">col-sm</div>
  <div class="col-sm">col-sm</div>
</div>

Containers

The .container class has a pre-defined breakpoint widths:

<div class="container">
  <!-- Row, Columns & Content -->
</div>

Media Query Classes

Change the size of column arrangements to fit for all sizes by using .col- or use the sizes to get the perfect combination of layout for any size screen.

Extra small Small Medium Large Extra large
Max container width None (auto) 540px 720px 960px 1140px
Class prefix .col- .col-sm- .col-md- .col-lg- .col-xl-
# of columns 12
Gutter width 30px (15px on each side of a column)

Resources