GridFox for all your grid-based designing needs
With all the recent talk of grid-based web design, you’d think there would be an easier way to visualize what that actually means. Well now you can! GridFox is a Firefox extension which places a grid on top of any website. If you’ve started your design from a grid-based layout, you can now easily check to make sure everything is lining up the way you had planned.
What’s a grid-based layout?
It’s a way to design a page layout based off of a simple grid. I got the idea for GridFox after reading Khoi Vinh’s post on TimesOnline.co.uk. He showed how The Times of London used a grid-based layout to design their site. In Vinh’s post, he had some graphics which really helped to illustrate the point. Using GridFox, you can now have that same grid view on top of any site without the hassle of using Photoshop to draw them yourself.
To learn more about the advantages of grid-based design, I highly reccommend checking out Vinh’s presentation slides from SXSW.
Try it out for yourself
- Install the extension in your Firefox browser by clicking the link above.
- Head on over to http://www.timesonline.co.uk
- Once you’re there, click on Tools > GridFox > Options
- Set the Column Type to ‘Varied Column Width’
- Set Column widths to ‘200,200,200,370′
- Click ‘OK’ and watch the magic happen
Special thanks to Brandon Turner for helping me develop this extension.
Extra information for this entry
-
Abstract
With all the recent talk of grid-based web design, you’d think there would be an easier way to visualize what that actually means. Well now you can! GridFox is […]
-
Comments
You may leave a comment, or trackback from your own site.
-
Tags
Comments Post a Comment
I’ve installed GridFox 1.1, but it doesn’t display any grids for me. I’m using Firefox/2.0.0.11.
I tried the settings you gave for http://www.timesonline.co.uk : nothing :(
Am I not configuring it correctly or does it not work with 2.0.0.11?
Thanks.
Bob
I just tested with FF 2.0.0.11 and it worked fine. Make sure the appearance tab is set correctly as well. Try 0.5, 000, fff, 15.
If it’s still not working, shoot me an email and I can help you troubleshoot further.
I installed Gridfox and for some odd reason i can’t get it to display anything other than the default 960px/14 columns. I tried everything that I could think of, including the above suggestion an even yelling random swear words at the screen, but all to no avail… Any thoughts?
I am using FF2.0.0.12
Really nice, thank you. Maybe the next release could implement relative units (ems or %).
Cheers
I am also having issues on FF 2.0.0.13, the same as above and I have tried the solution above but still nothing.
Is there any settings which will get it to work? I think this is a great utility and would really like to test it out.
Cheers
Jamie
I also had problems having it do anything other than show the default columns. It all worked out however once I disabled the colorful-tabs extension I had on Firefox.
Yes, it conflicts with Colorful-Tabs.
A few suggestions:
1. It would be nice if you could play around with the settings while at the same time showing the grid, rather than going back and forth.
2. Show the line thickness on the same panel as the number of columns and site width, since those are the most commonly changed settings.
3. Make margins a separate setting from gutters. I use this to plan my grids:
http://grid.mindplay.dk/
…and it uses math to determine the widths. Sometimes the left and right margin widths are different from the gutters.
Anyway, nice work.
[…] משהו למעצבים: gridFox הוא פלאגין לפיירפוקס שמאפשר לכם לראות את העיצובים שאתם רואים/עושים על פי גרידים. שימושי ביותר. http://www.puidokas.com/gridfox-release/ […]
[…] GridFox is a FireFox plugin that renders a transparent grid over a web page. Those designers/developers using grid-based layouts or any of the css grid frameworks might find this useful. […]
Post a Comment