Digital agencies' best practices about modern web development, digital and inbound marketing.
Grid systems: Monks unveil 5 divine building blocks for your website design
Web designers and developers begin some place. Most of them resort to photoshop, structure their outlines for clients or internal websites, push some pixels around and try to make things look full of life. The problem with this approach is that most designers, who work without matrix frameworks, do not get close enough to accurate and precise web outlines. With changing times, grid layouts became increasingly popular and “that one trend” every other website started focusing upon.
Now, most designers don’t give a second though when it comes to using grid systems. So, which are the new and lesser know, but divine grid systems you should resort and vouch upon?
Simple grid systems
34Grid is all about equal column distribution. It can accommodate unequal distributions as well, but that is not the primary purpose of this grid system. For those of you who want to divide most or all of your pages into horizontally equal portions, this is your framework. The framework is designed to adapt to your requirements. All you need to do is fill up a quick form, determine the requirements of columns and rows and work out on the code that is divided in to two CSS files (base code and code with the media queries). One of the limitations of this framework is inability to nest columns or create more convoluted column arrangements inside a single row. For those of you having simple requirements, this is the perfect system for you.
Simple Grid is a responsive option that maxes out at a width of 1140 pixels. In other words, while it is designed to play nice with tablets and phones, Simple Grid makes sure that larger screens aren’t left out. Because this grid system is simple, it is lightweight. The whole thing comes in a four-kilobyte uncompressed CSS file. Class names are designed to be easily understood. Like 34Grid, there doesn’t seem to be any provision made for nesting columns.
Toast is for anybody who prefers a simple grid with plain-English class names. This system is easily understandable and implementable. After your usual ‘.container’ and ‘.grid’ elements are put in place, the columns are implemented the old fashioned way. The system also includes some basic typographical styles. Like other simple structures, this grid system is also not meant to be exploited for complicated layouts. Moreover, some of the columns may prematurely end up wide because of the breakpoints defined here.
Advanced grid systems
Proportional Grids seem to do away with endless calculations as much as possible by depending on the box-sizing property. The result is a complete, but still pretty lightweight, grid system that covers your bases for responsive layout. Fixed-width gutters are defined bypadding; and box-sizing makes sure the columns play nicely together. Classes are included for changing column dimensions at three different break points. The media queries themselves are structured in the “mobile-first” fashion, in keeping with standard practices. It could have some more columns to work, otherwise it is error-free and well-rounded grid system.
Of the many advanced grid systems on this list, One% is the simplest, but it is by no means incomplete. It’s designed to accommodate somewhat larger screens, and large UI elements. The name comes from the fact that the grid and column width is calculated so that it always equals 99%, instead of 100%. This eliminates the need for some of the more complex repeating decimals and number-rounding that browsers are often forced to do. The grid itself is divided into the classic twelve columns. The classes are simple and two break points are included by default. Although advanced, it still has no nesting columns.
Wrapping it all up, these are just the few of the many grid systems available. Utilize them effectively to sketch a perfect and well-defined web outline, the next time you want to bypass the sloppy layout of PSD. Embrace the divinity today!
Latest posts by Webby Monks (see all)
- WordPress SEO: A Practical & Extensive Guide for 2019 - February 11, 2019
- A Comprehensive Guide To Performing UX Audit For Maximum Online Success - August 23, 2016
- Website sliders: Loved & hated, Still Omnipresent! - August 5, 2016