cornerstone.scss

Core

Normalize core/_normalize.scss

Nicolas Gallagher's Normalize.css. A modern, HTML5-ready alternative to CSS reset, it makes browsers render all elements more consistently and in line with modern standards. It precisely targets only the styles that need normalizing.

Functions core/_functions.scss

SASS functions, mainly used in writing SASS commands rather than actually styles directly.

strip-units(value)

returns any value stripped of its units, e.g. '12px' becomes '12'.

Mixins core/_mixins.scss

SASS mixins to simplify and streamline development.

@include clearfix;

Applies a clearfix to contain child floats.

@include font-size(18px);

Sets font-size in rems to pixel equivalent and calculates correct line-height to maintain vertical rhythm.

@include list-separator("|", [$spacing]);

Interleves li list items with a character. Takes an optional $spacing parameter (default value $gap) that defines horizontal margins either side of the character.

@include if-min-resolution($dpi) { //styles }

Media query for minimum resolution.

@include if-max-resolution($dpi) { //styles }

Media query for maximum resolution.

@include retina() { //styles }

Shortcut resolution media query targetting Retina devices (2+ DPI).

@include media-query($breakpoint) { //styles }

Media query mixin, takes a breakpoint of palm, lap, lap-and-up, portable, desk, desk-wide the boundaries of which are defined in _variables.scss

Universals core/_universals.scss

Sets styles on unclassed element selectors.

Automatically –

• Sets universal border-box sizing
• Always includes vertical scroll bar
• Enables Responsive images
• Sets consistent vertical margins

Typography

Headings typography/_headings.scss

Sets up heading sizes as defined in _variables.scss and sets shared styling for all headings.

Body typography/_body.scss

Any styles that apply to standard body text.

Automatically –

• Emboldens dt definition terms.
• Formats blockquote set with figure elements

@extend %indent-boundaries;

Apply to any parent element of paragraphs to use indent boundaries rather than single line boundaries, i.e. make paragraph look like they more usually do in print (books, magazines, etc)

Modular Scale typography/_modularscale.scss

Sets the $giga, $mega, $kilo, $alpha, $beta, $gamma, $delta, $epsilon, $zeta, $milli, $micro font-size modular scale as defined in _variables.scss

Forms typography/_forms.scss

Basic formatting for simple top labelled forms with help and error text. Input elements strecth to 100% width of their container.

@extend %forms;

Extend %forms on any form element. Wrap your label and input elements in individual fieldset elements. Apply class of form__error to any fieldset to activate error highlighting within it. Error messages can be classed with form_errormsg. Additional help text can be classed with form__help. A label element that wraps an inline input (e.g. radio buttons and checkboxes) can be classed with form__inline to ensure proper display.

Abstractions

Media Objectabstractions/_media.scss

Nicole Sullivan's Media Object is an image to the left, with descriptive content to the right.

@extend %media;
@extend %media__image;
@extend %media__body;

@extend %media; is applied to the parent element. @extend %media__image; to the avatar element and @extend %media__body; to the comment text.

@ 1:52pm on Friday 4 October 2013 Wile E. Coyote wrote…

Nullam id dolor id nibh ultricies vehicula ut id elit. Nullam id dolor id nibh ultricies vehicula ut id elit. Donec id elit non mi porta gravida at eget metus. Donec id elit non mi porta gravida at eget metus. Donec sed odio dui. Cras mattis consectetur purus sit amet fermentum.

Cras mattis consectetur purus sit amet fermentum. Vestibulum id ligula porta felis euismod semper. Donec id elit non mi porta gravida at eget metus. Cras mattis consectetur purus sit amet fermentum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.

Reply

@extend %media__image--rev;

Places the image to the right

101 Further Ways to Kill a Road-Runner by Wile E. Coyote

Cras mattis consectetur purus sit amet fermentum. Vestibulum id ligula porta felis euismod semper. Donec id elit non mi porta gravida at eget metus. Cras mattis consectetur purus sit amet fermentum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.

Nullam quis risus eget urna mollis ornare vel eu leo. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Vestibulum id ligula porta felis euismod semper. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Donec ullamcorper nulla non metus auctor fringilla.

£12.99 Acme Press

Flag Object abstractions/_flag.scss

Like the Media Object, but vertically aligns its content in the middle.

@extend %flag;
@extend %flag__image;
@extend %flag__body;

This example uses two %flag__image objects to create its effect, one for the logo, one for the New Season announcement. The %flag__body is a large easy-to-click box link.

New Season

Game of Drones
Thursday Sept. 26th 10/9c

@extend %flag--rev;

Modifier used to have the image on the right. Note the source order of %flag__image and %flag__body are also reversed.

Wile E. Coyote
Senior VP Road–Pest Removal, ACME Inc.

Lineup (a.k.a Nav, Array) abstractions/_lineup.scss

Line up list items horizontally

@extend %lineup;

Use on any ul, ol element to line up its list items horizontally – li's can contain links or other elements

If not using lists and li then @extend %lineup__item; on any child element of @extend %lineup; in their place.

Combine it with @include list-separator('/'); to easily create menus…

… or combine it with @include list-separator('»'); to easily create breadcrumb trails…

@extend %lineup--evenly;

Modifier used to distribute li's across the full width of the container element.

If the contents are fixed width and horizontally centered within their li they'll be perfectly evenly distributed

Place abstractions/_place.scss

@include place--left($spacing);

Float an element left with $spacing applied to the right & bottom margins, defaults to $gap if omitted to maintain vertical and horizontal rhythm.

@include place--right($spacing);

Float an element right with $spacing applied to the left & bottom margins, defaults to $gap if omitted to maintain vertical and horizontal rhythm.

@include place--center($spacing);

Center a element using automatic left/right margins with $spacing applied to the bottom margin, defaults to $gap if omitted to maintain vertical rhythm.

Split abstractions/_split.scss

Split data left and right.

@extend %split;

@extend %split__title;