#Design #Frontend #Opinion

How to choose better grids

Posted by Preetesh Jain,

This article is intended for beginners.

Often, while building websites, a Front-end Developer has to encounter the most common problem, i.e. choosing grids. In this article, I’ll compare various grids that I’ve used in the past and which one I prefer to use currently.

Picking up anything in particular, depends greatly upon what you are building. If it is a website like unsplash.com or cerisal.com, then your obvious choice maybe to go with something most popular these days: Masonry. Or Bootstrap. Although both being truly a masterpiece, they might not be the right fit for every requirement.

Using custom grids

There are a lot of sites that let you generate your own grids. And for the most part this maybe be the ideal solution for many. However, one possible con is that they fail miserably when your needs change. Most of these generators create grids based on what you feed in a form. So if you want to be future-proof, my advice is to stay away from these generators.

Using CSS Frameworks

This is the most popular choice amongst most web developers. Bootstrap, Foundation and Skeleton are all in this list. For the most part these frameworks are undoubtedly very useful and most importantly future safe. Because they are being developed by the community of talented developers and are based on the healthy constructive feedback they receive.

I am not quite a fan of Bootstrap and I’m not ashamed to admit this fact, besides the fact that it’s so damn popular. All the reasons are packed in this little webpage:

Every Fucking Bootstrap Website Ever

Source: Every Fucking Bootstrap Website Ever

All Bootstrap websites almost look the same. Experienced developers can always tell if a website is using Bootstrap just by the look of it. So if you’re not like me, and only care about a functional website and design is not your thing, then go ahead. Be another sheep in the herd.

Speaking of “sheeps”, I don’t use Foundation as well. I haven’t even tried it yet. Foundation contains too many pre-styled components, like Buttons, dropdowns, accordions and what not. Just looking at the download page will give you an idea what I’m talking about. And this is the problem, ladies and gentlemen. Well, at least for me, it is. I would always prefer a framework that takes the most minimalistic approach; one that keeps it’s nose out of the business most of the time and hands you the freedom to craft your own things. This gives birth to originality, a quality that truly makes you stand out as a Front-end Developer and even as a Designer for that matter.

This is exactly the reason why I use Skeleton. It’s extremely lightweight, around 11 KB right now, I guess. Yes, it lacks in a lot of things. But this is what I like it for and I’ve already explained why. Minimalism. These sort of frameworks encourage you to do your thing.

However, I’m not a fan of grids in Skeleton either. And that’s why I use a customized version of Skeleton for my projects. Basically, what I did was that I removed the grid from theskeleton.css file and infused the grids from MaterializeCSS, another CSS framework which can be used to incorporate Google’s Material Design in your website.

My Maskeleton (MaterializeCSS grids + Skeleton) CSS Library is posted here on Github Gist, if you wanna try it out.

Forget material design, MaterializeCSS contains one hell of a grid system. It’s simple yet so functional, you will instantly fall in love with it. My suggestion is to try it once before you make your final choice.

I would also like to add here that, developing a good understanding of Bootstrap or Foundation is an important skill for a Front-end Developer. There might be scenarios where you might be obliged to use Bootstrap. The reason I’m insisting you to invest some time in these frameworks is because of their popularity. You can’t deny the numbers.

Using JavaScript grid libraries

This is another category for grids, where you have a fixed space to fill up with items. It doesn’t matter if all the items have the same size or not. This is where we use JavaScript grid libraries, or as I like to call them, “automated grids”. Automated because these grid systems calculate the empty space and then smartly arrange the items in it, so the layout looks somewhat like a brick wall:

Masonry

Grid layout with Masonry

Most popular example of such grid system is David Desandro’s Masonry. David has also made Isotope, which is the advanced form of Masonry. Both are JavaScript driven and use it to arrange the grid items. This JavaScript driven approach is resource hungry. On low RAM devices, sites using Masonry often tend to slow down the entire browser. I know this because I have used Masonry on a Laptop with a Pentium B940 CPU and 2GB of RAM. So it’s tried and tested.

An alternative is to use a CSS-driven approach, like Salvattore. Which is what I have used in Cerisal.com, a photo board website. Salvattore is faster than Masonry and works just as good. The reason is that Salvattore is configured purely in your CSS. It doesn’t need any JavaScript (or jQuery) initialization and works with dynamic content too.

Conclusion

Choosing a grid system is something that shouldn’t be ignored in the beginner phase of Front-end Development. It’s a basic and simple skill that requires it to mastered, because in the future you might be dealing with loads of data and information, and you might think,

“Oh boy! How the hell do I arrange all this stuff gracefully?”

Answer will always be grids. Grid views will cross your way every now and then in Front-end Development. So make your choice wisely, and try practicing different layouts, right from a piece of paper, and all the way to your browser. Try different libraries and frameworks. And stick to one you like. You’ll eventually become more creative with them, and will be able to create stunning websites. So, all the best!