1.0.0-beta • Published 7 years ago

fuux v1.0.0-beta

Weekly downloads
30
License
MIT
Repository
github
Last release
7 years ago

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

alt tag

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="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

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!