Girder

Field Guide

Using Girder CSS

Here's a quick reference for using the Sass features of Girder and some examples for using it with plain ol' CSS.

Quick Setup

Copy the Scss folder and files directly into your project's path. Get them from Github or from the downloaded examples.

With Bower just use: "bower install girder --save" and add a reference to either scss/_girder.scss or girder.css inside the components folder.

Using Scss

@import the _girder.scss partial which should reside next to its modules in your project.

Standard CSS

Simply include girder.css in your document along with the site's styles. (Like in this page).

Quick Reference

Layout units
With CSS
With Scss
Half (50%)
class="unit half"
@include unit(half);
Third (33.333%)
class="unit third"
@include unit(third);
Fourth (25%)
class="unit fourth"
@include unit(fourth);
Fifth (20%)
class="unit fifth"
@include unit(fifth);
Sixth (16.6666%)
class="unit sixth"
@include unit(sixth);
Two-Thirds
class="unit two-thirds"
@include unit(two-thirds);
Three-Fourths
class="unit three-fourths"
@include unit(three-fourths);
Three-Fifths
class="unit three-fifths"
@include unit(three-fifths);
Four-Fifths
class="unit four-fifths"
@include unit(four-fifths);
Five-Sixths
class="unit five-sixths"
@include unit(five-sixths);
Golden Ratio Small (38.2716%)
class="unit golden-small"
@include unit(golden-small);
Golden Ratio Large (61.7283%)
class="unit golden-large"
@include unit(golden-large);
Whole (100%)
class="row"
@include unit();

The .row class is useful for containing and clearing Girder units. Its very rare to use 'whole' in Sass but it is possible (ie. in media queries).

Helpers
With CSS
With Scss
Media Queries
Standard syntax.
@include media-query($medium-screens){}

Simple min-width media queries within selectors. You can also pass 'max-width' as the second value or two numbers for min-max.

Variable Gutters
unavailable
$gutters or $gutters /2

Useful in Sass for re-using gutter values and matching spacing between elements.

No-Gutters
class="no-gutters"
@include unit(third, false);

Adding this class to a row removes gutters for all containing units. In Sass you can pass "false" to the unit mixin to remove gutters for specific elements.

Rows
class="row"
Optional & configurable @extend %row;
Equal Units
class="equal-units"
Optional: @extend %equal-units;

This applies equal spacing for all units within a given .row. It adds left and right padding but makes them more symmetrical.

Responsive Units
Manual Media Queries.
@include responsive-unit(third, true);

Define (or re-shape) units within media queries. This mixin excludes $gutter padding by default, override this by specifying 'true'.

Baseline Grid Display
Not applicable.
main {@include baseline-grid();}

More info coming soon.

CSS Prefixes
Not applicable.
@include prefix(border-radius, 3px);

Generate browser prefixes for simple properties. For a more robust solution I'd recommend auto-prefixing during builds.

Flexbox
Not applicable.
@include flexbox; or @include flex(2, 1);

More info coming soon...

em and rem Calculators
Unavailable
emCalc(20px);
remCalc(15px);

Pass a pixel value and get the em / rem equivalent, simple as that. You can use this anywhere in your styles like: margin: $gutters emCalc(24px);