2013
GuideGuide
by sbrothier & 2 othersDealing with grids in Photoshop is a pain
With GuideGuide, it doesn’t have to be. Pixel accurate columns, rows, midpoints, and baselines can be created based on your document or selection with the click of a button. Frequently used guide sets can be saved for repeat use. Grids can use multiple types of measurements. Honestly, if you haven’t started downloading it by now, you’re probably a masochist. Weirdo…
2010
Designers Bookshop – Grid Calculator Basic Edition
by sbrothierMany people that work with layout never take the time to learn a very essential skill (grid systems). Creating your design based on your document dimensions is critical to create the best possible layout. If you are ready to create better layout without having to do any mathematics which is normally required when working with grid systems you should take a look at the videos below.
Grid Calculator Basic Edition calculates grid systems for you really fast, all you need to do is to paste the information into your layout software. Our software also works for web design. Start creating better layout today!
The videos below shows how you can use our software together with Adobe Indesign, Illustrator and Photoshop. Download the free demo and try it!
Slammer - Designer's Geometry Box
by sbrothier & 2 othersSlammer overlays any grid you want, anywhere you want. Typographic Grids, Golden Sections, Fibonacci series or Rule of Thirds. Slammer also has Rulers, Crosshairs, Magnifier, Measurements & Screenshots.
2008
Yahoo! UI Library: Grids CSS
by sbrothier & 15 othersThe foundational YUI Grids CSS offers four preset page widths, six preset templates, and the ability to stack and nest subdivided regions of two, three, or four columns. The 4kb file provides over 1000 page layout combinations. Other features include:
* Supports fluid-width (100%) layouts as well as preset fixed-width layouts at 750px, 950px, and 974px, and the ability to easily customize to any number.
* Supports easy customization of the width for fixed-width layouts.
* Flexible in response to user initiated font-size adjustments.
* Template columns are source-order independent, so you can put your most important content first in the markup layer for improved accessibility and search engine optimization (SEO).
* Self-clearing footer. No matter which column is longer, the footer stays at the bottom.
* Layouts less than 100% are automatically centered.
* Accommodates IAB's Ad Unit Guidelines for common ad dimensions.
* Offers full A-grade browser support.
GridFox - The Grid Layout Firefox Extension » Eric Puidokas » Programming and Designing for the Web
by sbrothier & 2 othersEnter GridFox. GridFox is a Firefox extension that overlays a grid on any website. If you can open it in Firefox, you can put a grid on top of it. It’s easy to customize, allowing you to create the exact grid you designed your layout around.
Allan Jardine | Design
by sbrothier & 6 othersDesign is a suite of web-design and development assistive tools which can be utilised on any web-page. Encompassing utilities for grid layout, measurement and alignment, Design is a uniquely powerful JavaScript bookmarklet.
2007
Grid Layout
by sbrothier & 1 otherKhoi Vinh has been touting Grid Layouts for years. From his efforts there have been many, many solutions to helping people use Grid Layouts successfully. Thanks to a recent brilliant idea of Jon Hicks and code execution by Teevio, I present to you Grid Layout JS.
GridMaker Reboot - Article - andrewingram
by sbrothier & 1 otherA few months ago I wrote GridMaker to aid in producing grid-based web design mock-ups in Photoshop (and later Fireworks). Whilst very primitive it was well-received and many have informed me how useful they’ve found it. At the same time it was clear that there were a number of issues so I went back to GridMaker and made a number of changes.
Grid Calculator
by sbrothier & 9 others (via)Change the settings (by dragging the sliders, clicking on the bars, or editing the values) to calculate the overall width of your grid.
Andy Budd::Blogography: Layout Grid Bookmarklet
by sbrothier & 2 others (via)Inspired by Khoi Vinh’s post about using a background image of a grid for layout, and a subsequent post over at Smiley Cat about the same thing, I decided to knock up a quick Photoshop style Layout Grid Bookmarklet
1
(12 marks)