README.md

Breakup

Breakup is a Sass component that allows you to create multiple CSS files from a
single Sass partial by wrapping your code within breakpoint blocks. It allows
you to abstract what your Sass partials folder looks like from what CSS files
you create. Because of this you can easily create per-breakpoint CSS files (e.g.
base, mobile, tablet and desktop) and fallback files where no styles are wrapped
(e.g. for oldIE which does not support media queries).

The Problem(s)

The current trend towards OOCSS using Sass results in many small partials -- one
per object. This is excellent for readability and reducing mental overhead until
the complication of creating per-media query stylesheets, and oldIE stylesheets
(where media queries are unsupported) appears. The simplest solution is to
create even more partials named for each component's breakpoint (e.g.
_component.scss & _component_wide.scss) but this results in a proliferation of
partials which shall rapidly introduce noise to your partials folder.

Breakup's Solution

Breakup allows you to write a single partial per object. By isolating each
breakpoint's code inside a mixin block your output stylesheets can choose what
blocks should be included within them and whether or not those blocks should
even be wrapped inside a media query (for oldIE stylesheets you can serve the
basic styles and the unwrapped wide styles so oldIE is given the wide view).

Installation

Breakup is compatible with both the origial ruby version of Sass and libsass.
It is available as a rubygem and an npm package. If you don't wish to use either
of these package managers you can also copy
stylesheets/_breakup.scss into your project and
@import it from there, as Breakup is written in pure SCSS and has no external
dependencies.

Then in your component define the blocks and breakpoints that make up your
component. In this example we want the 'basic' block to be output without any
wrappers, but the 'wide' breakpoint shall be wrapped in an @media block.

Stripping Media Queries (for oldIE)

OldIE doesn't understand media queries so we need to not wrap our breakpoints
with an @media block, just output their contents as-is. This is controlled with
$breakup-naked and $breakup-breakpoints-allow-naked. $breakup-naked: true
tells breakup that it should not not wrap breakpoints up.
$breakup-breakpoints-allow-naked is a list of breakpoints that should be
output when $breakup-naked is true. By default this is empty and any
breakpoints not specified shall be not be output, even if they are referenced in
$breakup-included-blocks.

Tweakpoints

Often we want smaller changes to occur at points between our major breakpoints.
Instead of breaks in layout they are minor adjustments --
tweakpoints. This can be accomplished by
wrapping a breakup-media within a breakup-block:

TODO

More usage examples and tests coming soon.

Prior Art

The bulk of this project was conceived prior to learning about
Jacket and
Breakpoint. You could do something pretty
similar by combining the two of them, but I didn't feel like I needed the
extra overhead.