The benefits of learning how to code layouts with CSS

Yesterday, I wrote about CSS Grid. Ted Mazer responded by asking on Twitter: “As a beginning front end developer, is it going to be beneficial to jump right into becoming proficient at this layout style?”

I replied to him on Twitter, (spoiler alert: “yes”), but I have a better answer that’s longer than 140 characters… so, time for a quick morning blog post.

• • •

In the beginning, we webmasters used HTML for everything — including styling font colors and doing layout. HTML tables were the one tool we had, and we abused it like crazy. Dark days for code. Bright days for funky, punk rock designs.

After a while, we realized abusing HTML to do styling was horrible. Especially maintaining a site over time. It made redesigning impossible. And quickly got out of control. CSS was invented. We separated content from styling. And we web designers learned how to use floats to do layout.

Sadly, floats weren’t really a good solution. They are perfect as intended — to float a photo to the side and wrap text around it, for example. But we’ve been using floats to do the whole page layout. And that’s also giant a hack.

We forged ahead, inventing and teaching each other a few hand-coded techniques for making a handful of layouts. We iterated on those techniques, finely honing them, making them slightly better and better. Search the web for “holy grail layout”, and you’ll see the trail of evidence.

But we wanted more options for layouts. So we front-end developers started emerging with new layout patterns, and code libraries for getting each one done. These layouts were too complicated to teach people to hand-code. It was more helpful to make a framework, and pass that around. It started in 2006, with Yahoo YUI. Then came 960 Grid. And then a bunch of variations on 960 Grid. When responsive design hit the scene, a gazillion 12- and 16-column layout frameworks popped up, all handling RWD slightly differently. Then folks leveraged complex Sass formulas to make powerful toolkits… the list of layout frameworks goes on and on. There are hundreds of options.

Bootstrap is possibly the most popular such framework, offering a handful of familiar layouts to choose from. There’s the one with the hero graphic at the top, followed by the large centered paragraph, and the three columns of icons — you’ve seen the results of this everywhere. We are completely bored with what happens when the whole industry reaches for the same two or three templates.

Get ready for all of that to go away. It’s time to go back to hand-coding layouts for each project. Of course, make reusable code for yourself and your company. Of course, create style guides and limit code chaos. Of course, use a starter-kit of some kind so you aren’t beginning each project staring at a blank page. But it’s time to stop assuming your page layout design process looks like this: 1) Pick a third-party framework; 2) Pick one of the layouts that comes with that framework; 3) Limit all your ideas to what that framework can do.

We don’t need that crutch anymore.

I know a lot of people will think the “best” way to use CSS Grid will be to download the new version of Bootstrap (version 5! now with Grid!), or to use any one of a number of CSS Grid layout frameworks that people are inevitably going to make later this year (despite Rachel Andrew and I begging everyone not to). But I don’t. The more I use CSS Grid, the more convinced I am that there is no benefit to be had by adding a layer of abstraction over it. CSS Grid is the layout framework. Baked right into the browser.

I’m tired of every website looking the same. I believe in the power of graphic design to elevate a project. To make it stand out. To give it a unique voice, to help its readers / users / viewers understand what is happening. I don’t want to paint-by-numbers, I want to paint.

It’s time to design layouts like we design everything else — typography, color — unique to each project.

How will this be possible? Because now, finally, we have real tools for layout. CSS properties that were created to do layout. CSS Grid, Flexbox, Alignment, Writing Modes, Multicolumn, along with, yes, Floats, Positioning, Inline Block, Display Table — just to name a few.

People sometime ask “which one is the best one?”, as if we will pick only one CSS property to create a layout, as if it’s similar to picking only one framework. You don’t use Suzy and Bootstrap — why would you use Flexbox and Grid? Well — that is exactly what’ll do. You will use a combination of all of these properties on every project. You’ll code this part with Grid, this part with Flexbox. Over here, a simple Float will do the trick. Over there a Grid nested inside a second Grid will get it done. All the while thinking through what happens in the browsers that don’t support Grid yet, creating elegant fallbacks by using Feature Queries.

