gridel

A system that allows the creation of pixel (columns, rows) perfect layout

Usage no npm install needed!

<script type="module">
  import gridel from 'https://cdn.skypack.dev/gridel';
</script>

README

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