Output Styles

Sam Richard edited this page Feb 21, 2016 · 6 revisions

While the heart of a grid system is the width calculation, that number is not as useful as one may hope in pure CSS. In order to actually align items to our grid, we need to have that width calculation output somehow. In Singularity, the "how do we use this" question is answered by Output Styles. Currently, Singularity ships with two output styles, the traditional Float style and newer Isolation style. The Output Styles system is designed to be flexible and extensible, so when Flexbox shows up at our doorstep, or CSS Grids for that matter, we expect to be able to add those Output Styles in and allow you to continue to use Singularity as you always have.

In the same way that we use $grids and $gutters to set their global context, we use $output to set the global Output Style context. The default Output Style is Isolation. Switching between Output Styles is as easy as setting either $output: 'float'; or $output: 'isolation';.

Singularity 1.2+ Syntax

// All global variables are now set with the 'sgs-change' mixin.

@include sgs-change('output', 'float');
@include sgs-change('output', 'isolation');


The Isolation method is based on the method proposed by John Albin Wilkins in Responsive Design's Dirty Little Secret. It uses both the number of columns you'd like to span and what column you start at to isolate an element in place along your grid, then applying float clears builds rows. The advantage to this method is two fold; first and foremost, it helps to seriously reduce visual inconsistency produced by percentage rounding errors common in many browsers (most prominently, Desktop Safari and mobile Webkit browsers), and secondarily, it combines both positioning and sizing, mostly eliminating the need to use traditional push and pull functions.


The Float method is based on a version of basic CSS Layouts, extended to make it work nicely as a semantic grid. When using Float, it's easiest to think about applying grid items by walking across a row, with traditional pull and push functions available to move items around the grid when they don't naturally line up.

You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.
Press h to open a hovercard with more details.