Output Options

In addition to Output Styles, there are a handful of other options that can apply to your final output.

Grid Direction

Along with Output Styles, the direction of your grid is an important determining factor of your output. Singularity offers a $direction variable that can be set to either 'ltr' for left-to-right, 'rtl' for right-to-left, or 'both' for both left-to-right and right-to-left grids. The default direction on the web is left-to-right, and as such that is our default. For both Float and Isolation Output Styles, if you choose 'rtl' or 'both', a selector [dir="rtl"] & will be written to apply styles when the language is right-to-left. This is done as it is the HTML Standard for determining direction.

Singularity 1.2+ Syntax

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

@include sgs-change('direction', 'ltr');
@include sgs-change('direction', 'both');

Box Sizing: Border Box

We highly highly encourage everyone to use box-sizing: border-box when working with responsive and fluid grids. If you haven't heard of it, Paul Irish has a great writeup on Border Box and why it's simply the bee's knees. We highly encourage you to use the method outlined by Paul in that article, with the following Compass twist:

* {
  @include box-sizing('border-box');
}

If, however, you would prefer not to change your box model for your whole document and still use it for your grids, you can set the global $include-border-box variable to true and all of your Grid Span calls will include it (including any built on top of Grid Span, like the various Output Spans).

Clearfix

To quote Nicholas Gallagher, the clearfix hack is a popular way to contain floats without resorting to using presentational markup. While applying a clearfix once to an element should be sufficient, if you would like to include a clearfix on all of your Grid Span calls, as well as all mixins derived from Grid Span, you can set the global $include-clearfix variable to true. If you would like to include it on its own, simply call the mixin.

#foo {
  @include clearfix;
}

ThecClearfix mixin used in Singularity is the same one used in Toolkit, so the same intelligent determination of which clearfix version to use is available. Also available is a %clearfix element to @extend from, which simply calls the mixin.