Typographical grid plugin
Here’s a snippet I wrote the other day that overlays the page with a typographical/layout grid when activated. Others exist, but very few, and not with the functionality I wanted, so there’s room for another.
I made it into a jQuery plugin simply to make it clear it’s dependent on jQuery: It’s not suitable for chaining (which apparently makes it a “utility plugin“).
Also, I’ve namespaced it as the rather vague ‘devTools’ in order to allow me to possibly add more tools to the plugin later while maintaining backwards compatibility. Hope you find a use for it!
Usage
Activation
$.devTools.grid( [columns], [column width (px)], [column margins (px)], {[optional configuration]} );
Optional configuration
Key | Notes | Example | Default |
---|---|---|---|
qs | Value of query string value to look for if grid is to be activated that way. false leads the grid to be shown on load. | ‘grid=true’ | false |
id | The id used for the div containing the columns. | ‘myGridContainer’ | ‘browserToolsGrid’ |
container | the element the grid is to be appended to. | ‘#myContent’ | ‘body’ |
center | A boolean stating whether your website is centered. | true | false |
color | the colour of the grid. rgba is best so you can see through the grid. | ‘rgba(200, 200, 100, 0.3)’ | ‘rgba(204, 243, 204, 0.3)’ |
textColor | the colour of the info text. | ‘#ccc’ | ‘#aaa’ |
outerMargins | Use far left and far right margins | true | false |
toggle | Show the toggle button. | false | true |
Example
Centered site, activated by adding ‘grid’ to the query string
$(function () { $.devTools.grid(16, 45, 15, { center:true, qs:'grid' }); });
More complex example
A double grid (with sub columns), shown by default.
$.devTools.grid(6, 158, 2 , { hideToggle: true }); $.devTools.grid(6, 98, 62 , { hideText: true });
The comments are closed.