Superclean, powerful, responsive, Sass-based, BEM-syntax CSS grid system

View on Github Quickstart CSS (21kb)



Why use Avalanche?

Code quality

Easy, flexible naming convention

Avalanche gives you a choice of three naming conventions for your width class names: fraction (1/4), percentage (25) or fragment (1-of-4). No need to spend time working out how many columns are in your nested layout - if a cell needs to take up half the width of it's container, tell it to!

Only create the classes you'll actually use

You tell Avalanche which widths you require and it'll create just those ones for you, keeping your compiled CSS lean and free from bloat classes you'll never use. If you need just halves, thirds and quarters then tell Avalanche to only use those. If you need all the way from one to 12 columns, Avalanche can handle that too.

Efficient CSS selectors

When compiling your width classes, Avalanche checks for duplicate widths and bundles together matching selectors meaning that your width classes are as efficient as possible. No bloat here.

No floats

Avalanche utilises inline-block to create flexible grid layouts that aren't hindered by always being anchored to the left- or right-hand edge. Align your grids left, right, top, middle, bottom and back-to-front (yep, really!) with just a single class on the grid container.

Responsive

Real-world breakpoints

Based on the dimensions of popular mobile devices, Avalanche's breakpoints target real-world values for shifting content. No snapping from desktop to hamburger menu at 1024px.

Add or remove breakpoints with one line of code

As with its width classes, Avalanche's breakpoints are pre-defined - by you - for greater control and efficiency. If you need a new breakpoint, simply add an alias and a value to the settings and Avalanche will do the rest.

Simple, connected media query naming

Avalanche includes a simple media query mixin for use within your stylesheets. Use the same breakpoint alias as your width classes to target specific device widths in an easy-to-understand way. No need to remember to add a pixel onto your min-width values.

Infinitely nestable

Nest as many grids within each other as you like without issue. No padding nightmares or calcuating how many columns equals a quarter of a '6-of-12' column here. Right-aligned grid inside a center-aligned grid? No problem!

Demo

Regular grid layout .grid
.1/2
.1/2
.1/3
.2/3
.1/4
.1/2
.1/4

Responsive modifier width classes
.1/4   .1/2--desk
.1/4   .1/2--desk
.1/2   .1/3--desk
.1/2--lap   1/3--desk
.1/2--lap   1/3--desk

Horizontally centered grid .grid--center
.1/3
.1/3

Centered grid cell .grid__cell--center
.1/3
.1/3
.1/3
.1/2
This cell is within the same container as the others but is centered by itself

Right-aligned grid .grid--right
.1/3
.1/3

Gutterless grid .grid--flush
.1/4
.3/4

Vertically centered grid .grid--middle
.1/3
.1/3
.1/3

Vertically bottom-aligned grid .grid--bottom
.1/4
.1/4
.1/4
.1/4

Grid with cells of undefined width .grid--auto
Cells in an auto grid
have a flexible width
meaning they have an unspecified width
dependant on their content

Grid with cells displayed in opposite of source order .grid--rev
First in source order
Second in source order

Installation

  1. Import _avalanche.scss to your project via Bower, NPM or manually copying to vendor folder (@import "vendor/avalanche")
  2. Override settings to fit your requirements or use the defaults
  3. Compile!

NPM

npm install --save avalanche-css

Bower

bower install --save avalanche-css

Settings

