Notorious Penguin Magicians
Miss any of our Open RFC calls?Watch the recordings here! »

@kickoff/utils.scss

3.0.2 • Public • Published

@kickoff/utils.scss

Sass Functions and Mixins for the Kickoff framework

npm version

Install

npm install @kickoff/utils.scss --save

or

yarn add @kickoff/utils.scss

Usage

With scss and the npm-sass or similar importer like eyeglass.

@import "kickoff-utils.scss" // with npm-sass 
@import "kickoff-utils" // with eyeglass 

Functions

_colors.scss

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%);
}

_get-value.scss

Retrieve value from sass map. Often used within the font-size mixin.

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

_get-breakpoint.scss

Get breakpoint from $breakpoints map

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

_get-font-family.scss

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.scss

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.scss

Get z-index value from $z-index map

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

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

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

_strip-units.scss

Strip units


Mixins

_type-sizes.scss

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-reveal.scss

Responsive helper classes to show/hide content based on our $breakpoints map. See demo

@include ko-rwd-reveal();

_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;

_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.

🚨 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 

_units.scss

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

Install

npm i @kickoff/utils.scss

DownloadsWeekly Downloads

20

Version

3.0.2

License

MIT

Last publish

Collaborators

  • avatar
  • avatar
  • avatar