I probably fall into the same camp as a lot of ‘full-stack’ developers, and whenever I get to doing the front-end aspect, I’m reasonably happy until I have to google for the millionth time how to vertically centre something. So I’ve just convinced myself that I’m just not a CSS guy!
I realised recently how behind the times I was when it comes to writing CSS. In part this is probably due to working in corporate environments where inevitably, backwards-compatibility with legacy browsers was important so I haven’t always been able to take advantage of the latest features, such as Flex box, CSS properties, etc.
The creative aspect of building web-apps can be really enjoyable. (I used to muck around with CG graphics quite a bit, but I was abysmal at that!) I even studied art at school!
Every Layout
I’m currently working through Every Layout, so I thought I’d share my thoughts on why I think it’s a really great learning tool for anyone interested in CSS layouts.
What is it?
Every Layout is a guide created by Heydon Pickering and Andy Bell. It details 12 of the most common layouts and how to use modern, clean, CSS to build them. (I’ve still been building as if for IE8 for ages so good to get something to help me break out of that!)
It also includes helpful generators for building CSS components based on each layout as well as providing a JavaScript file containing a Web Component version.
On purchase, you get full access to instructions for each layout in both Web and eBook form.
What will I learn?
Every Layout teaches the use of algorithmic layouts.
In their own words:
Employing algorithmic layout design means doing away with
@mediabreakpoints, “magic numbers”, and other hacks, to create context-independent layout components. Your future design systems will be more consistent, terser in code, and more malleable in the hands of your users and their devices.
Some of the layouts that are covered include sidebar, stack, switcher and grid.
In addition, you will also learn a great deal of theory on composition, the box model and some (very!) in-depth discussion of how to think about measure. All of which not only help you understand how these layouts work, but also allow you to build on them going forward.
Conclusion
I don’t always get on with Media Queries, so an alternative way of approaching responsive layouts is a win for me.
Every layout is really, really, smart. I love the way that it takes something that I’ve fought with in the past and makes them super simple and expressive.
Check out Every Layout here - https://every-layout.dev/