1.3.1 • Published 3 years ago
csstack v1.3.1
CSStack (Beta)
Summary
- Overview
- Working with the main containers
- Working with the grid system
- How to Install
- Classes
- Contribution
Overview
Considering Below:
<div class='stack'>
<div class='queue between'>
<div class='element'></div>
<div class='element'></div>
<div class='element'></div>
</div>
<div class='queue'></div>
<div class='queue'></div>
<div class='queue'></div>
</div>
Which compiles to:
- The 'container' element has the class 'stack', which stacks all elements inside itself.
- The 'box' elements have the class 'queue' each one, making that horizontal stacking.
- Note that it also has the 'between' class, arranging the elements inside accordingly.
- And the 'elements' are commom elements.
Working with the grid system
Working with the grid system is very based on bootstrap: It has columns from 1 to 12 and you can define it's responsiveness.
So creating something like this:
<div class='board'>
<div col-4>
<div col-4>
<div col-4>
</div>
Compiles to:
And if creates something like this:
<div class='board'>
<div col-4>
<div col-4>
<div col-8>
</div>
How to Install
Install via NPM
npm i csstack
Also you can include through jsdlivr
https://cdn.jsdelivr.net/npm/csstack@1.2.5/css/master.css
For example, in the HTML:
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/csstack@1.2.5/css/master.css'>
Classes
Containers
.stack
- Create a container which elements stack up vertically.
.queue
- Create a container which elements stack up horizontally.
Grid
.board
- Create a container which elements stack up horizontally and enable the grid line break for subsequent items until reach 12 spaces(columns).
.col-1 (col-2, col-3... col-12)
- Tells the elements to ocupy from 1 to 12 spaces in the container.
.col-m-1 (col-m-2, col-m-3... col-m-12)
- Tells the elements to ocupy from 1 to 12 spaces in the container.
- It Override previous col classes.
- Tells the elements to ocupy from 1 to 12 spaces in the container.
.col-l-1 (col-l-2, col-m-3... col-m-12)
- Tells the elements to ocupy from 1 to 12 spaces in the container.
- It Override previous col classes.
- Tells the elements to ocupy from 1 to 12 spaces in the container.
Flex Helpers
.start
- Forces flex content to start.
.center
- Forces flex content center.
.end
- Forces flex content end.
.around
- Forces flex content around.
.between
- Forces flex content between.
Contribution
Like the project? Give a star, issues, comments and pull requests are welcome.