DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Wren Summerset
Wren Summerset

Posted on

Getting the grid (CSS)

One of the things I’ve heard a number of people refer to when preparing to create a website is the β€œwhiteboard plan”. The idea is that before you sit down to start working your code, you need to have a vision of what the end product will look like. This of course makes sense, but when you’re only a month in, its hard to understand where you’re going to go after the whiteboard.

This week however, things started clicking. You see, this week I learned about the grid. Picture your monitor (that you’re probably staring at if you’re reading this on a computer) with 12 columns slightly spaced across the width of the screen. This is how a lot of information can be enticingly organized to create enjoyable experiences for your user. Do you know they used to use multiple windows on one screen (really! They even had separate URLs and they had to be coordinated). This made things a bit clunky and slow.

In the past, trying to accomplish something similar required setting up HTML tables. Not the best but it got the job of positioning done. However trying to go from design to final product was a pain and the code could be fragile. One of my favorite quotes while reading from the website https://blog.froont.com/brief-history-of-web-design-for-designers/n β€œIt was also the time when so many developers decided not to like front-end coding.”

Javascript and Flash saved designers briefly but quickly gave way to CSS. While the Cascading style sheets reigned supreme in the design world (keeping a separate declarative sheet to the code, that described the code, helped to solve a lot of problems and is still in strong use today) for a solid decade. It eventually shared its time on the stage with the grid system.

The grid system allowed for one simple layout that could be used over and over again to produce the huge variety of website design we see today. I couldn’t help but wonder if the KISS method was here to rule the day, or if I would see this evolve in my lifetime.

Top comments (0)

Want to rep DEV and be comfy at the same time?

Check out our classic DEV shirt β€” available in multiple colors.