The challenge is to learn all of these tools. Not only do we need to learn the new ones, like Grid, but most of us have to go back and learn the old ones. We’ve been using frameworks so much, we are rusty now when it comes to knowing how to use a float. Plus `box-sizing: border-box` changed everything, and made a lot of the old problems go away when we weren’t looking. (If you don’t know what that is, start there.)

It’s not just front-end developers who have a lot to learn — designers do, too. Most of the current design practices assume the page layout is already set. We’ll just pick from these handful of templates. Those designers who are more innovative, it’s likely you’ve been told over and “we can’t do that on the web”, and you’ve listened. Now we don’t even remember the graphic design ideas we use to have. We stopped being creative. We submitted to the constraints of the float.

Now designers can open their minds to a world of possibilities. There are a lot of new ones. And there are new constraints. Not everything is possible. We need to explore CSS Grid until we understand what it wants to do, what it can be forced into doing, and what it refuses to do. Many designers may not ever learn to code CSS, but you need to understand CSS well enough to understand our artistic medium.

Many of us are newer to this industry, and were not around when layouts were hand-coded. Many people have only ever used a framework. It will be hardest for you to change your thinking. Developers will need to invest some time to learn how to use CSS to do layouts, and to undo all the habits from frameworks.

In many ways, perhaps it’s the people who are brand new to the industry who have the most potential. You might think, “well, I know nothing! I have to learn it all at once!” Yes, you do. And, actually, so do most of us. You at least don’t have to unlearn anything.

If I were a scrappy young designer or front-end developer, I would jump all over this layout stuff and learn it as fast as I could. I expect that later this year and throughout 2018 there will be a lot of demand for people who know how to hand-code a layout. Those folks who can imagine an innovative page design and make it happen — you will have a lot of control over the future of your career. You’ll stand out. You’ll get work. You’ll be able to be picky about where you work, and raise your rates.

How do you learn all this? Where do you start? Well, read my post about Learning Grid, and especially take a look at Rachel Andrew’s CSS Workshop, where she goes through everything CSS for layout. Most of all, start coding demos. Play. Experiment. Learn by doing.

We stopped taking risks at some point. Everything online seems so polished and perfect. The frameworks do make a new project look snazzy right away. All that polish, all those rounded-corner images. But we’ve got to break away from that, if we want to make great work, great designs. If we can dare to make mistakes, and learn to play and experiment again, we can push this industry to a whole new level, and truly start to understand the web as a graphic design medium.

You can find my experiments at labs.jensimmons.com. I’d love to see yours.

Comments

Wonderful post, Jen. Longtime developers such as myself, who cut our teeth on table-based layouts, are in a unique position. In a way, the craft has come full circle. The skills we started with are now coming back into prominence. Exciting times ahead.

I think we do need to learn this so we know what can be done. Something she doesn’t address and why I use the framework I do is for the easing of the burden for JavaScript, I think the frameworks will just get smaller and more flexible. What will get a huge shot in the arm are the Browser based edotors. With these new CSS rules it makes there Code much cleaner and faster this putting even more pressure on.

I agree 100% with everything you said here. I think that it’s very important to know how to build layouts in CSS without the help of a framework. It’s okay to use frameworks where they’re needed, but you need to understand how that framework is actually working, otherwise you won’t get very far and you’ll back yourself into a corner. I was very anti-framework before my current job. However, with over 100 devs working in a codebase, using something like Bootstrap is useful since it is an easy way to provide a standard way of doing things. I’d love for us to roll our own framework eventually, though.

Yes, I do think having a system, a framework if you will, for an entire company to use is incredibly helpful. A requirement, really. Letting or expecting each developer to write their own unique code over and over creates problems.

Third-party frameworks do carry authority. Back in 2010, I worked on a enterprise team where there was no way I could talk 50 developers into using layout code I wrote. But I could download a famous framework with a famous name and convince everyone to use that. But that’s was political solution to a political problem. We shouldn’t confuse political solutions with technical or design solutions.

The best work won’t be accomplished using layouts designed by people who don’t know your project, haven’t met your users, and don’t know what kind of content is being published. For that, we need design.

My hope, and expectation really, is that three+ years from now, smart teams will design a layout system for themselves, and use it. That’s exactly what happens in print design — magazines, food packing, etc. Someone comes up with a system that will work long term for everything. They code it into a design style guide. And everyone uses that. We’re really into front-end libraries and style guides these days. We just need to add custom layouts to the mix, instead of using Bootstrap layouts.

