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
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 grids expand to large screens easier than large grids cram into small screens.
Medium sized screens will inherit styles from small, unless you specify a different layout, using the medium grid classes.
Move blocks up to 11 columns to the right by using classes like .large-offset-1 and .small-offset-3.
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.
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.
Authors and Contributors
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.