Atomic CSS Classes for Susy
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.

Susy Bricks

Atomic CSS Classes for Susy


Susy Bricks is a SCSS module for Susy that creates responsive, atomic CSS for Susy's grid system to make rapid prototyping easy.


The prefix mixin comes from Buzzfeed's SOLID


npm install susybricks

or if you'd like to just grab the repo

git clone


Import the module

@import "bricks/bricks";

Use the prefixes .xs, .sm, .md, and .lg in conjunction with susy's layout commands to quickly adjust layout. Susy Bricks supports 4 different Susy commands: Span(), Last, Push, and Pull

<div class="box xs-span12 md-span6 lg-span3"> 

Update /lib/settings.scss to adjust the number of columns to fit your Susy layout and $breakpoints to meet your content needs. You can extend the number of columns and breakpoints as you see fit.


$susy-columns: 16; // Number of columns in susy grid

$breakpoints: (
  'xs': null, // always leave this at NULL
  'sm': 40rem, 
  'md': 64rem,
  'lg': 85rem,
  'xlg': 95rem,


Sean Blanton

MIT license