The (g)root of all projects
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.


The (g)root of all projects -

Groot is a class-based declarative CSS Grid system, originally derived from the amazing work Nicolas Gallagher produced with Griddle. I've been using Griddle for many years professionally and whilst I love the overall package, its not perfect and could do with a upgrade. I've started Groot with the intention of being that.

Groot prides itself on the following:

  • Declarative: Opt-in, breakpoint specific classes for column sizings means you're in control. Gone are the days of all grids adhering to the same column sizes.
  • Modular: Defaults to a BEM structured Grid System and keeps the Single Responsibility Principle in mind at all times.
  • Lightweight: Don't worry about bloated code, only the code you need for your project is created. You're looking at ~4KB gzipped.
  • Configurable: Ability to change any class names, gutter sizes or alignment defaults to your hearts desire. Prefer SMACSS or OOCSS? Don't sweat it.


Groot is available through a number of package managers. Alternatively, you can always download/clone the project manually via Github.

npm install --save-dev groot-sass
bower install --save groot-sass


As this is a Sass based grid system, you’ll need to import the package using Sass’ @import function and then use the included mixin to setup your grid by using the @include function.

@import "/path/to/groot";
@include groot($columns, $extension);

The mixin takes two parameters:

  • $columns: A space-separated list of integers, each of which results in the build of that particular grid.
  • $extension: The suffix for the class. This is optional and is intended when you're setting up a Groot instance within a Media Query.

So, lets say we're creating 2 and 3 column grids. Here's what that would look like:

@import "/path/to/groot";
@include groot(2 3);

which will output the following classes to use in your HTML (assuming default configuration has been used, see next section for more info)...

.grid__item--1-2 {}
.grid__item--2-2 {}
.grid__item--1-3 {}
.grid__item--2-3 {}
.grid__item--3-3 {}

If we then wanted these classes (read: these column sizes) to only be useable at a certain breakpoints, we can start to utilise the $extension suffix within a Media Query. Like so:

$bp3: 50em;

@import "/path/to/groot";

@media screen and (min-width: $bp3) {
    @include groot(2 3, 'bp3');

which will output the following classes to use in your HTML (again assuming default configuration)...

@media screen and (min-width: 50em) {


One of the main benefits of Groot is that you can tailor it to your needs. While Groot may have defaults for the configuration, you still have a lot of freedom to change these as you see fit.

Each of the variables should be declared above the import of Groot like so.

// Override default config here

@import "/path/to/groot";
@include groot($columns, $extension);

Available options and defaults:

Below is a list of all the configuration that comes baked into Groot. Don't like BEM? That's fine, go ahead and change it to whatevers hip and cool at the minute.

// Core
$gr-grid: "grid" !default;                           // Main grid container which holds all elements
$gr-item: "grid__item" !default;                     // Individual grid item/cell/unit/whatever you want to call it.
$gr-item-unit: "grid__item" !default;                // The class chained onto the same element as above which controls the sizing.

// Modifiers
$gr-grid-spaced: "grid--spaced" !default;            // Increase gutter size
$gr-grid-compact: "grid--compact" !default;          // Remove all gutters
$gr-grid-reversed: "grid--reversed" !default;        // Reverse direction of the grid. i.e. direction: rtl;
$gr-grid-centered: "grid--centered" !default;        // Centers the entire Grid, which grid items will inherit.
$gr-item-centered: "grid__item--centered" !default;  // Center an individual item, rather than all items.

// Sizing
$gr-gutter: 1em !default;                            // The size between each grid item. Can use any CSS unit of measurement.

// Grid Alignment
$gr-grid-direction: inherit !default;                // Initial direction of the $gr-grid
$gr-grid-align-x: inherit !default;                  // Initial horizontal alignment of the $gr-grid.

// Item Alignment
$gr-item-direction: inherit !default;                // Initial direction of the $gr-item
$gr-item-align-x: inherit !default;                  // Initial horizontal alignment of the $gr-item
$gr-item-align-y: top !default;                      // Initial vertical alignment of the $gr-item


Groot comes with a few handy modifiers straight out of the box.

 * List of modifiers
 * Remember that these show the default class names which can
 * be changed by reading the above section on Configuration.

.grid--spaced            // Double the gutter width between grid items
.grid--compact           // Remove the gutters between grid items
.grid--reversed          // Add this to the container grid to reverse direction of it.
.grid--centered          // Add this to the containing grid centers it and anything within (through CSS inheritance).
.grid__item--centered    // Adding this to a grid item centers only it, rather than all items.


An accompanying website has been created to demonstrate Groot's capabilities and will eventually provide video tutorials on how to utilise Groot to its full capacity. For now, take a look at its source code.


Groot has been tried and tested within the latest browsers, but also works great for those older versions of IE that you may still need to support (I feel your struggle). Here's a full list of the browser/device combinations that Groot has been verified in. If you feel theres a problem with any of these, please open an issue and we'll try to resolve it together.

Desktop Mobile
Chrome iOS7+
Firefox Andriod 4.3+
Safari Windows Phone

Whilst Groot does support IE8, there are caveats. IE8 doesn't support media queries and therefore you'll need to make sure you use something like respond.js. However, I'd recommend if you need IE8 support that you give Jake Archibold's Media Query Mixin a read. Its great!


Here's a quick roadmap on where I'd like to take Groot in the coming months.

  • Screencasts: Showing detailed examples on how you can use Groot in your projects.
  • LESS/Stylus support: Because not everyone uses Sass, right?


With any project, theres always special thanks and recognition to be given:

  • Griddle: The inspriation for Groot.
  • Mixd: Who introduced me to Griddle in the first place. If – like us – you work with WordPress then you may be interested in our Open Source project called wp-deploy; a capistrano-powered deployment tool for WordPress.


Apache License 2.0.

Copyright (c) 2016 Luke Whitehouse,