[UNDER DEVELOPMENT]

Fuux

This is a Flexbox library to structure html templates easily!

Motivation

I like the Angular Material library and the approach using directives based on Flexbox, is amazing really. But sometimes we can't to use Angular Material, because sometimes we should to use another library or template. Thinking about that, I have created this library to independently which template we've to use, we'll can to use Flexbox semanticly and easily, into any project. \o/

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 flex-boy

Get started

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

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

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

</div>

The result is:

The code above you can see here.

Documentation

Basic

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

The basic structure to do anything with this library is:

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

API Reference

All Fuux's classes always starts with flex prefix.

Directions

flex-column

   flex-direction: column

flex-row

   flex-direction: row

Wrap

flex-wrap

    flex-wrap: wrap 

Alignment

flex-start or flex-start-start

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

flex-start-center

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

flex-start-end

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

flex-center-start

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

flex-center or flex-center-center

   justify-content: center
   align-items: center

flex-center-end

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

flex-end-start

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

flex-end-center

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

flex-end or flex-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:

flex-5

    flex-basis: 5%

Or

flex-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:

flex-[responsive prefix]-[property]

flex-md-center

Responsive Table

Prefix	<= 767px	>= 768px	>= 768px and <= 991px	>= 992px	>= 992px and <= 1199px	>= 1200px
xs	V	X	X	X	X	X
sm	X	V	V	V	V	V
smx	X	X	V	X	X	X
md	X	X	X	V	V	V
mdx	X	X	X	X	V	X
lg	X	X	X	X	X	V

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!