Grid tool for iPhone web design
I started looking for a grid overlay tool much like the 960.gs for use on the iPhone. Turns out there isn’t one. At least, not one that’s comparable. There is the iPhone Unigrid as designed by Vladimir Carrer, but it’s a static grid that seems intended for single-screen apps.
The best tool I found was the 960 Gridder by Andrée Hansson which needed some tweaking to work with the iPhone. Instead of dealing with setting up a bookmarklet, it was easier to just embed the 960.gridder.js file:
<script type="text/javascript">
// Insert optional override object before the function
createGridder = function() {
document.body.appendChild(
document.createElement('script'))
.src='./gridder/960.gridder.js';
}
</script>
Then I modified the variables to match the 320px-wide* iPhone screen:
<script type="text/javascript">
var gOverride = {
urlBase: 'http://gridder.andreehansson.se/releases/latest/',
gColor: '#EE0000',
gColumns: 7, // Number of columns
gOpacity: 0.15,
gWidth: 5, // Width on each side of gutter (1/2 desired gutter width)
pColor: '#C0C0C0',
pHeight: 10, // Baseline height in px
pOffset: 0,
pOpacity: 0.55,
center: true,
gEnabled: true,
pEnabled: true,
setupEnabled: false, // Awkwardly sized for iPhones
fixFlash: false, // Not needed on iPhone
size: 280 // Adjust for gWidth overlap (subtract gWidth * 2)
};
</script>
In the above example, I set the size variable to 280px, not 320px. I wanted a 15px gutter on both sides of the layout. 320px-(15px*2) = 290px. Also, the gWidth variable (in this case, 5px) will overlap the gutter on either side, so that value needs to be subtracted as well. 290px-(gWidth*2) = 280px.
After this, we add the script to the body tag:
<body onload="createGridder()">
<!-- <body> -->
This lets you quickly enable or disable the grid by switching which tag is being commented out.
We can see the finished result here (non-grid version here):
Also works on iPhone 4.
Hope this helps!
