Actuality Test is a brand new article collection from Set Studio that focuses on CSS structure with real-world case research. Every challenge takes a design from Dribbble (or an identical platform) and demonstrates how one can code it in CSS in a manner that performs to the strengths of the medium, slightly than aiming for pixel-perfect recreations. As Andy says within the first article:
You don’t have any concept what context your customers can be visiting your website in and being the browser’s mentor, not it’s micromanager is a assured solution to construct really responsive front-ends that work for everybody.
Andy advocates stable, HTML-first ideas and makes use of his CUBE CSS methodology. He does an awesome job of explaining each step of the method of coding, together with why he advises constructing in a selected manner, and any trade-offs and accessibility issues that the designer won’t have thought of. You’ll discover some nice consideration to element, comparable to use of the prefers-contrast media question within the second version, and why you would possibly need to think about align-items: baseline slightly than middle in flexbox.
I like these kind of posts, not solely as a result of they function life like examples, however as a result of they comprise loads of classes that may set you up for constructing any venture, whatever the design. I think about myself pretty competent on the subject of CSS structure, and I nonetheless discover myself studying one thing new from folks like Andy.
I extremely suggest this collection for anybody eager to develop into extra assured with CSS structure, and CSS normally.
