Numerous Packages Multiply

    @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

    50

    Version

    3.0.2

    License

    MIT

    Last publish

    Collaborators

    • jpdriver
    • ashleynolan
    • mrmartineau