6 Grid Tools for Building Responsive Websites
If you’ve read one of WDG’s previous posts, you already understand the importance of including a grid system in your design. A grid, to refresh your memory, is a series of invisible vertical and horizontal lines that order content, text, and graphic elements on a site. The grid lays out an essential foundation that will propel your design development processes forward.
Sounds good, right?
But now you have to figure out where to start. Thankfully, with all the resources and tools out there, building a grid system doesn’t have to be a chore. We’ve outlined some of our recommendations for grid tools and resources, just for you.
Golden Grid System
While not a framework, Golden Grid System sets up a solid starting point for your responsive web design. GGS splits up the screen into 18 columns—with the left- and right-most as the outer margins—leaving 16 columns for actual use. The cool thing about this tool is that you can combine or fold those 16 columns into 8 (for tablet) or 4 (for mobiles) columns, to fit a range of devices that you are building for.
The Responsive Calculator
This intuitive tool turns pixels into percentages.
Semantic Grid System
This semantic system uses pre-processed CSS extensions like LESS, SCSS, and Stylus to help you build responsive sites. You can select column and gutter widths and choose the number of columns directly onto the style sheet.
Foundation
Foundation is a framework that lets you build prototypes and production code. It was also the first framework to be responsive, semantic, mobile-first, and as of recently, have partials with Interchange—allowing you to have HTML partials for specific devices. Along with the flexible grid, Foundation also provides a range of UI elements for you to utilize.
YAML
One of the nice things about this CSS framework is its compatibility with almost all browsers, including Chrome, Firefox, Opera, Safari and Internet Explorer. It is also backed by a big development community, which means that is regularly updated with the latest tutorials and templates.
At WDG, our expert designers and developers keep best practices and web standards at the forefront of every project we tackle. Interested in learning more about how we use grids to guide our projects? Want to get in touch about a website redesign? Drop us a line today!
