@brikcss/spacing

    0.0.1 • Public • Published

    Brikcss Spacing

    NPM version NPM downloads per month Travis branch NPM version Coverage Status Commitizen friendly semantic release code style: prettier

    Spacing component to make creating spacing variables and classes in CSS easier.


    Environment and browser support

    Node CLI UMD ES Module Browser
    x x x x
    Chrome Firefox Safari Edge IE iOS Android
    11

    * Note: Since CSS Variables are used, IE11 is supported with the use of a custom variables polyfill, such as postcss-var-shim.

    Install

    1. Install from NPM:

      npm i -D @brikcss/spacing
    2. Include desired file(s) in your app:

      • ./dist/colors.init.css and ./dist/colors.init.min.css are precompiled with PostCSS. Include one of these to accept all defaults.
      • ./src/colors.init.css is the source CSS. Use this as an example, with the spacing mixin, to generate your own custom classes.
      • ./src/mixins/spacing.js is the spacing mixin. Use this to generate your own custom classes.

    Spacing mixin usage

    The colors mixin allows you to generate your own custom color variables and classes in one easy step. See postcss-mixins for documentation on how to configure and use PostCSS mixins.

    Syntax and options

    @mixin spacing <separator = '-'>, <important = 'true'> {
    	/* Mixin properties go here (see example). */
    }
    • separator {String} (-) Character separator in the rule selector.
    • important {Boolean} (true) Whether to mark rule declarations as !important.

    Example

    Sample input:

    @mixin spacing {
    	/* Values to create base and variation classes for. */
    	values: 1rem 2rem;
    	/* Properties. Must include one or more of `padding`, `margin`. The value is used in its selectors. */
    	padding: p;
    	margin: m;
    	/* Variations (optional). All possible variations are below. You can include/exclude any or all of them. The value is used in its selectors. */
    	top: t;
    	bottom: b;
    	left: l;
    	right: r;
    	horizontal: x;
    	vertical: y;
    }

    Output:

    /* Auto-generated classes. */
    
    .p-1 {
        padding: 1rem !important
    }
    
    .pt-1 {
        padding-top: 1rem !important
    }
    
    .pb-1 {
        padding-bottom: 1rem !important
    }
    
    .pl-1 {
        padding-left: 1rem !important
    }
    
    .pr-1 {
        padding-right: 1rem !important
    }
    
    .px-1 {
        padding-left: 1rem !important;
        padding-right: 1rem !important
    }
    
    .py-1 {
        padding-top: 1rem !important;
        padding-bottom: 1rem !important
    }
    
    .p-2 {
        padding: 2rem !important
    }
    
    .pt-2 {
        padding-top: 2rem !important
    }
    
    .pb-2 {
        padding-bottom: 2rem !important
    }
    
    .pl-2 {
        padding-left: 2rem !important
    }
    
    .pr-2 {
        padding-right: 2rem !important
    }
    
    .px-2 {
        padding-left: 2rem !important;
        padding-right: 2rem !important
    }
    
    .py-2 {
        padding-top: 2rem !important;
        padding-bottom: 2rem !important
    }
    
    .m-1 {
        margin: 1rem !important
    }
    
    .mt-1 {
        margin-top: 1rem !important
    }
    
    .mb-1 {
        margin-bottom: 1rem !important
    }
    
    .ml-1 {
        margin-left: 1rem !important
    }
    
    .mr-1 {
        margin-right: 1rem !important
    }
    
    .mx-1 {
        margin-left: 1rem !important;
        margin-right: 1rem !important
    }
    
    .my-1 {
        margin-top: 1rem !important;
        margin-bottom: 1rem !important
    }
    
    .m-2 {
        margin: 2rem !important
    }
    
    .mt-2 {
        margin-top: 2rem !important
    }
    
    .mb-2 {
        margin-bottom: 2rem !important
    }
    
    .ml-2 {
        margin-left: 2rem !important
    }
    
    .mr-2 {
        margin-right: 2rem !important
    }
    
    .mx-2 {
        margin-left: 2rem !important;
        margin-right: 2rem !important
    }
    
    .my-2 {
        margin-top: 2rem !important;
        margin-bottom: 2rem !important
    }
    <style type="text/css"> @media (min-width: 768px) { pre { max-height: 60vh; } } </style>

    Install

    npm i @brikcss/spacing

    DownloadsWeekly Downloads

    8

    Version

    0.0.1

    License

    none

    Unpacked Size

    20.8 kB

    Total Files

    6

    Last publish

    Collaborators

    • thezimmee