Float: left Based Responsive CSS Layout – floaty.css

Preview:

Description:

The floaty.css library helps web developers to create a cross-browser responsive layout based on CSS float: left property.

How to use it:

Install & download the package via NPM.

# NPM
$ npm install floatycss --save

Import the floaty.css into the document.

<link rel="stylesheet" href="floaty.css">

Or from the CDN.

<link rel="stylesheet" href="https://unpkg.com/floatycss/floaty.css">

Create layout items on the webpage.

<div class="p100"><h1>Floaty CSS Layout Demo</div>
<div class="p50">50%</div>
<div class="p50">50%</div>
<div class="p33">33,3%</div>
<div class="p33">33,3%</div>
<div class="p33">33,3%</div>
<div class="p25">25%</div>
<div class="p25">25%</div>
<div class="p25">25%</div>
<div class="p25">25%</div>
<div class="p20">20%</div>
<div class="p20">20%</div>
<div class="p20">20%</div>
<div class="p20">20%</div>
<div class="p20">20%</div>
<div class="p17">16,66%</div>
<div class="p17">16,66%</div>
<div class="p17">16,66%</div>
<div class="p17">16,66%</div>
<div class="p17">16,66%</div>
<div class="p17">16,66%</div>

<div class="p12">12,5%</div>
<div class="p12">12,5%</div>
<div class="p12">12,5%</div>
<div class="p12">12,5%</div>
<div class="p12">12,5%</div>
<div class="p12">12,5%</div>
<div class="p12">12,5%</div>
<div class="p12">12,5%</div>

<div class="p17">17%</div>
<div class="p83">83%</div>

<div class="p50">50%</div>
<div class="p25">25%</div>
<div class="p25">25%</div>