Useful Responsive Grid
A responsive grid developed in SASS for use as a base in web projects. Ready for all devices (computers, laptops, tablets and smartphones) and any kind of display.
Step 1: Download hey grid files by using any of the methods below.
Git:
git clone git@github.com:siancore/heygrid.git
Bower:
bower install --save heygrid
Step 2: Include hey grid files.
Inside of <head> of the HTML document
<link type="text/css" rel="stylesheet" href="css/hey-grid.css">or inside style sheets
@import url("css/hey-grid.css");##Configuration
Step 3: Compress HTML, this grid is made using css potential and goods. It is important to compress the HTML document and remove any whitespace between tags.
You can do this in several ways, depending on the language you use.
Django, Twig Symfony
{% spaceless %}
<body>
# Code
</body>
{% endspaceless %}PHP
function spaceless($buf){
return str_replace(array("\n","\r","\t"),'',$buf);
}html - Javascript: After tag body
<script>document.body.innerHTML = document.body.innerHTML.replace(/>\s+</g, "><");</script>##Quick test
Step 4: Testing everything is ok.
If you did the steps above and want to know quickly if the Grid is correctly configured, simply paste the following HTML code after <body> tag.
HTML
<section class="grid-columns" heygrid-debug>
<div class="cols-4"></div>
<div class="cols-8"></div>
</section>##Using Columns
####Two Columns:
<section class="grid-columns" heygrid-debug>
<div class="cols-3"></div>
<div class="cols-9"></div>
</section>
<section class="grid-columns" heygrid-debug>
<div class="cols-6"></div>
<div class="cols-6"></div>
</section>####Three Columns:
<div class="grid-columns" heygrid-debug>
<div class="cols-9"></div>
<div class="cols-2"></div>
<div class="cols-1"></div>
</div>
<div class="grid-columns" heygrid-debug>
<div class="cols-7"></div>
<div class="cols-3"></div>
<div class="cols-2"></div>
</div>####Four Columns:
<div class="grid-columns" heygrid-debug>
<div class="cols-3"></div>
<div class="cols-5"></div>
<div class="cols-2"></div>
<div class="cols-2"></div>
</div>
<div class="grid-columns">
<div class="cols-5"></div>
<div class="cols-4"></div>
<div class="cols-2"></div>
<div class="cols-1"></div>
</div>##Using layouts
<div class="grid-layout" heygrid-debug>
<div class="layout-70"></div>
<div class="layout-30"></div>
</div>##Using Boxes
<div class="grid-for-5" heygrid-debug>
<div class="grid-box"></div>
<div class="grid-box"></div>
<div class="grid-box"></div>
<div class="grid-box"></div>
<div class="grid-box"></div>
<div class="grid-box"></div>
<div class="grid-box"></div>
<div class="grid-box"></div>
<div class="grid-box"></div>
<div class="grid-box"></div>
</div>