Layout - Baseline UI

Container

Containers center content and have responsive max widths:

Centered container with max width

HTML

<div class="bl-container">
  <p>Centered content</p>
</div>

Container Fluid

Fluid containers use full width:

HTML

<div class="bl-container-fluid">
  <p>Full width container</p>
</div>

Grid System

Baseline UI uses a flexible 12-column grid system:

Basic Grid

12 columns

6 columns

4 columns

HTML

<div class="bl-row">
  <div class="bl-col-12">12 columns</div>
</div>

<div class="bl-row">
  <div class="bl-col-6">6 columns</div>
  <div class="bl-col-6">6 columns</div>
</div>

<div class="bl-row">
  <div class="bl-col-4">4 columns</div>
  <div class="bl-col-4">4 columns</div>
  <div class="bl-col-4">4 columns</div>
</div>

Responsive Grid

Responsive breakpoints for different screen sizes:

HTML

<div class="bl-row">
  <div class="bl-col-12 bl-col-md-6 bl-col-lg-4">
    Responsive column
  </div>
</div>

Flexbox Utilities

Flexbox utilities for flexible layouts:

Display

CSS Classes

.bl-flex          /* display: flex */
.bl-inline-flex   /* display: inline-flex */

Direction

CSS Classes

.bl-flex-row           /* flex-direction: row */
.bl-flex-row-reverse  /* flex-direction: row-reverse */
.bl-flex-col           /* flex-direction: column */
.bl-flex-col-reverse   /* flex-direction: column-reverse */

Justify Content

CSS Classes

.bl-justify-start    /* justify-content: flex-start */
.bl-justify-center  /* justify-content: center */
.bl-justify-end     /* justify-content: flex-end */
.bl-justify-between /* justify-content: space-between */
.bl-justify-around  /* justify-content: space-around */

Align Items

CSS Classes

.bl-items-start    /* align-items: flex-start */
.bl-items-center  /* align-items: center */
.bl-items-end     /* align-items: flex-end */
.bl-items-stretch /* align-items: stretch */