campfire-heights

campfire.css CSS module for setting heights

Installation

With npm

npm install --save-dev campfire-heights

With Git

http:

git clone https://github.com/campfire-css/campfire-heights

ssh:

git clone [email protected]:campfire-css/campfire-heights.git

Usage

Using with PostCSS

Import the css module

@import "campfire-heights";

The CSS

/*

    campfire.css
    HEIGHTS
    https://github.com/campfire-css/campfire-heights

    Legend:
        height-1 = 8px
        height-2 = 16px
        height-3 = 24px
        height-4 = 32px
        height-5 = 40px
        height-6 = 48px
        height-7 = 56px
        height-8 = 64px
        height-9 = 72px
        height-10 = 80px
        height-11 = 88px
        height-12 = 96px
        height-13 = 104px
        height-14 = 112px
        height-15 = 120px
        height-16 = 128px
        height-17 = 136px
        height-18 = 144px
        height-19 = 152px
        height-20 = 160px

        viewport-height-1: 25vh
        viewport-height-2: 50vh
        viewport-height-3: 75vh
        viewport-height-4: 100vh

*/


:root {

    --base-height: 8px;

    --height-1: var(--base-height);
    --height-2: calc( var(--base-height) * 2 );
    --height-3: calc( var(--base-height) * 3 );
    --height-4: calc( var(--base-height) * 4 );
    --height-5: calc( var(--base-height) * 5 );
    --height-6: calc( var(--base-height) * 6 );
    --height-7: calc( var(--base-height) * 7 );
    --height-8: calc( var(--base-height) * 8 );
    --height-9: calc( var(--base-height) * 9 );
    --height-10: calc( var(--base-height) * 10 );
    --height-11: calc( var(--base-height) * 11 );
    --height-12: calc( var(--base-height) * 12 );
    --height-13: calc( var(--base-height) * 13 );
    --height-14: calc( var(--base-height) * 14 );
    --height-15: calc( var(--base-height) * 15 );
    --height-16: calc( var(--base-height) * 16 );
    --height-17: calc( var(--base-height) * 17 );
    --height-18: calc( var(--base-height) * 18 );
    --height-19: calc( var(--base-height) * 19 );
    --height-20: calc( var(--base-height) * 20 );

    --viewport-height-1: 25vh;
    --viewport-height-2: 50vh;
    --viewport-height-3: 75vh;
    --viewport-height-4: 100vh;

}

Contributing

1. Fork it
2. Create your feature branch (git checkout -b my-new-feature)
3. Commit your changes (git commit -am 'Add some feature')
4. Push to the branch (git push origin my-new-feature)
5. Create new Pull Request

Authors

• sgraewe

License

ISC