Author: | ItsJonQ |
---|---|
Views Total: | 1,452 views |
Official Page: | Go to website |
Last Update: | October 5, 2020 |
License: | MIT |
Preview:

Description:
A pure CSS library that makes it easier to horizontally stack items in a line or to vertically stack items on top of each other using CSS flexbox.
Useful in building a modern responsive grid system without having to write complex CSS codes.
How to use it:
1. Load the main stylesheet styles.css
from the src
folder.
<link rel="stylesheet" href="./src/styles.css" />
2. Add the required CSS class ‘flex’ to your grid system.
<div class="flex"> <div>Item 1</div> <div>Item 2</div> <div>Item 3</div> </div>
3. Stack grid items horizontally.
<div class="flex hstack"> <div>Item 1</div> <div>Item 2</div> <div>Item 3</div> </div>
4. Stack grid item vertically.
<div class="flex vstack"> <div>Item 1</div> <div>Item 2</div> <div>Item 3</div> </div>
5. Add a spacer to the grid system.
<div class="flex hstack"> <div>Item 1</div> <div>Item 2</div> <div class="spacer"></div> <div>Item 3</div> </div>
6. Determine whether to auto swap between HStack and VStack for tablet/desktop:
- @md: 40em
- @lg: 60em
<div class="flex vstack hstack@md"> <div>Item 1</div> <div>Item 2</div> <div>Item 3</div> </div>