Skip to content
master
Switch branches/tags
Go to file
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
 
 
 
 

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

About

Atomic CSS Classes for Susy

Resources

License

Releases

No releases published

Packages

No packages published

Languages