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

This package has been deprecated

Author message:

Renamed package. Please install kickoff-utils.scss instead

kickoff-functions-and-mixins.scss

1.0.0 • Public • Published

kickoff-functions-and-mixins.scss

Sass Functions and Mixins for the Kickoff framework

npm version

NPM

Install

npm install kickoff-functions-and-mixins.scss --save

Usage

With scss and the npm-sass or similar importer

@import "kickoff-functions-and-mixins.scss"

Functions

_get-value.scss

Retrieve value from sass map

_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: map-deep-get($grid-configuration, 'columns');
   width: 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 
modular-scale($font-size-base, -1, $type-scale)
modular-scale($font-size-base, 0, $type-scale)
modular-scale($font-size-base, 1, $type-scale)

_px-to-em.scss

Convert px em

_px-to-rem.scss -

Convert px rem

_strip-units.scss

Strip units

_tint-shade.scss

// Add percentage of white to a color 
background-color: tint(blue, 20%);
 
// Add percentage of black to a color 
background-color: shade(blue, 20%);

Mixins

_hidpi.scss

Hi-dpi media query mixin

@include 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 position(absolute, 10px 20px 30px 10px);

_responsive.scss

Responsive media-queries

// min-width 
// Equivalent to: @media screen and (min-width: 20em) { ... } 
@include respond-min(mid) { ... }; // uses the $breakpoints sass-map 
@include respond-min(650) { ... }; // converts to px 
 
// max-width 
// Equivalent to: @media screen and (max-width: 20em) { ... } 
@include respond-min(large) { ... }; // uses the $breakpoints sass-map 
@include respond-min(460) { ... }; // converts to px 
 
// min-max-width 
// Equivalent to: @media screen and (min-width: 10em) and (max-width: 20em) { ... } 
@include respond-min-max(narrow, large) { ... }; // uses the $breakpoints sass-map 
@include respond-min-max(460, 900) { ... }; // converts to px 

_units.scss

Dimension-based mixins

  • REM calculation: @include rem(margin, $font-size-base);
  • REM font-size: @include font-size(16);
  • REM line-height: @include line-height(22);
  • EM font-size: @include font-size-ems(20, 16);

_utility.scss

Utility Mixins

  • clearfix: @include clearfix;
  • Text truncation: @include truncate(100%);
  • and a bunch more

_vertical-centre.scss

Vertically center any element. Needs support for CSS tranforms.

@include vertical-center;

Keywords

Install

npm i kickoff-functions-and-mixins.scss

DownloadsWeekly Downloads

1

Version

1.0.0

License

MIT

Last publish

Collaborators

  • avatar