About

This project is still very new and for now it is only a grid system. I have plans on making it better and better and I'm counting on the community to collaborate with this and make this awesome! If you are interested in collaborating, check the instructions below.

I based some of what was done on Zurb Foundation 5 mixins. Thanks again for a wonderful job guys.

How to install?

You can either download the entire repository or clone the repository and use the SASS files to customize it to your needs or you can download the CSS version and include it to your project.

$ cd your_folder
$ git clone https://github.com/fclaussen/Flexbox-Framework.git

DEMO

Basic

Start by adding an element of class row. This is your block to contain elements. Add elements with specific classes to define screen size and amount of columns to use. Like this: small-#, medium-#, large-#, xlarge-#, xxlarge-#. Replace # for the number of columns you would like to use.

Flexbox Framework is mobile first. Code for small screens first and larger devices will inherit those styles. Customize as necessary.

small-2 large-4
small-4 large-4
small-6 large-4
large-3
large-6
large-3
small-6 large-2
small-6 large-8
small-12 large-2
small-3
small-9
large-4
large-8
small-6 large-5
small-6 large-7
large-6
large-6

Small Grids

Small grids expand to large screens easier than large grids cram into small screens.

2 columns
10 columns
3 columns
9 columns

Medium Grids

Medium sized screens will inherit styles from small, unless you specify a different layout, using the medium grid classes.

2 columns
10 columns
3 columns
9 columns

Offsets

Move blocks up to 11 columns to the right by using classes like .large-offset-1 and .small-offset-3.

1
11
1
10, offset 1
1
9, offset 2
1
8, offset 3

Incomplete Rows

Flexbox framework will NOT float the last element to the right. If you want the last element to be aligned to the right you should offset the necessary amount to achieve that.

3
3
3
3
3
3

Reordering

Flexbox allows us to define the order of our elements regardless of the order they appear on your code. Use the order classes to manipulate your elements.

NOTICE: You cannot set only one element to a number. If you order one element you need to order all elements inside that row. If you fail to do so, the ordered element will take the last or the first positions depending on the value you choose.

1
2
3
4
5
6

Authors and Contributors

Fclaussen

How to collaborate

The project file template is pretty straight forward. The root folder holds an example html page and inside the dist folder you can find the scss files to be compiled.

If you find any bugs, you can open an issue at https://github.com/fclaussen/Flexbox-Framework/issues. If you find a bug and know how to fix it, fork the project, create a new branch, fix the problem and submit a pull request.

In your pull request, please explain the problem and your approach to fixing it. If you could provide a working example of that bug with a jsfiddle or codepen it would be great.

Support or Contact

Having trouble with this framework? Check out the documentation at https://github.com/fclaussen/Flexbox-Framework/wiki or create and issue at https://github.com/fclaussen/Flexbox-Framework/issues and me or someone else will help you sort it out.