Foxgrid

Grids are used for creating page layouts, and Foxgrid works very similarly to the standard float grid, but takes advantage of some feature only possible with flexbox (Flexbox support).
Foxgrid was built in SCSS and the grid follows some rules to work properly:

Rows must be placed within a .container for proper alignment, or just add the class .no-gutter-row to remove the negative margin
Use rows to wrap columns (they're the ones with display: flex)

And has the following options fully customizable:

Columns

12 columns by default

$grid-columns: 12 !default;

Breakpoints

6 mobile first breakpoints

$breakpoints: (
    xxs: '', // default
    xs: '640px',
    sm: '768px',
    md: '992px',
    lg: '1200px',
    xl: '1600px'
);

Which can be used with the following media queries:

/* Extra extra small devices (less than 640px)
No media query since this is the default */

// extra small devices (640+ px)
@media (min-width: map-get($breakpoints, xs) { ... }

// small devices (tablet in portrait, 768+ px)
@media (min-width: map-get($breakpoints, sm) { ... }

// medium devices (small desktops, tablet in landscape, 992+ px)
@media (min-width: map-get($breakpoints, md) { ... }

// large devices (desktops, laptops, 1200+ px)
@media (min-width: map-get($breakpoints, lg) { ... }

// extra large devices (large desktops, 1600+ px)
@media (min-width: map-get($breakpoints, xl) { ... }

Gutter per breakpoint

Custom gutter for each breakpoint

$gutter-map: (
    xxs: 10,
    xs:  10,
    sm:  30,
    md:  30,
    lg:  30,
    xl:  30
);

and a set of helper variables for standalone usage

$gutter-xxs: map-get($gutter-map, xxs);
$gutter-xs:  map-get($gutter-map, xs);
$gutter-sm:  map-get($gutter-map, sm);
$gutter-md:  map-get($gutter-map, md);
$gutter-lg:  map-get($gutter-map, lg);
$gutter-xl:  map-get($gutter-map, xl);

Grid system

Columns wrapping
If more than $grid-columns columns are placed within a single row, they'll wrap onto a new line, as long as they have defined widths.

col-12

col-1

col-11

col-2

col-10

col-3

col-9

col-4

col-8

col-5

col-7

col-6

No gutter
Add .no-gutter to the .row to remove the gutter between columns.

col-12

col-1

col-11

col-2

col-10

col-3

col-9

col-4

col-8

col-5

col-7

col-6

Fluid

Percent based widths
Add sizing classes to control individual columns.

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

col-6

col-4

Auto widths
Add .col-auto and columns naturally space themselves equaly to fit the row.

<div class="row">
    <div class="col-auto"></div>
    <div class="col-auto"></div>
    <div class="col-auto"></div>
    <div class="col-auto"></div>
</div>

<div class="row">
    <div class="col-auto"></div>
    <div class="col-auto"></div>
    <div class="col-auto"></div>
    <div class="col-auto"></div>
    <div class="col-auto"></div>
    <div class="col-auto"></div>
</div>

col-auto

Mixed sizing
Add a sizing class to the desired column and add .col-auto to the remainders, in order to fill the row with naturally spaced columns.

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

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

<div class="row">
    <div class="col-auto"></div>
    <div class="col-auto"></div>
    <div class="col-auto"></div>
    <div class="col-8"></div>
</div>

col-6

col-auto

col-6

col-auto

col-8

Nesting columns

Rows and columns are infinitely nestable inside other columns.

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

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

col-8

col-4

col-6

Offseting columns

Add .col-{$breakpoint}-offset-* to the desired columns to offset them.

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

<div class="row">
    <div class="col-offset-2 col-3"></div>
    <div class="col-3"></div>
    <div class="col-offset-1 col-3"></div>
</div>

<div class="row">
    <div class="col-4"></div>
    <div class="col-offset-4 col-4"></div>
</div>

col-6

col-3

col-4

Building semantically

Rows
Use grid-row() mixin to define a row.

Columns
Use grid-column(*) mixin to create columns.

.main {
    @include grid-row();

    .content {
        @include grid-column(6);
    }
}

<div class="main">
    <div class="content"></div>
    <div class="content"></div>
</div>

content

Control gutters
To remove gutters, simple add false parameter to either grid-row(false) and grid-column(*, false).

.main {
    @include grid-row(false);

    .content {
        @include grid-column(6, false);
    }
}

<div class="main">
    <div class="content"></div>
    <div class="content"></div>
</div>

content

Control columns count
To define a grid with a different number of columns, just define grid-column(* of *).

.main {
    @include grid-row();

    .content {
        @include grid-column(1 of 15);
    }
}

<div class="main">
    <div class="content"></div>
    <div class="content"></div>
    <div class="content"></div>
    <div class="content"></div>
    <div class="content"></div>
    <div class="content"></div>
    <div class="content"></div>
    <div class="content"></div>
    <div class="content"></div>
    <div class="content"></div>
    <div class="content"></div>
    <div class="content"></div>
    <div class="content"></div>
    <div class="content"></div>
    <div class="content"></div>
</div>

content

Columns direction

Reverse

Add .reverse to the .row to invert the order of the columns.

<div class="row reverse">
    <div class="col-2"> 1 </div>
    <div class="col-2"> 2 </div>
    <div class="col-2"> 3 </div>
    <div class="col-2"> 4 </div>
    <div class="col-2"> 5 </div>
    <div class="col-2"> 6 </div>
</div>

Vertical

Add .vertical to the .row to display the columns in a vertical flow.

<div class="row vertical">
    <div class="col-4"> 1 </div>
    <div class="col-4"> 2 </div>
    <div class="col-4"> 3 </div>
    <div class="col-4"> 4 </div>
    <div class="col-4"> 5 </div>
    <div class="col-4"> 6 </div>
</div>

Vertical reverse

Add .vertical-reverse to the .row to display the columns in a reversed vertical flow.

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

Reorder columns

First

Add .col-{$breakpoint}-first to easily make the desired column the first. Applies to both horizontal or vertical directions.

<div class="row">
    <div class="col-2"> 1 </div>
    <div class="col-2"> 2 </div>
    <div class="col-2"> 3 </div>
    <div class="col-2"> 4 </div>
    <div class="col-2"> 5 </div>
    <div class="col-2 col-first"> 6 </div>
</div>

Last

Add .col-{$breakpoint}-last to easily make the desired column the last (if nor other column has order specified). Applies to either horizontal or vertical directions.

<div class="row">
    <div class="col-2 col-last"> 1 </div>
    <div class="col-2"> 2 </div>
    <div class="col-2"> 3 </div>
    <div class="col-2"> 4 </div>
    <div class="col-2"> 5 </div>
    <div class="col-2"> 6 </div>
</div>

Items alignment

If you want the text to follow the alignment, simply add .align-text to the horizontal alignment class.

Start

Add .align-start-{$breakpoint} to the .row to align the columns to the start.

<div class="row align-start-sm align-text">
    <div class="col-6"></div>
</div>

<div class="row align-start-sm align-text">
    <div class="col-2"></div>
    <div class="col-2"></div>
    <div class="col-2"></div>
</div>

col-6

col-2

Center

Add .align-center-{$breakpoint} to the .row to align the columns to the center.

<div class="row align-center-sm align-text">
    <div class="col-6"></div>
</div>

<div class="row align-center-sm align-text">
    <div class="col-2"></div>
    <div class="col-2"></div>
    <div class="col-2"></div>
</div>

col-6

col-2

End

Add .align-end-{$breakpoint} to the .row to align the columns to the end.

<div class="row align-end-sm align-text">
    <div class="col-6"></div>
</div>

<div class="row align-end-sm align-text">
    <div class="col-2"></div>
    <div class="col-2"></div>
    <div class="col-2"></div>
</div>

col-6

col-2

Top

Add .align-top-{$breakpoint} to the .row to align the columns to the end.

<div class="row align-top-sm">
    <div class="col-6">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </div>
    <div class="col-6">
        col-6
    </div>
</div>

col-6

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

col-6

Middle

Add .align-middle-{$breakpoint} to the .row to align the columns to the end.

<div class="row align-middle-sm">
    <div class="col-6">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </div>
    <div class="col-6">
        col-6
    </div>
</div>

col-6

Bottom

Add .align-bottom-{$breakpoint} to the .row to align the columns to the end.

<div class="row align-bottom-sm">
    <div class="col-6">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </div>
    <div class="col-6">
        col-6
    </div>
</div>

col-6

Stretch

Add .stretch-{$breakpoint} to the .row to apply the same height to all columns.

<div class="row stretch">
    <div class="col-3">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </div>
    <div class="col-3">
        col-3
    </div>
    <div class="col-3">
        col-3
    </div>
    <div class="col-3">
        col-3
    </div>
</div>

col-3

Self alignment and stretch

Add .align-self-[alignment]-{$breakpoint} to the desired columns to align them indivudually or .self-stretch-{$breakpoint} to stretch them individually.

<div class="row">
    <div class="col-2">
        col-2
    </div>
    <div class="col-2">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
        consequat.
    </div>
    <div class="col-2 align-self-start-sm">
        col-2
    </div>
    <div class="col-2 align-self-middle-sm">
        col-2
    </div>
    <div class="col-2 align-self-bottom-sm">
        col-2
    </div>
    <div class="col-2 self-stretch-sm">
        col-2
    </div>
</div>

col-2

Distribution

Space around

Add .space-around-{$breakpoint} to the .row to distribute the columns with equal space around them.

<div class="row space-around-sm">
    <div class="col-2"></div>
    <div class="col-2"></div>
    <div class="col-2"></div>
</div>

col-2

Space between

Add .space-between-{$breakpoint} to the .row to distribute the columns evenly: first item is on the start of the row, last item on the end of the row.

<div class="row space-between-sm">
    <div class="col-2"></div>
    <div class="col-2"></div>
    <div class="col-2"></div>
</div>

col-2

Table of contents

Foxgrid

Columns

Breakpoints

Gutter per breakpoint

Grid system

Fluid

Nesting columns

Offseting columns

Building semantically

Columns direction

Reverse

Vertical

Vertical reverse

Reorder columns

First

Last

Items alignment

Start

Center

End

Top

Middle

Bottom

Stretch

Self alignment and stretch

Distribution

Space around

Space between