Author: | vladocar |
---|---|
Views Total: | 729 views |
Official Page: | Go to website |
Last Update: | May 30, 2018 |
License: | MIT |
Preview:

Description:
Yet another CSS framework to create a responsive, justified/fluid grid of elements using CSS flexbox. Just weights in 0.3kb (minified) and super flexible.
Also features customizable main width, gutter, nested columns and more.
How to use it:
Install & download the flexy.
# NPM $ npm install @vladocar/flexy --save
Import the flexy into your project or directly include the flexy.css
on the html page.
<link rel="stylesheet" href="flexy.css">
The example HTML to create a grid layout.
<div class="dp100">100%</div> <div class="dp50">50%</div> <div class="dp50">50%</div> <div class="dp33">33,3%</div> <div class="dp33">33,3%</div> <div class="dp33">33,3%</div> <div class="dp25">25%</div> <div class="dp25">25%</div> <div class="dp25">25%</div> <div class="dp25">25%</div> <div class="dp20">20%</div> <div class="dp20">20%</div> <div class="dp20">20%</div> <div class="dp20">20%</div> <div class="dp20">20%</div> <div class="dp17">16,66%</div> <div class="dp17">16,66%</div> <div class="dp17">16,66%</div> <div class="dp17">16,66%</div> <div class="dp17">16,66%</div> <div class="dp17">16,66%</div> <div class="clear"></div> <div class="dp12">12,5%</div> <div class="dp12">12,5%</div> <div class="dp12">12,5%</div> <div class="dp12">12,5%</div> <div class="dp12">12,5%</div> <div class="dp12">12,5%</div> <div class="dp12">12,5%</div> <div class="dp12">12,5%</div> <div class="clear"></div> <div class="dp12">12,5%</div> <div class="dp12">12,5%</div> <div class="fluid">Fluid</div> <div class="dp12">12,5%</div> <div class="fluid">Fluid</div> <div class="clear"></div> <div class="fluid">Fluid</div> <div class="dp25">25%</div> <div class="fluid">Fluid</div> <div class="clear"></div> <div class="fluid">Fluid</div> <div class="dp25">25%</div> <div class="dp25">25%</div> <div class="fluid">Fluid</div> <div class="clear"></div> <div class="dp25">25%</div> <div class="dp25">25%</div> <div class="fluid">Fluid</div> <div class="clear"></div> <div class="dp25">25%</div> <div class="fluid">Fluid</div> <div class="dp17">17%</div> <div class="clear"></div>