Flexicution

This the type of grid they said they really wanted. So I gave them this right here, now go build something.

Installation

This is the preferred method to install Flexicution. Simply install using NPM or Bower.

# NPM
npm install flexicution

# Bower
bower install flexicution

Usage

You have two different options for using Flexicution. You may include the framework and build your column classes yourself, or you can use our pre-defined breakpoints and generated class names.

Base

This includes only the Sass mixins that power Flexicution, with no specific class names.

// Import Flexicution library
@import "node_modules/flexicution/flexicution";

With Classes

This includes the Sass mixins that power Flexicution, as well as responsive column classes.

// Import Flexicution library
@import "node_modules/flexicution/flexicution-classes";

Setup

Flexicution is as agnostic as possible in regards to your layout and breakpoints. You can use the semantic grid mixin to generate rows and columns for your layout and components, or you can generate responsive class names based on the breakpoints used in your project.

Semantic Grid Mixin

//
// Generate Semantic Rows
// ----------------------
// @param $gutter - Gutter between columns. Default is `$flex-gutter-width` (30px)

@include make-row();


//
// Generate Semantic Columns
// -------------------------
// @param $columns - Number of columns to take up
// @param $gutter - Gutter between columns. Default is `$gutter-width` (30px)
// @param $media-query - Breakpoint for the column to collapse. Default is null
// @param $min-max - Explicitly sets the media query to be `min-width` or `max-width`. Default is `min`

@include make-column();

Generating Class Names

//
// Generate Grid Classes
// ---------------------
// @param $class - Class name you want postfixed after `.col-`

// Extra-small
@include make-grid(xsmall);

// Small
@media (min-width: 480px) {
  @include make-grid(small);
}

Settings

The Flexicution library has variables that help configure the base library and library with classes. You may override these in your own project if you wish to customize your grid layout.

Base

// Number of grid columns
$flex-grid-columns: 12;

// Amount of gutter width
$flex-grid-gutter-width: 30px;

Classes

// Breakpoints
$media-xsmall:   480px;
$media-small:    768px;
$media-medium:   960px;
$media-large:   1120px;
$media-xlarge:  1280px;

Flexbox Support

Basic Grids

Class names can be used to build layouts based on viewport width.

.col-[viewport size]-[column size]

1
1/2
1/2
1/3
1/3
1/3
1/4
1/4
1/4
1/4
1/6
1/6
1/6
1/6
1/6
1/6
1/12
1/12
1/12
1/12
1/12
1/12
1/12
1/12
1/12
1/12
1/12
1/12
<div class="row">
  <div class="col-small-6"></div>
  <div class="col-small-6"></div>
</div>

Adaptive Column Sizing

Automatically size columns inside of a grid.

.col-[viewport size]

xsmall
xsmall
xsmall
small
medium
<div class="row">
    <div class="col-xsmall"></div>
    <div class="col-xsmall"></div>
    <div class="col-xsmall"></div>
    <div class="col-small"></div>
    <div class="col-medium"></div>
</div>

Responsive Layouts (resize your screen)

Class names can be combined to adjust layouts based on viewport width.

<div class="row">
    <div class="col-xsmall-12
                col-small-8
                col-medium-6
                col-large-4
                col-xlarge-3">
    </div>
</div>

Offsets

Columns can be easily offset using class names according to viewport width.

.col-[viewport size]-offset-[offset]

<div class="row">
    <div class="col-small-6 col-small-offset-2"></div>
</div>

Nested Grids

Want a grid inside of a grid inside of… a grid? We won't stop you.

<div class="row">
    <div class="col-small-6">
        <div class="row">
          <div class="col-small-6"></div>
          <div class="col-small-6"></div>
        </div>
    </div>
</div>

Alignment

Apply modifier classes to adjust the horizontal and vertical alignment of columns inside of a grid.

-[size]-start

-[size]-center

-[size]-end

Here's an example of adjusting horizontal alignment based on viewport size.

<div class="row -xsmall-start"></div>

<div class="row -xsmall-center"></div>

<div class="row -xsmall-end"></div>

<div class="row -xsmall-center -medium-end -xlarge-start"></div>

-[size]-top

-[size]-middle

-[size]-bottom

Here's an example of adjusting vertical alignment based on viewport size.

<div class="row -xsmall-top"></div>

<div class="row -xsmall-middle"></div>

<div class="row -xsmall-bottom"></div>

<div class="row -xsmall-bottom -medium-middle -xlarge-top"></div>

Distribution

Apply modifier classes to adjust the space distribution between columns inside of a grid.

-[size]-space-around

-[size]-space-between

Here's an example of adjusting space distribution based on viewport size.

<div class="row -xsmall-space-around"></div>

<div class="row -xsmall-space-between"></div>

<div class="row -xsmall-space-between -medium-space-around"></div>

Ordering (resize your screen)

Apply modifier classes to columns to adjust their position within the grid.

-[size]-first

Column 1
Column 2
Column 3
Column 4
Column 5
Column 6

-[size]-last

Column 1
Column 2
Column 3
Column 4
Column 5
Column 6

-reverse

Column 1
Column 2
Column 3
<div class="row">
  <div class="col-small-4"></div>
  <div class="col-small-4"></div>
  <div class="col-small-4 -small-first"></div>
</div>

<div class="row">
  <div class="col-small-4 -small-last"></div>
  <div class="col-small-4"></div>
  <div class="col-small-4"></div>
</div>

<div class="row -row-reverse"></div>