Minimal CSS Layout Framework Based On Flexbox – flexy

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>