kickoff-utils.scss

Sass utility functions and mixins for the Kickoff framework

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
kickoff-utils.scss
2.0.67 years ago8 years agoMinified + gzip package size for kickoff-utils.scss in KB

Readme

kickoff-utils.scss
Sass Functions and Mixins for the Kickoff framework
npm version NPM

Install

``` npm install kickoff-utils.scss --save ```

Usage

With scss and the npm-sass or similar importer ```scss @import "kickoff-utils.scss" ```

Functions

get-value.scss

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

map-deep-get.scss

Retrieve value from deeply nested sass map
```scss $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');
} ```

modular-scale.scss

Sizes type using a consistent vertical rythm
```scss // Used in the kickoff $type sass map variable ko-modular-scale($font-size-base, -1, $type-scale) ko-modular-scale($font-size-base, 1, $type-scale) ko-modular-scale($font-size-base, 3, $type-scale) // or using this shorthand, we assume that $font-size-base & $type-scale are already set somewhere (in Kickoff, they are set in the variables.scss file): $font-size-base: 20; $type-scale: 1.4 ko-ms(-1) ko-ms(1) ko-ms(3) // e.g. a {
font-size: @include font-size(ko-ms(3));
} ```

multiply.scss

Multiply any value
```scss 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: ```scss font-size : ko-em(12); font-size : ko-em(12, 24); ```

px-to-rem.scss -

Convert px rem

strip-units.scss

Strip units

tint-shade.scss

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

Mixins

hidpi.scss

Hi-dpi media query mixin
```scss @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
```scss @include ko-position(absolute, 10px 20px 30px 10px); ```

responsive.scss

Responsive media-queries. We recommend the use of include-media for media-queries now.
```scss // 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
  • REM calculation: @include ko-rem(margin, $font-size-base);
  • REM font-size: @include ko-font-size(16);
  • REM line-height: @include ko-line-height(22);
  • EM font-size: @include ko-font-size-ems(20, 16);
Utility Mixins
  • clearfix: @include ko-clearfix;
  • Text truncation: @include ko-truncate(100%);

vertical-centre.scss

Vertically center any element. Needs support for CSS tranforms.
```scss @include vertical-center; ```