Sass powered responsive grid system

Introduction

Grid units are defined by a minimum ideal width and a maximum number.
The total number of units is increased dynamically based on the viewport size.
Column widths, margins and breakpoints are specified in grid units.


Documentation & Examples

Using a unit width of 75px, a limit of 12 units, 10px gutters and 20px page margins.
All of these variables can be customised, see the Options section below.

Auto Grid

Quickly create a grid where items have a minimum unit width. Breakpoints are added for each multiple of the column size. Between breakpoints items remain flexible.

.grid {
    @include ayre-grid(3); // At grid sizes 6, 9 and 12 set items to 3 units wide
}

Custom Grid

Specfiy the exact grid you want, customsing the grid sizes and column widths manually.

.grid {
    @include ayre-grid((
        6:  3, // At grid size 6 set items to 3 units wide 
        12: 4, // At grid size 12 set items to 4 units wide 
    ));
}

Auto Grid with Custom Sizes

Tweak an auto grid by adding additional grid size rules. The media queries for these rules are added after the auto media queries.

.grid {
    @include ayre-grid(3, (
        12: 2, // At grid size 12 set items to 2 units wide, instead of 3
    ));
}

Nested Grids

Use the unit size of keyword to tell Ayre when a grid is nested inside an element that's not the full viewport width.

.grid-a {
    @include ayre-grid((
        12: 6,      // At grid size 12 set items to 6 units wide 
    ));
}
.grid-b {
    @include ayre-grid((
        6:  3,      // At grid size 6 set items to 3 units wide 
        9:  3,      // At grid size 9 set items to 3 units wide 
        12: 3 of 6, // At grid size 12 set items to 3 units wide, of the 6 units available
    ));
}

Selectors

Use selectors to target specfic items within your grid. Any selector that can be combined with the Sass & operator is supported.

.grid {
    @include ayre-grid((
        12: (                      // At grid size 12:
            null:               1, // Set items to 1 unit wide
            ':nth-child(4n+1)': 2, // Set the first of every four items to 2 units wide
            '.item-a':          4, // Set items with class item-a to 4 units wide
            '[data-item=a]':    5, // Set items with attribute data-items="a" to 5 units wide
        ),
    ));
}

Gutters

Customise gutter sizes for a specific grid. The grid will still follow the global breakpoints.

.grid {
    @include ayre-grid(3, null, 50px 10px); // Set custom 50px X axis gutters and 10px Y axis gutters
}

Margins

Add left and right margins in addition to the column width. Just like widths, margins are measured in grid units.

.grid {
    @include ayre-grid((
        12: (                       // At grid size 12:
            ':nth-child(1)': 4 1 7, // Set 1st item to 4 units wide with 1 unit left margin and 7 unit right margin
            ':nth-child(2)': 4 3 5, // Set 2nd item to 4 units wide with 3 unit left margin and 5 unit right margin
            ':nth-child(3)': 4 5 3, // Set 3rd item to 4 units wide with 5 unit left margin and 3 unit right margin
            ':nth-child(4)': 4 7 1, // Set 4th item to 4 units wide with 7 unit left margin and 1 unit right margin
        ),
    ));
}

Alignment

Use the vertical-align and text-align properties to align items. By default items are aligned to the top.

.grid {
    @include ayre-grid(4);
    > * {
        vertical-align: middle; // Vertically align items in the middle
    }
}

Real Values

Specify item widths and margins in real values, such as percentages and pixels. Grid sizes can only be specified in units.

.grid {
    @include ayre-grid((
        12: 20%, // At grid size 12 set items to 20% wide
    )); 
}

Maximum Grid Size

Set an upper limit on a grid size. By default media queries have no maximum width.

.grid {
    @include ayre-grid((
        6 to 9: 3, // At grid size 6 set items to 3 units wide, stop after grid size 9
    ));
}

Replace Auto Grid Size

Replace an auto grid size with custom unit sizes rather than appending an additional grid size.

.grid {
    @include ayre-grid(3, (
        12 auto: 2, // At grid size 12 set items to 2 units wide, replacing the auto grid size 12
    ));
}

Remove Auto Grid Size

Remove an auto grid size entirely.

.grid {
    @include ayre-grid(3, (
        12 auto: null, // Remove the auto grid size 12
    ));
}

Font Size

Ayre uses font-size: 0 to remove whitespace between the inline-block items, therefore font-size needs to be reset on the items. By default the $ayre-font-size option is used, but you can also set a custom size for specifc grids.

.grid {
    @include ayre-grid(3, null, null, 20px); // Set custom 20px font size on items
}

Roll Your Own

Write your own selectors and media queries for grid items.

.grid {
    @include ayre-grid(); // Set up the basic grid properties but don't set any item widths or margins
    > * {
        // All four of these methods are equivalent (in these examples):
        @media screen and (min-width: 1050px) {
            width: 41.66666667%;
            margin-right: 8.33333333%;
        }
        @media screen and (min-width: 1050px) {
            width: ayre-span-length(12, 5);
            margin-right: ayre-span-length(12, 1);
        }
        @include ayre-media(12) {
            width: ayre-span-length(12, 5);
            margin-right: ayre-span-length(12, 1);
        }
        @include ayre-span((
            12: 5 0 1,
        ));
    }
}

Options & Defaults

Specify these options before importing the Ayre Sass file.
Values below are the defaults.

$ayre-unit:      100px; // Minimum ideal grid unit width
$ayre-limit:     12;    // Maximum number of grid units
$ayre-gutters:   0;     // Gutter size (accepts seperate X and Y values as: "20px 10px")
$ayre-extra:     0;     // Extra width to add when calculating media queries (eg. page margins)
$ayre-font-size: 1rem;  // Default font size to reset grid items to

Download & Installation

Instructions on GitHub
Fork me on GitHub