Output Styles

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');

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.

Float

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.