Grid namespace
Global prefix for layout and cell class names. 		$av-namespace: 'grid';
Element name
Element (in a BEM context) or grid cell name. 		$av-element-name: 'cell';
Element class chain
Chain characters/separator between BEM block and element. 		$av-element-class-chain: '__';
Modifier class chain
Chain characters/separator between BEM block and modifier. 		$av-modifier-class-chain: '--';
Breakpoint class chain
Chain characters/separator between width class and breakpoint. 		$av-breakpoint-class-chain: '--';
Grid gutter
Gutter width between cells. 		$av-gutter: 20px;
Width class namespace
Prefix for width class names. 		$av-width-class-namespace: '';
Width class naming style
Naming style of width classes. Options: fraction (1/2, 3/4 etc), percentage (25, 50 etc), fragment (1-of-3, 4-of-5 etc). 		$av-width-class-style: 'fraction';
N.B. If using percentage then $av-width-class-namespace above cannot be null. Avalanche escapes leading integers for fraction and fragment naming styles but this isn't possible with percentage style as Sass attempts to escape the whole number (e.g. 50 instead of just 5 or 30 instead of just 3) so fails.
Widths required
Sass list of width denominator values (when expressed as a fraction). For example, 2 produces 1/2 width class, 3 produces 1/3 and 2/3 width classes etc. 
$av-widths: (
  2,
  3,
  4
);
N.B. This setting has a large impact on the size of your compiled CSS. Avoid bloat by inputting just the numbers you'll use.
Responsive?
Enable/disable the inclusion of responsive width classes. With this enabled, class names (for denominators set above) will be created for each of your breakpoint aliases (set below). 		$av-enable-responsive: true;
Breakpoints
Sass map of responsive breakpoint aliases and associated media queries (in key-value pairs). 
$av-breakpoints:  (
  "thumb":        "screen and (max-width: 499px)",
  "palm":         "screen and (min-width: 500px) and (max-width: 800px)",
  "palm-and-up":  "screen and (min-width: 500px)",
  "pocket":       "screen and (max-width: 800px)",
  "lap":          "screen and (min-width: 801px) and (max-width: 1024px)",
  "lap-and-up":   "screen and (min-width: 801px)",
  "portable":     "screen and (max-width: 1024px)",
  "desk":         "screen and (min-width: 1025px)",
  "wide":         "screen and (min-width: 1160px)",
  "retina":       "(-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi)"
);
N.B. This setting has a large impact on the size of your compiled CSS. Avoid bloat by inputting just the breakpoints you'll use.

Grid layouts

Centered grid
All cells are horizontally centered within the container. 		$av-enable-grid-center: false;
Centered cell
Center an individual grid cell within the container.
N.B. Class should be applied to an individual cell, not the grid container. For example; <div class="grid__cell grid__cell--center">. 		$av-enable-grid-cell-center: false;
Right-aligned grid
All cells are horizontally aligned to the right within the container. 		$av-enable-grid-right: false;
Vertically centered grid
All cells are vertically centered within in the container. 		$av-enable-grid-middle: false;
Vertically bottom-aligned grid
All cells are vertically aligned to the bottom of the container. 		$av-enable-grid-bottom: false;
Gutterless grid
Gutters removed between cells. 		$av-enable-grid-flush: false;
'Tiny' grid gutters
Gutters between cells set to a quarter of the global gutter value. Default: 5px. 		$av-enable-grid-tiny: false;
'Small' grid gutters
Gutters between cells set to half of the global gutter value. Default: 10px. 		$av-enable-grid-small: false;
'Large' grid gutters
Gutters between cells set to double the global gutter value. Default: 40px. 		$av-enable-grid-large: false;
'Huge' grid gutters
Gutters between cells set to quadruple the global gutter value. Default: 80px. 		$av-enable-grid-huge: false;
Grid with cells of undefined width
All cells take up an unspecified width set by their content. 		$av-enable-grid-auto: false;
Grid with cells displayed in opposite of source order
Grid cells are displayed in the opposite of their source order. 		$av-enable-grid-rev: false;

Media query mixin

Avalanche includes a media query mixin that makes use of the breakpoint aliases you set. This enables better coupling between your grid and other responsive content items. Usage as follows.

@include av-mq(pocket){
  .content-item{
    /* responsive CSS */
  }
}

Browser support

All modern browsers are supported and Internet Explorer from IE9 upwards. If IE8 support is required then all that is needed is a pixel-value to be set for font-size on .grid__cell. This is due to IE8 not supporting rem units. Use of autoprefixer is recommended which will handle this for you automatically.