fuux v1.0.0-beta
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
andflex-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:
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!
7 years ago