henriquecustodia / fuux

:cyclone: :sunglasses: flexbox library to create amazing layouts

Fuux

🌀 😎 flexbox library to create amazing layouts

Features

• Writes all using just css classes
• Support to flex-direction, justify-content, align-items, flex-wrap and flex-basis.
  • support to other properties is under development.
• Support to responsive classes
• Support for autoprefixer

How to install

npm install --save fuux

Get started

<div class="green fx-column fx-15 fx-center">
    <span>Sidenav</span>
</div>
    
<div class="fx-column fx-85">

     <div class="coral fx-10 fx-center">
        <span>Toolbar</span> 
    </div>

    <div class="blue fx-90 fx-center">
        <span>Content</span> 
    </div>

</div>

The result is:

The code above you can see here.

Documentation

Basic

Fuux is purely Flexbox, so everything you can do with Flexbox, you can do with Fuux!

The basic structure to do anything:

<div class="fx-row|fx-column">
     <div class="fx-100" ></div>
</div> 

API Reference

All Fuux's classes always starts with fx prefix.

Directions

fx-column

   flex-direction: column

fx-row

   flex-direction: row

Wrap

fx-wrap

    flex-wrap: wrap 

Alignment

fx-start or fx-start-start

   justify-content: flex-start
   align-items: flex-start

fx-start-center

   justify-content: flex-start
   align-items: center

fx-start-end

   justify-content: flex-start
   align-items: flex-end

fx-center-start

   justify-content: center
   align-items: flex-start

fx-center or fx-center-center

   justify-content: center
   align-items: center

fx-center-end

   justify-content: center
   align-items: flex-end

fx-end-start

   justify-content: flex-end
   align-items: flex-start

fx-end-center

   justify-content: flex-end
   align-items: center

fx-end or fx-end-end

   justify-content: flex-end
   align-items: flex-end

Basis

The Fuux's basis are values from 5 to 100 (Multiples of five)

For example:

fx-5

    flex-basis: 5%

Or

fx-100

    flex-basis: 100%

Responsive

Fuux uses prefixes to manage which classes should be used for each resolution.

Usage

Add the responsive prefix to the classes to use on specific resolution, for example:

fx-[responsive prefix]-[property]

fx-md-center

Responsive Table

Prefix	Media
xs	(max-width: 599px)
gt-xs	(min-width: 600px)
sm	(min-width: 600px) and (max-width: 959px)
gt-sm	(min-width: 960px)
md	(min-width: 960px) and (max-width: 1279px)
gt-md	(min-width: 1280px)
lg	(min-width: 1280px) and (max-width: 1919px)
gt-lg	(min-width: 1920px)
xl	(min-width: 1920px) and (max-width: 5000px)

How to run

To run the Fuux on your machine:

npm install

gulp

Contributions

Contributions is very welcome. If you want to contribute just follow the steps:

• Fork this repository
• Make your changes :p
• Create a branch for your changes in this repository
• Create a Pull Request to your created branch as target

Enjoy!