Skip to content

TryKickoff/kickoff-utils.scss

master
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?
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
 
 
 
 

@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

About

Sass utility functions and mixins for the Kickoff framework

Resources

Stars

Watchers

Forks

Packages

No packages published

Languages