From 66cfcfedfc965501b7695b89ea9f0a93dd77b1a9 Mon Sep 17 00:00:00 2001 From: Zander Martineau Date: Tue, 16 May 2017 08:08:16 +0100 Subject: [PATCH] :sparkles: improve global sass vars - `$z-index` now a sass map - `$type` & `$breakpoint`'s keys now use t-shirt sizing to make it easier to remember them - new `$font-family` sass map to allow easy selection of common font-stacks e.g. `ko-font(sans)` --- assets/src/scss/_variables.scss | 124 ++++++++++++++++---------------- 1 file changed, 63 insertions(+), 61 deletions(-) diff --git a/assets/src/scss/_variables.scss b/assets/src/scss/_variables.scss index ffe4f282..858fa04a 100644 --- a/assets/src/scss/_variables.scss +++ b/assets/src/scss/_variables.scss @@ -3,13 +3,10 @@ * ================================= * - Typography * - Breakpoints - * - Paths * - Layout & Grid * - App-specific */ -/* stylelint-disable indentation */ - /** * Typography * ================================= @@ -18,41 +15,48 @@ * Set this in pixels (but do not add px), * the font-size mixin will convert to REMS */ -$font-size-base : 20; -$font-size-base-px : $font-size-base * 1px; -$font-size-base-narrow : $font-size-base - 2; -$font-size-base-narrow-px : $font-size-base-narrow * 1px; - -$leading-base : 1.4; -$line-height-base : round($font-size-base * $leading-base); // 20 * 1.4 -$baseline : $line-height-base * 1px; +$font-size-base: 20; +$leading-base: 1.4; +$line-height-base: round($font-size-base * $leading-base); // 20 * 1.4 +$baseline: $line-height-base * 1px; -$type-scale : 1.25; // Major third +$type-scale: 1.25; // 1.25 === Major third. See modularscale.com +/** + * Type sizes + * ================================= + * Set using a modular scale by default. + * Values can be changed to px, rem etc if needed + * + * Usage: ko-type(s), ko-type(m) + */ $type: ( - micro : ko-ms(-2), - small : ko-ms(-1), // h5, h6 - base : ko-ms(0), // p, h4 - mid : ko-ms(1), // h3 - large : ko-ms(2), // h2 - jumbo : ko-ms(3) // h1 + xs: ko-ms(-2), + s: ko-ms(-1), // h5, h6 + m: ko-ms(0), // [default] p, h4 + l: ko-ms(1), // h3 + xl: ko-ms(2), // h2 + xxl: ko-ms(3) // h1 ); -// Useful to set here when bold webfonts come as 400 font-weight. -$font-weight-bold : bold; - -// Font stacks -$font-family-system : -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; -$font-family-sans : "Helvetica Neue", Helvetica, Arial, sans-serif; -$font-family-serif : Georgia, "Times New Roman", Times, serif; -$font-family-mono : Menlo, Monaco, "Courier New", monospace; - -$font-family-base : $font-family-system; -$font-family-alt : $font-family-serif; +/** + * Font stacks + * ================================= + * + * Usage: ko-font(system), ko-font(sans) + */ +$font-family: ( + system: #{-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans"}, + sans: #{"Helvetica Neue", Helvetica, Arial, sans-serif}, + serif: #{Georgia, "Times New Roman", Times, serif}, + mono: #{Menlo, Monaco, "Courier New", monospace} +); -$font-family-headings : $font-family-base; // using inherit will use $font-family-base for all headings -$font-weight-headings : bold; // instead of browser default, bold -$line-height-headings : 1.1; +$font-family-base: ko-font(system); +$font-family-headings: ko-font(serif); +$line-height-headings: 1.1; +$font-weight-bold: bold; // Useful to set here when bold webfonts come as 400 font-weight. +$font-weight-headings: bold; // instead of browser default, bold /** @@ -62,21 +66,22 @@ $line-height-headings : 1.1; * You'll need to define your own breakpoints to suit your design * Add your breakpoints to this Sass map * Used in the Kickoff grid + * Usage: ko-bp(100) */ $breakpoints: ( - narrow : 400px, - mid : 750px, - wide : 1000px, - huge : 1250px + s: 400px, + m: 750px, + l: 1000px, + xl: 1250px ); // Setup layout max-width -$layout-margin : 0; // [in pixels] Space outside the grid -$layout-max-width : 1000; // [in pixels] -$layout-min-width : 960; // [in pixels] Minimum width for layout in