FFolders(v1.0.0)

Simple, clean and beautiful folders implemented only with CSS. Available in 3 sizes and 5 colors (but customizable of course).
Download them and use them (only 4 kb).

Small/Basic

<div class="ffolder small cyan"></div>

Small/with labels

<div class="ffolder small cyan">
    <span>24 Files</span>
</div>

Small/with icons (Font Awesome)

<div class="ffolder small cyan">
    <i class="fa fa-behance"></i>
</div>

Medium (Basic/with labels/with icon)

<div class="ffolder medium gray">
    <i class="fa fa-dropbox"></i>
</div>

Big

<div class="ffolder big pink">
    <span>37 Files</span>
</div>

Big/With icons

<div class="ffolder big gray">
    <i class="fa fa-github"></i>
</div>

---

Getting started

Download or clone the project from github:
https://github.com/jlizanab/FFolders
and add it to your project directly as any CSS library:

<!-- Latest compiled and minified CSS -->
<link href="css/ffolders.min.css" rel="stylesheet">

---

SASS Mixin

The latest version includes a SASS Mixin: (ffolders.scss).
how to use in a SASS file:

/*how-to use ffolder Sass Mixin*/

.folder_style1 { 
  @include ffolder($small, $pink); 
}


.folder_style2 { 
  @include ffolder($medium,$yellow);  
}


.folder_custom { 
  @include ffolder(200px, #A192C3); 
}