Today, I come back here to share a new project I have made these last days:
This is a extremly lightweight CSS grid system allowing you to quickly start a project by integrating a css responsive grid.
It is composed of a RESET part of CSS so you should place it before your own css stylesheet and the grid system.
You will be able to create a grid by specifying how many columns you want. This grid will be displayed normally on a computer screen and each box will be on a line on a mobile screen. It is possible to force the grid to display as you write it on mile screens.
<div class="z-grid"> <div class="z-2"> <div class="z-box"> <p>box-1</p> </div> <div class="z-box"> <p>box-2</p> </div> </div> </div>
(if you use emmet, you will be able to type this code very fast!)
Here, there will be a grid with 2 boxes per lines.
On computer screen (>768px) : both are on one line.
On smartphone screen (< 768px) : each box is on a different line.
Everything is explained HERE
This project is intended to evolve, but it is fully functionnal today.
Share, fork, pull request it if you like my work :)