A minimal (Sass based) grid system for mobile first responsive design
CSS HTML JavaScript
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.


Minimal Grid v2.0.0

A minimal (Sass / Scss based) grid system for mobile first responsive design

Version 2.0.0 is a complete overhaul using mixins over extends, see the updated docs below.


  • Percentage based (@include grid(50) instead of class="span_6")
  • Mobile screen first breakpoints (from-medium instead of desktop)
  • Sass / Sccs based (no ugly classs in your html)
  • Easy to extend or customise per project


Check out an example

How to install - As a Sass / Scss partial

@import "partials/minimal-grid";

How to use

  1. Open _minimal-grid.scss
  2. Set your breakpoints (pixel values are converted to ems)

    $breakpoint-small:  em(400);
    $breakpoint-medium: em(800);
    $breakpoint-large:  em(1200);
    $breakpoint-xlarge: em(1600);
  3. Write your HTML

    Let's say you have 6 `items to show on a page, you could write some HTML like this:

    <div class="feature">
        <div class="feature__item"> a </div>
        <div class="feature__item"> b </div>
        <div class="feature__item"> c </div>
        <div class="feature__item"> d </div>
        <div class="feature__item"> e </div>
        <div class="feature__item"> f </div>
  4. Write your Sass / Scss

    Lets say you want these items to be 50% on a small screen, 33.33% on a medium screen and then 16.66% on a large screen. You could achive that with minimal-grid and some Scss like this:

    .feature {
        @include grid-container;
        &__item {
            @include grid-item;
            @include grid(50);
            @include breakpoint(from-medium) {
                @include grid(33);
            @include breakpoint(from-large) {
                @include grid(16);
  5. That's it!

This is very much a work in progress & pull requests welcome


  • 2.0.0 : Major refactoring to use mixins over extends, switch to gulp
  • 1.0.1 : Fixed typo in xlarge breakpoint
  • 1.0.0 : Inital Commit


  • MIT License