Minimal CSS Layout Framework Based On Flexbox – flexy

Category: CSS & CSS3 , Layout , Recommended | May 30, 2018
Author: vladocar
Views Total: 1,063
Official Page: Go to website
Last Update: May 30, 2018
License: MIT

Preview:

Minimal CSS Layout Framework Based On Flexbox – flexy

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>

You Might Be Interested In:


Leave a Reply