Sass Functions and Mixins for the Kickoff framework
npm install @kickoff/utils.scss --save
or
yarn add @kickoff/utils.scss
With scss and the npm-sass or similar importer like eyeglass.
@import "kickoff-utils.scss" // with npm-sass
@import "kickoff-utils" // with eyeglassVarious color functions
// With a color palette map like this:
$color-palette: (
white: (
base: #ffffff
),
sky: (
lighter: #f9fafb,
light: #f4f6f8,
base: #dfe3e8,
dark: #c4cdd5
)
);
// ko-color() function
a {
color: ko-color(white); // picks the `base` value
color: ko-color(sky, dark); // picks the `dark` variant
color: ko-color(sky, lighter); // picks the `lighter` variant
}
// ko-color-tint() function
// Add percentage of white to a color
a {
background-color: ko-color-tint(blue, 20%);
}
// ko-color-shade() function
// Add percentage of black to a color
a {
background-color: ko-color-tint(red, 10%);
}Retrieve value from sass map. Often used within the
font-sizemixin.
// map helper
ko-getValue(mid, $map) // uses a Sass mapGet breakpoint from $breakpoints map
ko-bp(m) // uses the $breakpoints Sass mapGet font-family from $font-family map
ko-font(system) // uses 'system' font stack
ko-font(sans) // uses the 'sans' font stackGet font-size from $type map
ko-font-size(xl) // Kickoff uses t-shirt sizes
ko-font-size(large, $font-sizes) // Using a made-up $font-sizes mapGet z-index value from $z-index map
ko-zIndex(low) // uses 'low' z-index value
ko-zIndex(mid) // uses 'mid' z-index valueRetrieve 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');
}Multiply any value
ko-multiply(15, 2)
ko-multiply($baseline, 1.5)
// e.g.
a {
margin-bottom: ko-multiply($baseline, 1.5);
}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);Strip units
// outputs type-size helpers based on the $type map
// e.g. .u-typeSize--m / .u-typeSize-l
@include ko-type-sizes();
// Using another $map as the 2nd argument would output the above
// as well as the .h1, .h2 values defined in the 2nd $map
@include ko-type-sizes($type, (h1: xxl, h2: xl));
// Using another $map as the 2nd argument would output the above
// as well as the .alpha, .beta values defined in the 2nd $map
@include ko-type-sizes($type, (alpha: xxl, beta: xl));Responsive helper classes to show/hide content based on our
$breakpointsmap. See demo
@include ko-rwd-reveal();Utility Mixins
- clearfix:
@include ko-clearfix; - Text truncation:
@include ko-truncate(100%); - and a bunch more
Vertically center any element. Needs support for CSS tranforms.
@include vertical-center;Hi-dpi media query mixin
@include ko-hidpi {
...
}Provides consistent class naming through the usage of mixins
See https://gist.github.com/mrmartineau/0cd2010bf265d712bafb for usage
Position shortcut
@include ko-position(absolute, 10px 20px 30px 10px);Responsive media-queries.
🚨 This is deprecated, 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 pxDimension-based mixins
🚨 These mixins have been removed. They are not needed because we now use a PostCSS plugin (postcss-pxtorem) that converts px values to rem at the build stage