Very nice article, firstly, and I’m incredibly impressed that this is something you can just write so effortlessly in the morning!

One thing you implied, that the assumption that dev companies just choose from a default of a predefined CSS grid frameworks, is not totally true. I don’t know many serious companies building consumer facing applications using bare, unchanged Bootstrap elements.

CSS frameworks serve a useful purpose for building things like administrative interfaces that are primarily forms or simple layouts that are not consumer facing. Building a custom form layout using individually coded CSS is not necessarily more efficient. Purecss.io’s grid is another smart and easy way to manage responsiveness and is limited enough in scope so as not to cause your site to look like every other site.

There are also interface frameworks, like Polymer, which allow a developer to build something that matches the target device’s UI style (I.e., Android’s material design). You wouldn’t rewrite that entirely on your own just for the pride of saying you’re using CSS grid layout.

The same thinking goes for WordPress templates. I can see how some companies might build their own reusable themes or even plug-ins that may apply to their particular clients. However my company has never chosen a premade theme as the basis for a client website. We simply leverage the mechanical framework of WordPress and build our interfaces on top of that.

In the end, all of these are just tools we choose from to perform our craft. Interface frameworks certainly become less relevant in some regards as better options emerge but will likely serve a valuable purpose for quite a while longer.

I do agree that the CSS grid might be akin to what CSS was for table based layouts. To that end I think the technology (including flexbox, et al) is headed in the right direction. I also think we’ll see existing frameworks change to incorporate these new options.

My point is that shunning them outright isn’t the safest position to take, but I understand your need to take a strong stance in your advocacy.

Hey Jen, great article — being an old hand at hand-coding CSS it’s encouraging to read that I might still be able to get back into frontend work if I master CSS grid/flexbox etc.

What’s your take on many jobs seeming to require that you must also write serious application-level JS, plus all the tools… is it just nonsense? I’d like to think that my mix of HTML+CSS+UI/UX skills would be a good mix!

Freelance maybe?

Hypothesis:

1. “I don’t really now any CSS at all.”
2. “I poke around in CSS, but I’m not confident about it.”

*learns CSS layout, specifically*

3. “I feel confident in CSS.”

In other words, I think CSS layout is the gateway to really being a CSS developer.

I am with you 100%, having been laying out pages with first tables, then css and floats since 2000. I’m quite content to start with an empty file called index.htm and one called styles.css. (In fact, I love to! :) But I’m not sure what the advantage is for the up-and-coming developer. The frameworks will generally work well enough, so what’s the downside? I hate to see smart people dependent on crutches they likely don’t need, but aside from the principal that it’s best to understand the fundamentals of your trade, why would a person starting out today actually want to bother to learn the fundamentals when they’ve been pretty effectively abstracted away? Honest question!

But what happens when that framework does not seemingly allow a particular design element? With any framework, there will always be something that you want to tweak or change, so learning the fundamentals is really something important to do, so that you understand the workings of the framework of choice. Unless you are using the framework “as is”, at least learning the basics will serve you well in the long run.

WHOOOOOO!!! “I’m tired of every website looking the same.” PREACH! and AMEN!!

I’m a visual designer who can hand-code. Taught myself. Then came frameworks and I got lost in the world of Wordpress. I got a little out of touch with hand-coding, and felt intimidated by frameworks since I wasn’t in an environment to use them.

So this is all very good news. I’m one of those designers who was told “no we can’t do that..”. And I knew enough to know they were mostly right. But yes, everything looks the same these days, and it’s time to shake it up again.

I’m a scrappy older designer who is looking forward to amping up my hand-coding and layout skills. Thanks for the great article.

As usual, good stuff. Thanks.

I’d like to point out that ppl pick Bootstrap (or Foundation, etc.) for a number of reasons, not just the grid it offer, right?

Furthermore more, Bootstrap is named as such for a reason. Why reinvent the wheel, or the book, when you don’t have to.

I agree, the area times when such tools aren’t appropriate. But that’s the difference between going to the lumber store for “stock” supplies and hand crafting each piece of wood on your own. Does your dog really need a custom made dog house?

