Skip to content

Instantly share code, notes, and snippets.

@mpjura
Last active December 11, 2015 04:43
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save mpjura/a0727f4b5c3e9ff68256 to your computer and use it in GitHub Desktop.
Typography/Layout Placeholders
// base _article.scss
// ------------------
.article-hed {
@extend %layout-article-hed;
@extend %type-article-hed;
}
.article-dek {
@extend %layout-article-dek;
@extend %type-article-dek;
}
// cosmopolitan _layout-placeholders.scss
// ------------------
%layout-article-hed {
@extend %layout-article-hed-base;
margin-bottom: $margin-l;
}
// base _layout-placeholder.scss
// ------------------
%layout-article-hed-base {
@include grid-col-width( 18 );
margin-bottom: $margin-s;
}
%layout-article-hed {
@extend %layout-article-hed-base;
}
%layout-article-dek-base {
@include grid-col-width( 6, $last-in-row: true );
}
%layout-article-dek {
@extend %layout-article-dek-base;
}
// base _typography.scss
// ------------------
%type-article-hed {
$alt-size-map: (
mobile_w: 40,
tablet: 52
);
@include type-style( $font-sans, 35, $alt-size-map );
color: $headline-color;
font-weight: normal;
}
%type-article-dek {
$alt-size-map: (
mobile_w: 40,
tablet: 52
);
@include type-style( $font-serif, 21, $alt-size-map );
color: palette( grey, medium );
font-weight: normal;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment