Float: left Based Responsive CSS Layout – floaty.css

Category: CSS & CSS3 , Layout , Recommended | December 13, 2018
Author: vladocar
Views Total: 252
Official Page: Go to website
Last Update: December 13, 2018
License: MIT

Preview:

Float: left Based Responsive CSS Layout – floaty.css

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>

You Might Be Interested In:


Leave a Reply