https://github.com/henriquecustodia/fuux
:cyclone: :sunglasses: flexbox library to create amazing layouts
https://github.com/henriquecustodia/fuux
css flexbox flexbox-library
Last synced: about 1 year ago
JSON representation
:cyclone: :sunglasses: flexbox library to create amazing layouts
- Host: GitHub
- URL: https://github.com/henriquecustodia/fuux
- Owner: henriquecustodia
- License: mit
- Created: 2016-12-06T10:31:20.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2018-10-22T21:41:10.000Z (over 7 years ago)
- Last Synced: 2025-01-20T09:41:30.160Z (over 1 year ago)
- Topics: css, flexbox, flexbox-library
- Language: CSS
- Homepage:
- Size: 130 KB
- Stars: 9
- Watchers: 1
- Forks: 0
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-flexbox - Fuux - Fuux is a Flexbox library that uses the same flexbox interface like classes. (Libraries and Frameworks / [Sketching with CSS](http://www.sketchingwithcss.com) Flexbox Guide by [@sfioritto](https://github.com/sfioritto))
README
# Fuux
:cyclone: :sunglasses: 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](https://github.com/postcss/autoprefixer)
## How to install
``npm install --save fuux``
## Get started
```html
Sidenav
Toolbar
Content
```
The result is:
> The code above you can see [here](https://github.com/henriquecustodia/flex-boy/blob/master/examples/basic.html).
## Documentation
### Basic
**Fuux** is purely [Flexbox](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes), so everything you can do with Flexbox, you can do with Fuux!
The basic structure to do anything:
```html
```
### API Reference
All Fuux's classes always starts with `fx` prefix.
#### Directions
##### ``fx-column``
```css
flex-direction: column
```
##### ``fx-row``
```css
flex-direction: row
```
#### Wrap
##### ``fx-wrap``
```css
flex-wrap: wrap
```
#### Alignment
##### ``fx-start`` or ``fx-start-start``
```css
justify-content: flex-start
align-items: flex-start
```
##### ``fx-start-center``
```css
justify-content: flex-start
align-items: center
```
##### ``fx-start-end``
```css
justify-content: flex-start
align-items: flex-end
```
##### ``fx-center-start``
```css
justify-content: center
align-items: flex-start
```
##### ``fx-center`` or ``fx-center-center``
```css
justify-content: center
align-items: center
```
##### ``fx-center-end``
```css
justify-content: center
align-items: flex-end
```
##### ``fx-end-start``
```css
justify-content: flex-end
align-items: flex-start
```
##### ``fx-end-center``
```css
justify-content: flex-end
align-items: center
```
##### ``fx-end`` or ``fx-end-end``
```css
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``
```css
flex-basis: 5%
```
Or
##### ``fx-100``
```css
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!