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.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
bricks
.gitignore
LICENSE.md
README.md
package.json

README.md

Susy Bricks

Atomic CSS Classes for Susy http://susy.oddbird.net/

About

Susy Bricks is a SCSS module for Susy http://susy.oddbird.net/ that creates responsive, atomic CSS for Susy's grid system to make rapid prototyping easy.

Credit

The prefix mixin comes from Buzzfeed's SOLID http://solid.buzzfeed.com/

Installation

npm install susybricks

or if you'd like to just grab the repo

git clone git@github.com:seanblanton/susybricks.git

Usage

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.

Example:

$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,
);

Authors

Sean Blanton


MIT license