flexbox library to create amazing layouts
MIT License
🌀 😎 flexbox library to create amazing layouts
flex-direction
, justify-content
, align-items
, flex-wrap
and flex-basis
.
npm install --save fuux
<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.
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>
All Fuux's classes always starts with fx
prefix.
fx-column
flex-direction: column
fx-row
flex-direction: row
fx-wrap
flex-wrap: wrap
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
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%
Fuux uses prefixes to manage which classes should be used for each resolution.
Add the responsive prefix to the classes to use on specific resolution, for example:
fx-[responsive prefix]-[property]
fx-md-center
To run the Fuux on your machine:
npm install
gulp
Contributions is very welcome. If you want to contribute just follow the steps:
Enjoy!