Reality Check: A Series for Building Real Layouts

Day 20 of National Blog Posting Month #NaBloPoMo

Reality Check is a new article series from Set Studio that focuses on CSS layout with real-world case studies. Each issue takes a design from Dribbble (or a similar platform) and demonstrates how to code it in CSS in a way that plays to the strengths of the medium, rather than aiming for pixel-perfect recreations. As Andy says in the first article:

You have no idea what context your users will be visiting your site in and being the browser’s mentor, not it’s micromanager is a guaranteed way to build truly responsive front-ends that work for everyone.

Andy advocates solid, HTML-first principles and makes use of his CUBE CSS methodology. He does a great job of explaining every step of the process of coding, including why he advises building in a particular way, and any trade-offs and accessibility considerations that the designer might not have considered. You’ll find some great attention to detail, such as use of the prefers-contrast media query in the second edition, and why you might want to consider align-items: baseline rather than center in flexbox.

I love these type of posts, not only because they feature realistic examples, but because they contain plenty of lessons that will set you up for building any project, regardless of the design. I consider myself fairly competent when it comes to CSS layout, and I still find myself learning something new from people like Andy.

I highly recommend this series for anyone wanting to become more confident with CSS layout, and CSS in general.

Check out the series

Webmentions for this page

About webmentions

Likes: 11

Reposts: 6