Skip to content

Instantly share code, notes, and snippets.

@daneden
Created February 9, 2015 23:37
Show Gist options
  • Save daneden/2e8ee54d814fce5d9f4b to your computer and use it in GitHub Desktop.
Save daneden/2e8ee54d814fce5d9f4b to your computer and use it in GitHub Desktop.
/* This variable is for demonstration only, but the naming convention is a shorthand for:
** $globalVar-spacingVar-baseline
*/
$g-s-baseline: 23px;
/* You could imagine different variables following the same pattern, for example:
** $g-c-blue (global, color, blue)
** $l-f-sans (local/themed, font, sans-serif)
*/
/*--------------------------*\
Layout Helpers
\*--------------------------*/
/* Islands are the most common layout helper.
** They throw a padding around the selected element equal to the global baseline.
** Each layout helper has a vertical modifier (usually '*-v') to apply only top/bottom padding
*/
.l-island {
padding: $g-s-baseline;
&-v {
padding-top: $g-s-baseline;
padding-bottom: $g-s-baseline;
}
}
// Half an island
.l-isle {
padding: round($g-s-baseline / 2);
&-v {
padding-top: round($g-s-baseline / 2 );
padding-bottom: round($g-s-baseline / 2 );
}
}
// Half an isle
.l-spit {
padding: round($g-s-baseline / 4);
&-v {
padding-top: round($g-s-baseline / 4 );
padding-bottom: round($g-s-baseline / 4 );
}
}
// Twice the size of an island
.l-country {
padding: round($g-s-baseline * 2);
&-v {
padding-top: round($g-s-baseline *2);
padding-bottom: round($g-s-baseline *2);
}
}
// Twice the size of a country
.l-continent {
padding: round($g-s-baseline * 4);
&-v {
padding-top: round($g-s-baseline *4);
padding-bottom: round($g-s-baseline *4);
}
}
/* Margin layout helpers
** Typically, we want most elements to have the same vertical spacing, often just with a margin-bottom.
** The most basic element with this spacing is a paragraph, hence the 'l-p' selector name.
** Only two modifiers here: half- and double-spacing.
**
** Vertical margins are strictly applied to the bottom edge only, with the exception of negative margin-top values.
*/
.l-p {
margin-bottom: $g-s-baseline;
&-dbl {
margin-bottom: round($g-s-baseline * 2);
}
&-hlf {
margin-bottom: round($g-s-baseline / 2);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment