kickoff-utils.scss
v2.0.6
Published
Sass utility functions and mixins for the Kickoff framework
Downloads
99
Readme
kickoff-utils.scss
Sass Functions and Mixins for the Kickoff framework
Install
npm install kickoff-utils.scss --save
Usage
With scss and the npm-sass or similar importer
@import "kickoff-utils.scss"
Functions
_get-value.scss
Retrieve value from sass map. Often used within the
font-size
mixin.
_map-deep-get.scss
Retrieve value from deeply nested sass map
$grid-configuration: (
'columns': 12,
'layouts': (
'small': 800px,
'medium': 1000px,
'large': 1200px,
),
);
div {
font-size: ko-map-deep-get($grid-configuration, 'columns');
width: ko-map-deep-get($grid-configuration, 'layouts', 'medium');
}
_modular-scale.scss
Sizes type using a consistent vertical rythm
// Used in the kickoff $type sass map variable
ko-modular-scale($font-size-base, -1, $type-scale)
ko-modular-scale($font-size-base, 1, $type-scale)
ko-modular-scale($font-size-base, 3, $type-scale)
// or using this shorthand, we assume that `$font-size-base` & `$type-scale` are already set somewhere (in Kickoff, they are set in the _variables.scss file):
$font-size-base: 20;
$type-scale: 1.4
ko-ms(-1)
ko-ms(1)
ko-ms(3)
// e.g.
a {
font-size: @include font-size(ko-ms(3));
}
_multiply.scss
Multiply any value
ko-multiply(15, 2)
ko-multiply($baseline, 1.5)
// e.g.
a {
margin-bottom: ko-multiply($baseline, 1.5);
}
_px-to-em.scss
Convert px em
For a relational value of 12px write ko-em(12) when the parent is 16px If the parent is another value say 24px write ko-em(12, 24)
Usage:
font-size : ko-em(12);
font-size : ko-em(12, 24);
_px-to-rem.scss -
Convert px rem
_strip-units.scss
Strip units
_tint-shade.scss
Add percentage of white or black to a colour
// Add percentage of white to a color
background-color: ko-tint(blue, 20%);
// Add percentage of black to a color
background-color: ko-shade(blue, 20%);
Mixins
_hidpi.scss
Hi-dpi media query mixin
@include ko-hidpi {
...
}
_module-naming-helpers.scss
Provides consistent class naming through the usage of mixins
See https://gist.github.com/mrmartineau/0cd2010bf265d712bafb for usage
_position.scss
Position shortcut
@include ko-position(absolute, 10px 20px 30px 10px);
_responsive.scss
Responsive media-queries. We recommend the use of include-media for media-queries now.
// min-width
// Equivalent to: @media screen and (min-width: 20em) { ... }
@include ko-respond-min(mid) { ... }; // uses the $breakpoints sass-map
@include ko-respond-min(650) { ... }; // converts to px
// max-width
// Equivalent to: @media screen and (max-width: 20em) { ... }
@include ko-respond-min(large) { ... }; // uses the $breakpoints sass-map
@include ko-respond-min(460) { ... }; // converts to px
// min-max-width
// Equivalent to: @media screen and (min-width: 10em) and (max-width: 20em) { ... }
@include ko-respond-min-max(narrow, large) { ... }; // uses the $breakpoints sass-map
@include ko-respond-min-max(460, 900) { ... }; // converts to px
_units.scss
Dimension-based mixins
- REM calculation:
@include ko-rem(margin, $font-size-base);
- REM font-size:
@include ko-font-size(16);
- REM line-height:
@include ko-line-height(22);
- EM font-size:
@include ko-font-size-ems(20, 16);
_utility.scss
Utility Mixins
- clearfix:
@include ko-clearfix;
- Text truncation:
@include ko-truncate(100%);
- and a bunch more
_vertical-centre.scss
Vertically center any element. Needs support for CSS tranforms.
@include vertical-center;