CSS layout for designers
This article was written in 2014. It might or it might not be outdated. And it could be that the layout breaks. If that’s the case please let me know.
I’m going to do a series of workshops about code for web designers. The goal of these workshops is to teach some essential basics about how HTML and CSS work to people who currently design stuff for the web in tools like Photoshop. After these series I don’t expect them to write production code, but I expect them to be able to solve certain design problems in the browser. I’m going to start with explaining semantics. Then I’ll teach them how to style texts, how to do good typography. After that I’ll teach them all those fabulous selectors we have. They’ll learn how to make animations and transitions, and how to apply bling with shadows, border-radius, gradients, etc.
So far so good. These are all relatively easy to explain. The thing I’m a bit concerned about is layout. What should I teach them? Should I teach them how to use hacks like
display:inline-block? This is how most of us still create layout today. But is it really necessary to teach people who learn CSS today how we used to create layout in the past? The reason I’m asking is because layout with CSS is hard. It is very hard to explain to somebody who’s relatively new to CSS how floating works. Why you need to clear them every now and then. And I’ll need to explain
overflow. Have you ever tried that? That’s hard!
It’s easier to explain
display:inline-block. Designers will not like the space between inline-block elements, but they’ll probably learn it much faster than floats, and they’ll be able to make a simple layout in no time. So if I have to choose between float and inline-block, I consider to ignore floats. But I’d love to hear your opinion on this.
The future is here, right?
Float and inline-block are hacks. We needed those hacks, but today we have
flexbox. Do we still need them? I’m not sure. If we won’t be needing them in the near future, I’m not sure if I should teach them to people who start with CSS today. What’s the point? Remember that these people will not write any real production code, they need to be able to solve some design problems in a realistic environment, the browser.
Do they even need to learn this stuff?
Flexbox has an incredible amount of possibilities, which makes it pretty hard to fully understand it. It’s even harder to type the correct code to make it work. Now the question is: do people really need to learn how to write this code, or do they need to learn how to use tools that generate this code for them? With
flexbox, as with CSS gradients, I tend to think the design community might be better served with excellent tools, rather than with knowing how to type a complex syntax — I’d love to be proven wrong though. But are there any real good tools out there? For instance, is Flexyboxes good enough, does it cover all options? Or is Gridset the kind of tool we need?
For now I will definitely teach them how to type layouts with CSS. I’m not entirely sure yet what I’ll teach them exactly or how. I hope your comments will help me in finding the right answer here.