Skip to content


Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time


Sass Functions and Mixins for the Kickoff framework

npm version


npm install @kickoff/utils.scss --save


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 eyeglass



Various 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-size mixin.

// map helper
ko-getValue(mid, $map) // uses a Sass map


Get breakpoint from $breakpoints map

ko-bp(m) // uses the $breakpoints Sass map


Get font-family from $font-family map

ko-font(system) // uses 'system' font stack
ko-font(sans) // uses the 'sans' font stack


Get 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 map


Get z-index value from $z-index map

ko-zIndex(low) // uses 'low' z-index value
ko-zIndex(mid) // uses 'mid' z-index value


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');


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)


font-size : ko-em(12);
font-size : ko-em(12, 24);


Strip units



Type size helper classes based on our $type map. See demo

// 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 $breakpoints map. 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 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 px


Dimension-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


Sass utility functions and mixins for the Kickoff framework






No packages published