Skip to content

Commit 66cfcfe

Browse files
mrmartineaumrmartineau
committed
✨ 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)`
1 parent 6e6af3f commit 66cfcfe

1 file changed

Lines changed: 63 additions & 61 deletions

File tree

‎assets/src/scss/_variables.scss‎

Lines changed: 63 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -3,13 +3,10 @@
33
* =================================
44
* - Typography
55
* - Breakpoints
6-
* - Paths
76
* - Layout & Grid
87
* - App-specific
98
*/
109

11-
/* stylelint-disable indentation */
12-
1310
/**
1411
* Typography
1512
* =================================
@@ -18,41 +15,48 @@
1815
* Set this in pixels (but do not add px),
1916
* the font-size mixin will convert to REMS
2017
*/
21-
$font-size-base : 20;
22-
$font-size-base-px : $font-size-base * 1px;
23-
$font-size-base-narrow : $font-size-base - 2;
24-
$font-size-base-narrow-px : $font-size-base-narrow * 1px;
25-
26-
$leading-base : 1.4;
27-
$line-height-base : round($font-size-base * $leading-base); // 20 * 1.4
28-
$baseline : $line-height-base * 1px;
18+
$font-size-base: 20;
19+
$leading-base: 1.4;
20+
$line-height-base: round($font-size-base * $leading-base); // 20 * 1.4
21+
$baseline: $line-height-base * 1px;
2922

30-
$type-scale : 1.25; // Major third
23+
$type-scale: 1.25; // 1.25 === Major third. See modularscale.com
3124

25+
/**
26+
* Type sizes
27+
* =================================
28+
* Set using a modular scale by default.
29+
* Values can be changed to px, rem etc if needed
30+
*
31+
* Usage: ko-type(s), ko-type(m)
32+
*/
3233
$type: (
33-
micro : ko-ms(-2),
34-
small : ko-ms(-1), // h5, h6
35-
base : ko-ms(0), // p, h4
36-
mid : ko-ms(1), // h3
37-
large : ko-ms(2), // h2
38-
jumbo : ko-ms(3) // h1
34+
xs: ko-ms(-2),
35+
s: ko-ms(-1), // h5, h6
36+
m: ko-ms(0), // [default] p, h4
37+
l: ko-ms(1), // h3
38+
xl: ko-ms(2), // h2
39+
xxl: ko-ms(3) // h1
3940
);
4041

41-
// Useful to set here when bold webfonts come as 400 font-weight.
42-
$font-weight-bold : bold;
43-
44-
// Font stacks
45-
$font-family-system : -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
46-
$font-family-sans : "Helvetica Neue", Helvetica, Arial, sans-serif;
47-
$font-family-serif : Georgia, "Times New Roman", Times, serif;
48-
$font-family-mono : Menlo, Monaco, "Courier New", monospace;
49-
50-
$font-family-base : $font-family-system;
51-
$font-family-alt : $font-family-serif;
42+
/**
43+
* Font stacks
44+
* =================================
45+
*
46+
* Usage: ko-font(system), ko-font(sans)
47+
*/
48+
$font-family: (
49+
system: #{-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans"},
50+
sans: #{"Helvetica Neue", Helvetica, Arial, sans-serif},
51+
serif: #{Georgia, "Times New Roman", Times, serif},
52+
mono: #{Menlo, Monaco, "Courier New", monospace}
53+
);
5254

53-
$font-family-headings : $font-family-base; // using inherit will use $font-family-base for all headings
54-
$font-weight-headings : bold; // instead of browser default, bold
55-
$line-height-headings : 1.1;
55+
$font-family-base: ko-font(system);
56+
$font-family-headings: ko-font(serif);
57+
$line-height-headings: 1.1;
58+
$font-weight-bold: bold; // Useful to set here when bold webfonts come as 400 font-weight.
59+
$font-weight-headings: bold; // instead of browser default, bold
5660

5761

5862
/**
@@ -62,61 +66,59 @@ $line-height-headings : 1.1;
6266
* You'll need to define your own breakpoints to suit your design
6367
* Add your breakpoints to this Sass map
6468
* Used in the Kickoff grid
69+
* Usage: ko-bp(100)
6570
*/
6671
$breakpoints: (
67-
narrow : 400px,
68-
mid : 750px,
69-
wide : 1000px,
70-
huge : 1250px
72+
s: 400px,
73+
m: 750px,
74+
l: 1000px,
75+
xl: 1250px
7176
);
7277

7378

7479
// Setup layout max-width
75-
$layout-margin : 0; // [in pixels] Space outside the grid
76-
$layout-max-width : 1000; // [in pixels]
77-
$layout-min-width : 960; // [in pixels] Minimum width for layout in <IE9
78-
$layout-max-width--huge : 1100; // [in pixels]
79-
$layout-min-width--huge : 1100; // [in pixels] Minimum width for layout in <IE9
80+
$layout-margin: 0; // [in pixels] Space outside the grid
81+
$layout-max-width: 1000; // [in pixels]
82+
$layout-min-width: 960; // [in pixels] Minimum width for layout in <IE9
83+
$layout-max-width--huge: 1100; // [in pixels]
84+
$layout-min-width--huge: 1100; // [in pixels] Minimum width for layout in <IE9
8085

8186

8287
/**
8388
* Grid
8489
* =================================
8590
* These variables will control the grid module.
8691
*
87-
* if your project doesnt use Kickoff’s default grid, you can delete these
92+
* If your project doesn't use Kickoff’s default grid, you can delete these
8893
*/
94+
$grid-column-count: 12; // Total column count
95+
$grid-gutter-width: 20; // [in pixels]
8996

90-
$grid-column-count : 12; // Total column count
91-
$grid-gutter-width : 20; // [in pixels]
92-
93-
//Settings here override & affect the grid classes output
94-
$responsive-grid-sizes : true; // Disable this if you don't want grid sizes for each breakpoint
95-
$use-legacy-grid : true; // Disable this is you on’t want to output .no-flexbox classes for older browsers to use
96-
97-
98-
/**
99-
* Path variables
100-
* =================================
101-
*/
102-
$img-path : "/assets/dist/img"; // Usage: background: url('#{$img-path}/img.jpg') 0 0 no-repeat;
97+
// Settings here override & affect the grid classes output
98+
$responsive-grid-sizes: true; // Disable this if you don't want grid sizes for each breakpoint
99+
$use-legacy-grid: false; // Disable this is you on’t want to output .no-flexbox classes for older browsers to use
103100

104101

105102
/**
106103
* Z-index variables
107104
* =================================
105+
*
106+
* Usage: ko-zIndex(low)
108107
*/
109-
$z-low : 10;
110-
$z-mid : 100;
111-
$z-high : 1000;
108+
$z-index: (
109+
low: 10,
110+
mid: 100,
111+
high: 1000
112+
);
112113

113114

114115
/**
115116
* App-specific variables
116117
* =================================
117118
*/
118-
$default-transition-timing : cubic-bezier(0.77, 0, 0.175, 1);
119-
$default-transition-duration : 300ms;
120-
$default-transition : all $default-transition-duration $default-transition-timing;
119+
$default-transition-timing: cubic-bezier(0.77, 0, 0.175, 1);
120+
$default-transition-duration: 300ms;
121+
$default-transition: all $default-transition-duration $default-transition-timing;
121122

123+
$img-path: "/assets/dist/img"; // Usage: background-image: url('#{$img-path}/img.jpg');
122124
// Add your own :)

0 commit comments

Comments
 (0)