Colour Garden, the brainchild of front-end web developer Tom Hare, from Cambridge, England, has released Avalanche, a CSS grid system that’s responsive, SASS-based, extremely clean and powerful. Sounds too good to be true? We look at it in more depth.
For a grid system to be well-received, it must have many benefits, and Avalanche promises plenty. They include:
A flexible naming convention
Your width class names now come with three naming conventions: fraction (1/4), percentage (25) and fragment (1-of-4). This means you won’t need to bother with working out exactly how many columns sit in your nested layout. If your cell needs to occupy 50% of its container, simply tell it to, and be done with it.
Just the classes designers use
Just instruct Avalanche to use the widths you need, and it’ll create exactly those for you. This will keep your compiled CSS both lean and free from bloat classes that you won’t use or need. Should you require only halves, thirds or quarters, then tell Avalanche to utilize just those. Should you need up to 12 columns, Avalanche can take care of that as well.
Effective CSS selectors
Avalanche checks for duplicate widths and then bundles together matching selectors, when you compile width classes. Again, this equals efficiency and no bloat.
No floats
Avalanche relies on inline-block to create flexible grid layouts that won’t be impeded by being constantly attached to the left- or right-hand edge. On the grid container, designers can now align grids in different ways with only a single class.
Real-world breakpoints
This feature is based on the dimensions of popular mobile devices. Avalanche’s breakpoints target real-world values to shift content. This means you won’t need to bother with going from desktop to a hamburger menu at 1024 px.
Single line of code to add & remove breakpoints
Like its width classes, Avalanche’s breakpoints can be pre-defined by designers and developers. This gives overall better control and efficiency. When you require a new breakpoint, just add an alias and value to the settings. Then sit back as Avalanche takes over.
Straightforward media query naming
There’s a simple media query mixin to use within your stylesheets. Utilize the same breakpoint alias as your width class to target exact device widths in a comprehensible way. There’s no more need to remember to add a pixel onto one’s min-width values.
Always nestable
Designers have the option to nest as many grids within each other with no fuss. You won’t find padding issues or any headaches related to calculations about how many columns equal a quarter of a 6-of-12 column, for instance.
It’s available right now on Github. Installation is simple, too. Just follow these steps:
- Copy _avalanche.scss into your project (vendor folder advised @include “vendor/avalanche”)
- Override the settings to adjust for your requirements, or use defaults
- Compile
Finally, all modern browsers are supported, as well as Internet Explorer from IE9 and on.
