gridel
v0.0.25
Published
A system that allows the creation of pixel (columns, rows) perfect layout
Downloads
131
Maintainers
milewskiReadme
gridel
Notice
This is a work in progress, the API and overall flow are subject to change, more come soon.
Install
- Create a file called
.gridelrcin your project root. See the config documentation or an example config for help. - 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:
- Run command
npm install gridel --save-dev. - Add
scripts: { "build": "gridel" }in yourpackage.json. - Run command
npm run build.
- Run command
- If you want to build once, run command
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:
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