I’m by not means in disagreement with you. You’re in my mind exceptional. I’m simply wanted to add some context. I hope you don’t mind.

Thanks again.

P.s. you’re top nav is mucked. On my device (Moto X Gen 2) it looks like one string of text. I thought it was a tag line, not the nav.

Finally, I got a few hours today to fix it! And some of the other most-broken parts of the site. There’s still more to do, but at least it’s better.

Thanks for this article! I agree 100% with you, especially where you say “I’m tired of every website looking the same.”

I think that the basis (in every field) is the most important thing you have to learn and master to try to make a difference in your field and experiment something new.

Of course, this is not always possible for many different reasons on a daily basis: you have no time to experiment, you are not allowed to experiment (your boss does not want to, your client wnat something “trendy”, ….), and so on; but, as a designer I think you have to find your place to experiment and try new things because creativity should be a (nice) part of you, should be cultivated and should be fun!

One more thing: discussions about frameworks (use them/not use them; love them/hate them) are not only related to the CSS world, there is plenty of them in the JS community (jQuery anyone?) and also in the backend world (with many PHP frameworks around for instance); I think that frameworks are not the best thing on earth and they are not evil, they are just tools, thus it can be useful to use them in some projects, but or they do not fit any project and not every project requires them but, most important, only if you know the basis (CSS, JS, PHP, anything) you will be able to choose the best solution for each project.

I’m super pumped about CSS Grid and for me I can relate to coming full circle from tables, as the first commenter remarked! One more factor in the coming layout revolution is CSS Variables. If we put those together with CSS Grid so much is possible. Do that together with some RxJS and the sky is the new limit for layout.

“All the while thinking through what happens in the browsers that don’t support Grid yet, creating elegant fallbacks by using Feature Queries.”

And that right there is exactly why most of us won’t do it at all, or if we do it’ll be through some Bootstrap-like framework that prevents us from having to deal with the whole “looks great, now how do we make it work in browsers older than a month?” nightmare. Needing a fallback means doing all the work at least twice.

To the people saying they’ll never make the time to both use grid and make a non grid fallback:

Some of us have dozens of long running projects that have been around for years and will continue to be around for at least another 10. All they need is an evolution to the design instead of a complete redesign every few years. At the same time there may be many areas where the design of some elements could have been much better but due to time and budget constraints we just did the simplest thing that worked and moved on to the next project.

When we revisit these projects we tend to make those improvements that we wanted to make the first time using Flex box and now grid but we will also keep the old “simplest thing that worked” for users with older browsers.

But what about new projects? Is your advice to make two versions from the start? What about the extra cost?

(Is there a framework that do for CSS what Babel does for JS ?)

I’ve been looking for some front-end design inspiration and I think you’ve given me some. Good article. Thanks!!!

Yep. I totally agree with every word in this article.

A friend of mine got me into frontend-development a few years ago. He showed me Bootstrap and how easy it is to use it to make websites. He asked me for help with a project he had and i sat down, sketched out a really nice design (the client loved it btw.) but he wasn’t able to code that. He just had no idea how.. However the client insisted on the design i made.

This is the point where i started figuring out how CSS works. I looked at so many frameworks trying to understand what they do and how i could recreate that with my own code. (no way to just copy stuff – i wanted to understand every single character) I guess this changed my life. CSS is so much fun and there are just a few thing i enjoy more than sitting there coding layouts from scratch. It’s nice to see that i’m not the only one working like this. (:

I’ve been developing with css for about a year now,and I’ve recently come to the conclusion that coding is what I’d like to make a career of. The problem I have however, and you touched on this here, is that I lack creativity. I love the idea of following a checklist (how I presume it is when you do this stuff full time for clients), but working on personal projects, I struggle to come up with anything beyond basic layout ideas. My site’s look clean and such, but nothing unique. I’m a big fan of the material design concept, it’s very clean and simple but also quite limiting in terms of design.
Is there any advice you can give besides taking inspiration from existing websites? I never really thought about the fact that a fair percentage of web development is in fact graphic design - something I suck at.
Thank you.

“I don’t want to paint-by-numbers, I want to paint.”
^^ this!

Add new comment

By submitting this form, you accept the Mollom privacy policy.