Skip to content

Instantly share code, notes, and snippets.

@craigmdennis craigmdennis/_debug.scss
Last active Jan 16, 2018

Embed
What would you like to do?
Sass mixins for vertical rhythm and scoped typography with pixel fallback for IE.
$debug-rhythm: false;
// Generate the margins and line-height
@mixin rhythm($margins: false) {
@each $name, $size in $scale {
$rhythm: $measure * ($line-height / $size);
// Reduce the line-height to base line-height
// if the rhythm is greater
@if ($rhythm > $line-height) {
$rhythm: $line-height;
}
// Increase the line-height if the rhythm is less than 1
// Might break vertical rhythm but looks better visually
@if ($rhythm < 1) {
$rhythm: 1;
}
// Generate classes dynamically
.#{$name} {
// Margins and line-height are to allow
// scoping within different .context__* classes
@if ($margins == true) {
// Use REM function to provide IE fallback
margin-bottom: rem($rhythm * $font-base);
line-height: $rhythm;
}
@else {
line-height: $rhythm;
}
}
}
}
// Generate the font sizes
@mixin scale() {
@each $name, $size in $scale {
.#{$name} {
font-size: rem($size);
text-rendering: optimizeLegibility;
}
}
}
// Generate the font weights
@mixin weight() {
@each $name, $value in $weight {
.#{$name} {
font-weight: $value;
}
}
}
// Extend scale to root headings
@mixin headings() {
@each $h, $size in $headings {
#{$h} {
@extend .#{$size};
}
}
}
// Generate classes using mixins
@include scale;
@include headings;
@include weight;
// Add a context just for maintaining rhythm with line-height and no margins
.context__rhythm {
// Use a lined background to test the rhythm
@if ($debug-rhythm == true) {
background-image: url(http://basehold.it/i/#{$measure}); // 18px * 1.5
}
// Generate the line-height
@include rhythm;
}
// Add a context just for adding margins but only
// allow it to be used when we're already maintain a rhythm with line-heights
.context__rhythm {
.context__margins,
&.context__margins {
@include rhythm(true);
ul,ol,dl,blockquote,p,pre,iframe,
.gallery__thumb {
margin-bottom: $baseline;
}
}
}
// Add typographical flare and bullets
// Nothing within should add margins
.context__copy {
ul {
list-style: disc;
margin-left: $baseline;
}
}
// PX to REM Calculator
@function rem($size) {
// Return pixels if IE
@if ($old-ie == true) {
@return $size *1px;
}
// Otherwise use REMS
@else {
@return ($size / $font-base) * 1rem;
}
}
$old-ie: false;
$line-height: 1.5;
$font-size: 112.5; // percentage value (16 * 112.5% = 18px)
$font-base: 16 * ($font-size/100);
$measure: $font-base * $line-height;
// Use modularscale.com to generate a list of font-sizes
$scale: (
tera: 91,
giga: 72,
mega: 60,
alpha: 48,
bravo: 40,
charlie: 32,
delta: 24,
echo: 21,
foxtrot: 18,
golf: 14,
hotel: 12
);
// Assign sizes to elements
$headings: (
h1: mega,
h2: alpha,
h3: bravo,
h4: charlie,
h5: delta,
h6: echo
);
// Class names => weights
$weight: (
light: 300,
normal: 400,
semi-bold: 600,
bold: 700,
ultra-bold: 900
);
// Compile this stylesheet as well as styles.scss and include with IE conditional comments
// Use pixels
$old-ie: true;
// Import the normal stylsheet but it will contain different rules
// becuase of the $old-ie flag set as `true` in this stylesheet.
@import "style";
@import "vars";
@import "utilities";
@import "mixins";
@import "type";
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.