Skip to content

Commit

Permalink
✨ improve global sass vars
Browse files Browse the repository at this point in the history 
- `$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)`
  • Loading branch information
@mrmartineau
mrmartineau committed May 16, 2017
1 parent 6e6af3f commit 66cfcfe
Showing 1 changed file with 63 additions and 61 deletions.
124 changes: 63 additions & 61 deletions assets/src/scss/_variables.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,13 +3,10 @@
* =================================
* - Typography
* - Breakpoints
* - Paths
* - Layout & Grid
* - App-specific
*/

/* stylelint-disable indentation */

/**
* Typography
* =================================
Expand All @@ -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


/**
Expand All @@ -62,61 +66,59 @@ $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,

This comment has been minimized.

Sign in to view

Copy link
@ashleynolan

ashleynolan May 22, 2017

Contributor

One thing I’ve just thought of in relation to the breakpoint naming change – if a project was using these and then needed to add a breakpoint between s (small) and m (medium), would we recommend them changing all of their breakpoints in the project (so moving s > xs to fit the new values?) or is there a name that could fit nicely between these?

Just wondering as it’s something I’ve had to do in the past and it’s much easier to slot a new name in than having to update all breakpoint references across a site.

This comment has been minimized.

Sign in to view

Copy link
@mrmartineau

mrmartineau May 22, 2017

Author Member

This is a conundrum... there's not a lot one can do about this. At this point, devs might have to resort to naming their breakpoints that don't fit this model.. e.g. `XXS, XS, NARROW, S, M, L, XL, HUGE, 2XL, 3XL

American Apparel uses this btw: XXS, XS, S, M, L, XL, 2XL, 3XL

This comment has been minimized.

Sign in to view

Copy link
@ashleynolan

ashleynolan May 22, 2017

Contributor

Think we should definitely give an opinion on what to do in this scenario either way. Might be that it would make sense to add custom names between the major breakpoints like in your first example…
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 <IE9
$layout-max-width--huge : 1100; // [in pixels]
$layout-min-width--huge : 1100; // [in pixels] Minimum width for layout in <IE9
$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 <IE9
$layout-max-width--huge: 1100; // [in pixels]
$layout-min-width--huge: 1100; // [in pixels] Minimum width for layout in <IE9


/**
* Grid
* =================================
* These variables will control the grid module.
*
* if your project doesnt use Kickoff’s default grid, you can delete these
* If your project doesn't use Kickoff’s default grid, you can delete these
*/
$grid-column-count: 12; // Total column count
$grid-gutter-width: 20; // [in pixels]

$grid-column-count : 12; // Total column count

This comment has been minimized.

Sign in to view

Copy link
@mrmartineau

mrmartineau May 18, 2017

Author Member

@ashleynolan these vars could be represented like so:

$grid: (
	columns: 12, // Total column count
	gutter: 20, // [in pixels]
	rwd-grid: true, // Disable this if you don't want grid sizes for each breakpoint
	legacy-grid: false // Disable this is you on’t want to output .no-flexbox classes for older browsers to use
)

What do you think?

This comment has been minimized.

Sign in to view

Copy link
@mrmartineau

mrmartineau May 20, 2017

Author Member

@ashleynolan this would need a modification to the @kickoff/grid package in order for this to work as well..

This comment has been minimized.

Sign in to view

Copy link
@ashleynolan

ashleynolan May 22, 2017

Contributor

Would the only way to access these variables then be via:

map-get($grid, columns)

If so, not sure it’s making the code any more accessible for anyone using it.

This comment has been minimized.

Sign in to view

Copy link
@mrmartineau

mrmartineau May 22, 2017

Author Member

@ashleynolan I don't think anyone would actually have a need to use those vars in their codebase because only the grid lib would use them.. Am I wrong?

This comment has been minimized.

Sign in to view

Copy link
@ashleynolan

ashleynolan May 22, 2017

Contributor

The grid code is already pretty crazy - think the simpler we can keep it the better really.

If we can see any major benefits to putting these values in a map, then could be worth considering, but I’d rather keep the code simpler otherwise.

This comment has been minimized.

Sign in to view

Copy link
@mrmartineau

mrmartineau May 22, 2017

Author Member

up to you mate, IMHO, I think that the API on Kickoff's side should be made as simple as possible, therefore the dependent library can be made more complex because no one uses, or modifies, the code directly.

This comment has been minimized.

Sign in to view

Copy link
@ashleynolan

ashleynolan May 22, 2017

Contributor

Get your point – maybe I’ll take a look at the grid code and see how it looks were we to change it to use map-get calls. Mainly want to keep it intelligible as I remember having to update after a while away from it and getting that (╯°□°)╯︵ ┻━┻ feeling 😉
$grid-gutter-width : 20; // [in pixels]

//Settings here override & affect the grid classes output
$responsive-grid-sizes : true; // Disable this if you don't want grid sizes for each breakpoint
$use-legacy-grid : true; // Disable this is you on’t want to output .no-flexbox classes for older browsers to use


/**
* Path variables
* =================================
*/
$img-path : "/assets/dist/img"; // Usage: background: url('#{$img-path}/img.jpg') 0 0 no-repeat;
// Settings here override & affect the grid classes output
$responsive-grid-sizes: true; // Disable this if you don't want grid sizes for each breakpoint
$use-legacy-grid: false; // Disable this is you on’t want to output .no-flexbox classes for older browsers to use


/**
* Z-index variables
* =================================
*
* Usage: ko-zIndex(low)
*/
$z-low : 10;
$z-mid : 100;
$z-high : 1000;
$z-index: (
low: 10,
mid: 100,
high: 1000
);


/**
* App-specific variables
* =================================
*/
$default-transition-timing : cubic-bezier(0.77, 0, 0.175, 1);
$default-transition-duration : 300ms;
$default-transition : all $default-transition-duration $default-transition-timing;
$default-transition-timing: cubic-bezier(0.77, 0, 0.175, 1);
$default-transition-duration: 300ms;
$default-transition: all $default-transition-duration $default-transition-timing;

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

0 comments on commit 66cfcfe

Please sign in to comment.