Neighbour Problem Manager

    gridel

    0.0.25 • Public • Published

    gridel

    npm version npm downloads dependencies Greenkeeper badge

    Notice

    This is a work in progress, the API and overall flow are subject to change, more come soon.

    Install

    1. Create a file called .gridelrc in your project root. See the config documentation or an example config for help.
    2. Determine how you want your grid built:
      • If you want to build once, run command npx gridel.
      • If you want to add the grid building to your project’s build process:
        1. Run command npm install gridel --save-dev.
        2. Add scripts: { "build": "gridel" } in your package.json.
        3. Run command npm run build.

    Your SCSS files will be generated into the path specified into the config file.

    Usage

    The gridel prefix can be customized in your configuration file.

    Sample HTML Markup

    <body>
    <section class="gridel-container gridel-grid">
        <div class="header">
            <h1>Why don't you try Gridel?</h1>
            <small>it's very easy to use and setup</small>
        </div>
        <div class="content gridel-padding--horizontal">
            <p>Lorem ipsum ...</p>
        </div>
    </section>
    </body>

    Sample SCSS(SASS)

    body {
        color: white;
        font-family: sans-serif;
        > section > div {
            background: crimson;
        }
    }
     
    .header {
        grid-column: 4 / span 6;
        grid-row: 5 / span 4;
        text-align: center;
        h1 {
            @include baseline(2, $skip: 1) 
        }
        small {
            @include baseline(1) 
        }
    }
     
    .content {
        grid-column: 4 / span 6;
        grid-row: 10 / span 5;
        text-align: justify;
        p {
            @include baseline(1) 
        }
    }

    This will output:

    Demo Screenshot

    Note: the grid is provided by another package designed to work in conjunction with gridel https://github.com/milewski/css-gridish-grid

    Inspiration

    This project was heavily inspired at css-gridish

    License

    MIT © Rafael Milewski

    Install

    npm i gridel

    DownloadsWeekly Downloads

    5

    Version

    0.0.25

    License

    MIT

    Unpacked Size

    15.7 kB

    Total Files

    9

    Last publish

    Collaborators

    • milewski