bulma-helper-spacing

    0.0.3 • Public • Published
    Bulma's logo

    A simple spacing helper to use with Bulma! It provides spacing utilities using margin and padding like Bootstrap does.

    In order to work, bulma-helper-spacing is using rem for sizing. margin-1 will be equivalent to margin: 1rem;

    Prerequisites

    You must use Bulma as a dependency.

    $ npm install bulma

    Attention : Be sure to include base/_all.sass or at least utilities/mixins.sass and *-variables.sass (because spacing is generated with the following breakpoints taken from Bulma) :

    • tablet
    • desktop
    • fullhd

    Installation

    Available on NPM

    $ npm install bulma-helper-spacing

    Usage

    // Import only what you need from Bulma 
    @import './node_modules/bulma/sass/utilities/initial-variables.sass'; // required 
    @import './node_modules/bulma/sass/utilities/derived-variables.sass'; // required 
    @import './node_modules/bulma/sass/utilities/mixins'; // required 
    // @import "../../node_modules/bulma/sass/base/_all.sass"; // avoid including everything from Bulma, we should use its modularity ;-) 
     
    // Bulma spacing helper 
    @import "../../node_modules/bulma-helper-spacing/spacing";
     
    // Do your magic here :) 

    Documentation

    Use these classes to generate spacing for margins and paddings. All generated CSS classes are using Bulma's writing style.

    has-{property}-{sides}(-{size})(-{breakpoint})
    • Property : margin, padding
    • Sides (optional) : , x, y, top, bottom, left, right
    • Size : 0, 1, 2, 3, 4, 5, 6, 7, 8
    • Breakpoint (optional) : , tablet, desktop, fullhd

    Examples

    <!-- Padding -->
    <div class="has-padding-left-0"></div>
    <div class="has-padding-5"></div>
    <div class="has-padding-x-0 has-padding-top-8-desktop"></div>
     
    <!-- Margin -->
    <div class="has-margin-y-3"></div>
    <div class="has-margin-5 has-margin-0-desktop"></div>

    Install

    npm i bulma-helper-spacing

    DownloadsWeekly Downloads

    29

    Version

    0.0.3

    License

    ISC

    Unpacked Size

    5.49 kB

    Total Files

    5

    Last publish

    Collaborators

    • dinath