Compass responsive

A responsive compass extension to simplify configuring breakpoints and sizing, that allows you to think in pixels but compile in ems or rems.

See my compass-responsive blog post for a full usage tutorial.

What can I use it for?

1. -responsive-unit($size: 50px): a function that converts pixels to ems/rems.
2. @include -responsive-breakpoint(500px) { }: a mixin that generates min-width media queries in ems.
3. @include -responsive-font-size($size: 20px, $breakpoints: (500px, 960px), $scale: (2, 4));: a mixin that allows you to define a font-size suitable for small screens, and then scale the font-size up at defined breakpoints relative to the original definition.

How do I use it?

-responsive-unit()

Takes the following params:

• $base (string): base font-size in pixels
• $unit (string): unit to convert to [em, rem]
• $size (string): pixel value to convert

-responsive-breakpoint()

Takes the following params:

• $size (string): size in pixels

-responsive-font-size()

Takes the following params:

• $base (string): base font-size in pixels
• $unit (string): unit to convert font-size to [em, rem]
• $size (string): font-size in pixels
• $breakpoints (list): list of breakpoints in pixels
• $scale (list): list of font-size scale values for corresponding breakpoints

Installation

To install compass-responsive:

1. Install the gem with bundler gem 'compass-responsive'.
2. Initialise a new compass project with compass create . -r responsive --using responsive.

License

Licensed under MIT by Colin Meinke, 2012.