Nukem's Possible Manifestation

    kickoff-utils.scss

    2.0.6 • Public • Published

    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

    @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

     $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

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

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

    _px-to-rem.scss -

    Convert px rem

    _strip-units.scss

    Strip units

    _tint-shade.scss

    Add percentage of white or black to a colour

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

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

    • 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.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;

    Install

    npm i kickoff-utils.scss

    DownloadsWeekly Downloads

    97

    Version

    2.0.6

    License

    MIT

    Last publish

    Collaborators

    • ashleynolan
    • mrmartineau