Bluegrid's API is powerful, while meeting your preferred way of speaking to become simple, clean, and intuitive.

The Basics

Each set of columns is wrapped by a row. You may also think in terms of a flex wrapper for flex items

.layout-wrapper { @include row(); }

.content { @include column(8); }
.sidebar { @include column(4); }
      

Flexible API

Size your columns in whatever way makes sense to you.
Numbers alone will assume the default number of grid units, but you can set your own.
Percentages work as well.

.three-col { @include column(3); }
.perc-25 { @include column(25%); }
.one-of-4 { @include column(1 of 4); }
.one-4 { @include column(1 4); }
      

Variable Column Sizes

By default, a column alone stretches to fit the size of the wrapper (mobile first)
Use fit to make columns match their content
Use grow to make columns stretch as much as possible without exceeding a row.

.default { @include column(); }
.fit { @include column(fit); }
.grow { @include column(grow); }
.fixed-col { @include column(300px); }
      

Align columns within rows

With the power of bluegrid, it is easy to align content.
Combine horizontal or vertical alignments in any order.

.wrapper-left { @include row(left); } // can be written as row();
.wrapper-center { @include row(center); }
.wrapper-right { @include row(right); }
.wrapper-around { @include row(around); }
.wrapper-between { @include row(between); }

.tall-wrapper-top { @include row(top center); height: 125px; } // can be written as row(center);
.tall-wrapper-middle { @include row(center middle); height: 125px;  }
.tall-wrapper-bottom { @include row(bottom center); height: 125px;  }
      

Use your preferred terminology

Set terminology within the settings file.

// ** Rows **
// Justify horizontally
'start': left start beginning justify-start,
'center': center hcenter justify-center,
'end': right end justify-end,
'around': around justify-around,
'between': between justify-between,

// Align vertically
'top': top align-start content-top,
'middle': middle vcenter align-center,
'bottom': bottom align-end content-bottom,

// ** Columns **
'fit': fit match content 'match content',
'grow': grow stretch expand
      

Offsets

Offsets can be added easily, and work from the left or right.

.offset-1 {
  @include column(2);
  @include offset(1);
}
.offset-1-right {
  @include column(2);
  @include offset(1, right);
}
      

What about being responsive?

This is a feature that should not be coupled with a grid system.
Unlike classes, breakpoints are not included in BlueGrid mixins.
I recommend using a powerful library such as Breakpoint.

@import 'vendors/breakpoint/breakpoint';
@import 'vendors/bluegrid/bluegrid';

.example-responsive-col {
  @include column();

  @include breakpoint(600px) {
    @include column(50%);
  }
}
      

Reordering content

This is arguably one of the most powerful features of using flexbox for a grid.
When combined with media queries the possibilities are limitless.
Keep in mind that by default, all flex items are at order: 0
Resize to see the behavior below.

.item-variable {
  @include column(fit);
  order: -1;

  @include breakpoint(600px) { order: 1; }
  @include breakpoint(800px) { order: 2; }
  @include breakpoint(900px) { order: 3; }
  @include breakpoint(1000px) { order: 4; }
}

.item-one { @include column(grow); order: 0; }
.item-two { @include column(grow); order: 1; }
.item-three { @include column(grow); order: 2; }
.item-four { @include column(grow); order: 3; }
      

Classes are included for rapidly prototyping and/or debugging layouts. This isn't the "semantic" way of building production websites, but it certainly helps to have them available.

Compiling of classes can be switched off in settings to save file size.

// _variables.scss

...

$bluegrid-settings: (
  'do-compile-classes': true,
  ...
);
          

Simple lightweight syntax

Wrap your grid with row and then add col to each child.
Size columns by adding a screen size followed by a number.
x = all screen sizes, s = small, m = medium, l = large
Optionally, you can wrap your row with the '.container' helper to keep content restrained.

<div class="container">

  <div class="row">

    <div class="col"> Full Width column </div>

    <div class="col x6">6 columns on all screen sizes</div>

    <div class="col s6">6 columns on small and up</div>

    <div class="col m6">6 columns on medium and up</div>

    <div class="col l6">6 columns on large and up</div>

    <div class="col fit">Column will shrink to size of content</div>

  </div>

</div>

        

Offsets

Easy Peasy Lemon Squeasy

Horizontal Positioning

Utilize Flexbox's powerful content spacing for your columns.

Vertical Positioning

One of the biggest pains with layouts is made simple with BlueGrid. Add top, middle, or bottom to your row element

.row top

.col x6 l4

.row middle

.col x6 l4

.row bottom

.col x6 l4

Column Reordering

Need to quickly re-order columns? Just add the appropirate helper class.

Negative Margins

The columns will align properly to content outside of the grid

// _variables.scss

// Add, remove, or rename breakpoints here
$bluegrid-breakpoints: (
  'x': default,
  's': 600px,
  'm': 960px,
  'l': 1140px
);

$bluegrid-settings: (
  // Default grid variables
  'num-cols': 12,
  'gutter-width': 1rem,
  'default-span': 100%, //This can be 'fit', or a unit (1), or fill whole row (100%)

  // Defaults for content containers
  'container-width': 1280px,
  'container-padding': 1rem,

  ...
// Mixin terminology omitted ...
);