aleut.tools.mixins

    1.0.2 • Public • Published

    Mixins

    The aleutcss mixins module contains a few framework mixins that are required for using any of the rest of aleutcss.

    Create a fully formed type style (sizing and vertical rhythm) by passing in a single value.

    Install using npm:

    $ npm install --save-dev aleut.tools.mixins
     

    Usage

    Basic usage of the mixins in a SCSS-file:

    .foo {
        @include font-size(12px);
    }

    This will generate a rem-based font-size with its pixel fallback, as well as a unitless line-height which will place the element on your baseline, e.g.:

    .foo {
        font-size: 12px;
        font-size: 0.75rem;
        line-height: 2;
    }

    If you do not want css to generate you a line-height automatically, you simply pass in your own as a second paramater:

    .foo {
        @include font-size(12px, 1.5);
    }

    This will yield:

    .foo {
        font-size: 12px;
        font-size: 0.75rem;
        line-height: 1.5;
    }

    This parameter can be any integer, ‘inherit’, or ‘normal’. If you don’t want a line-height at all, pass in a second paramater of ‘none’ or ‘false’:

    .foo {
        @include font-size(12px, false);
    }

    This will yield:

    .foo {
        font-size: 12px;
        font-size: 0.75rem;
    }

    Install

    npm i aleut.tools.mixins

    DownloadsWeekly Downloads

    0

    Version

    1.0.2

    License

    Apache-2.0

    Last publish

    Collaborators

    • hauken
    • kmelve
    • robrobro