Skip to content

Instantly share code, notes, and snippets.

@marcaube
Created March 26, 2012 14:01
Show Gist options
  • Save marcaube/2205275 to your computer and use it in GitHub Desktop.
Save marcaube/2205275 to your computer and use it in GitHub Desktop.
Twitter Bootstrap Heads-Up Grid
definegrid = function() {
var browserWidth = $(window).width();
// LARGE DESKTOP & UP
if (browserWidth >= 1200)
{
pageUnits = 'px';
colUnits = 'px';
pagewidth = 1170;
columns = 12;
columnwidth = 70;
gutterwidth = 30;
pagetopmargin = 35;
rowheight = 20;
makehugrid();
$('#hugrid').css('left', '50%');
$('#hugrid').css('margin-left', -1170/2);
}
// DEFAULT DESKTOP
if (browserWidth >= 980 && browserWidth < 1200)
{
pageUnits = 'px';
colUnits = 'px';
pagewidth = 940;
columns = 12;
columnwidth = 60;
gutterwidth = 20;
pagetopmargin = 35;
rowheight = 20;
makehugrid();
$('#hugrid').css('left', '50%');
$('#hugrid').css('margin-left', -940/2);
}
// PORTRAIT TABLET TO DEFAULT DESKTOP
if (browserWidth >= 768 && browserWidth < 980){
pageUnits = 'px';
colUnits = 'px';
pagewidth = 724;
columns = 12;
columnwidth = 42;
gutterwidth = 20;
pagetopmargin = 35;
rowheight = 20;
makehugrid();
$('#hugrid').css('left', '50%');
$('#hugrid').css('margin-left', -724/2);
}
// PORTRAIT/LANDSCAPE PHONE TO SMALL DESKTOP & PORTRAIT TABLET
if (browserWidth <= 767)
{
pageUnits = 'px';
colUnits = 'px';
pagewidth = browserWidth - 40;
columns = 2;
columnwidth = (browserWidth - 60)/2;
gutterwidth = 20;
pagetopmargin = 35;
pageleftmargin = 20;
pagerightmargin = 20;
rowheight = 20;
makehugrid();
}
}
$(document).ready(function() {
definegrid();
setgridonload();
});
$(window).resize(function() {
definegrid();
});
@sami3d
Copy link

sami3d commented May 30, 2014

life saver //// thanks a lot ////

@mayersdesign
Copy link

Thanks very much again! Arrived back here when I needed to Bootstrap 3 it ;) Saved me (more!) time :)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment