Is very simple, responsive grid system that you can use in your projects. Any style, any design. Just grid!
The basis of the grid is a container with a width of 80% of the width of the screen for desktop or 96% for mobile. This container is divided into 12 columns. So no matter what device, your website will be broad at 80% or 96%. Always!
Grid is not a complicated structure. Already after a few moments you will learn it through.
This is just a simple grid ensuring responsiveness uncomplicated projects.
Simply Grid operates on two hops, only. >768<480 and <480.
Simply Grid supports all browsers support media queries.
Class .box has the default paddings set to 20px.
Look to the examples for applying these principles to your code.
We provide psd file with a grid built on the width of 1366px, development versions and minified CSS and HTML file ready to use.
Once downloaded, unzip the compressed folder. You'll see something like this:
As you can see the structure provided by our index.html file contains all the components needed to start working on the project.
Paste code and enjoy the simple responsive navigation!
For the three columns layout, create a .row and add the Appropriate number of .col-* columns. As this is a 12-column grid. Columns should always add up to 12 for each .row. If you need the distance from the edge of the column, use the class .box.
Columns can be moved to the right by class .col-offset-*. Each class Increases the left margin of a column to a whole column .col-offset-* below 768px width disappears.
To nest your content with the default grid, add a new .row and set of .col-* columns within an existing .col-* column.
Psd file will get adapted to Simple Grid grid system.
You will simple reset the default browser styles.
You will get your simple-grid.css, where you will find all the classes that form the system.
You will receive a simple, html file ready to work.