SKSAR-GRID is a simple responsive grid system for modern web design. It is different from other Grid Systems, as it does not use fixed CSS media queries, but creates them automatically as and when needed.
The very core of the grid contains a simple 12-column layout css grid, (sksar-grid.css) with no media query breaks. Then upon it styles are added dynamically using javascript (sksar-grid.js)..
First import the "sksar-grid.css" file into the head section of your html page,
Secondly import the "sksar-grid.js" file at the end of the page,
Thats it..
Now you can enjoy creating grids using the following syntax,
<div class="col col-{min_value}-{max_value}"> {columns} </div>
Where {min_value} is the minimum browser width (in px), smaller than which the grid breaks,
and {max_value} is the maximum browser width (in px), greater than which the grid breaks again..
Note: The col-XXX-XXX is the class name javascript is looking for;
When it finds such a class, it creates the appropriate css "@media" rules at the end of the page..
Example: col-480-1900, col-600-800, col-600-0, col-320-800
Note: To skip a value set it to zero, but remember that {min_value} should be less that {max_value}, but not in the case of zero..
1) Breaks when browser's width is less than 480px and greater than 1900px..
<div class="col col-480-1900"> {columns} </div>
2) Breaks when browser's width is less than 800px and greater than 1500px..
<div class="col col-800-1500"> {columns} </div>
3) Breaks when browser's width is only less than 800px, no maximum value given so it's set to zero..
<div class="col col-800-0"> {columns} </div>
Much like other Responsive Grid Systems, sksar-grid also has a 12 column layout,
With classes starting from ".col-1" to ".col-12"
sksar-grid is licensed under the Creative Commons Attribution-NoDerivatives 4.0 International (CC BY-ND 4.0) License
Made by Soumya Kanti Sar