Version 1.3.0
jQuery.devgrid serves two purposes. It is useful for the visualization of responsive site grids while providing the means for tracking which breakpoints are active in your frontend code.
Wil Neeley ( @wilneeley / puppetlabs.com / github.com )
Include jquery.devgrid.min.js after jQuery in your header or elsewhere on your page.
// Basic jQuery.devgrid initialization
$('body').devgrid({
columns: 12,
columnWidth: '40px',
gutterWidth: '20px',
visible: true
});
When you have no need to see your site's breakpoint visualizations but still would like to have the <body> element of
your site updated with the data-devgrid-bp attribute so you can track which breakpoint is active
programmatically, do the following:
// jQuery.devgrid initialization w/o visualization
$('body').devgrid({
columns: 12,
columnWidth: '40px',
gutterWidth: '20px',
visible: false
});
This can be useful in cases where you're using code which should respond at different breakpoints. Tracking the value of
the data-devgrid-bp attribute can provide just the feedback you need to fire your code when you need to to
match your media queries.
If you don't need to track your current active breakpoint in code you can disable tracking as follows:
// jQuery.devgrid initialization w/o tracking
$('body').devgrid({
columns: 12,
columnWidth: '40px',
gutterWidth: '20px',
visible: true,
track: false
});
Centering the overlay on screen is as simple as applying a max-width to the gridStyle properties object.
// jQuery.devgrid initialization with only info box
$('body').devgrid({
columns: 12,
columnWidth: '40px',
gutterWidth: '20px',
visible: true
gridStyle: {
'max-width': '960px'
}
});
You can also easily swap the order of gutters relative to columns.
// Toggled gutter
$('body').devgrid({
columns: 16,
columnWidth: '40px',
gutterWidth: '20px',
visible: true,
track: true,
toggleGutter: true
});
Some gutter systems have half of the gutter space on each side of the columns.
// Distributed Gutter
$('body').devgrid({
columns: 16,
columnWidth: '40px',
gutterWidth: '20px',
visible: true,
track: true,
distributeGutter: true
});
Want to use percentage based gutters on your fluid site? No problem.
// Distributed Gutter
$('body').devgrid({
columns: 16,
columnWidth: '40px',
gutterWidth: '1.6%',
visible: true,
track: true
});
It's often handy to visualize your major breakpoints such as mobile, tablet, etc.
// Draw breakpoints
$('body').devgrid({
columns: 24,
columnWidth: '40px',
gutterWidth: '20px',
visible: true,
track: true,
gridStyle: {
'max-width': '1440px'
},
breakpoints: [
{
bp: '480px',
tag: 'Mobile',
css: {
background: 'rgba(85,98,112, 0.4)'
}
},
{
bp: '780px',
tag: 'Tablet',
css: {
background: 'rgba(78,205,196, 0.4)'
}
},
{
bp: '960px',
tag: 'Desktop',
css: {
background: 'rgba(199,244,100, 0.4)'
}
},
{
bp: '1440px',
tag: 'Wide',
css: {
background: 'rgba(255,107,107, 0.4)'
}
}
]
});
It's easy to alter any of the styles of the DevGrid Visualization you want.
// jQuery.devgrid initialization w/ style alterations
$('body').devgrid({
columns: 12,
columnWidth: '40px',
gutterWidth: '20px',
visible: true,
gridStyle: {
opacity: 0.4
},
columnStyle: {
background: 'green'
},
numBoxStyle: {
'font-size': '16px',
'line-height': '18px',
color: 'red'
},
infoBoxStyle: {
background: 'black',
color: 'white'
}
});
During development it is sometimes useful to have the ability to easily hide and show the DevGrid visualization via the console. The below helper methods will allow you to do just that.
// Hide the DevGrid Visualization
$.fn.devgrid('hide');
// Hide the DevGrid Visualization
$.fn.devgrid('show');
// Toggle the DevGrid's visibility
$.fn.devgrid('toggle');
When using jQuery.devgrid in your production code make sure you have disabled the DevGrid Visualization by either
initializing your dev grid with a visible property of false or by hiding your visualization manually somewhere in
your code.
// DevGrid initialized with `visible` property set to `false`
$('body').devgrid({
columns: 12,
columnWidth: '40px',
gutterWidth: '20px',
visible: false,
track: true
});
// Manually hide the DevGrid Visualization
$.fn.devgrid('hide');
Tested with jQuery 1.7.x+.
Works in browsers that support CSS calc() functionality.
See test.html in tests directory.
- added support for percentage based gutters
- removed horizontal grid visualization and tracking
- increased efficiency
- added horizontal grid visualization and tracking
- added grid toggle ui control
- initial release