Issue 151
CSS Day, WatchOS, Container Queries and creative layouts with CSS Grid.
News
Issue 151
Last week I was at CSS Day in Amsterdam, which really was a most excellent event. A perfect mix of CSS theory, and practical things that will be useful in work right away. You can find most of the slides on Notist, there will also be video coming soon and I'll be sure to be linking to those as they come out.
Our sponsor this week is Gymnasium, offering free online courses on web development, design, user experience, and content creation. Please do check them out. I also have empty sponsorship slots for the next few weeks, it would be fantastic to fill those. Have a look at the sponsorship page and let me know!
Rachel Andrew, CSS Layout News
Learn
Container Query flow chart
A flow chart to help you answer the question of whether you really need container queries, or if an existing solution will solve the problem instead.
Image Inconsistencies: How and When Browsers Download Images – CSS Wizardry – CSS Architecture, Web Performance Optimisation, and more, by Harry Roberts
A very useful post from Harry Roberts detailing how browsers deal with downloading images.
Designing Web Content for watchOS | Erik Runyon
With web content coming to Apple Watch, this post helps you get a head start in designing for it.
CSS Media Queries: Quick Reference & Guide ← Alligator.io
A short guide to media queries.
Creating a Bar Graph with CSS Grid | CSS-Tricks
On CSS Tricks, how to use Grid to create a bar chart. I kind of feel this data would be better represented as a table and then transformed, but it's a nice walkthrough.
The Layouts of Tomorrow | Max Böck - Frontend Web Developer
Nice write-up and demo using CSS Grid and Scroll Snapping.
Smashing Book 6 Excerpt: Bringing Personality Back To The Web — Smashing Magazine
In this excerpt from Smashing Book 6, Vitaly encourages us to bring personality back to our designs and user interfaces.
Interesting
Swiss in CSS - animated posters
Swiss in CSS is a homage to the International Typographic Style and the designers that pioneered the ideas behind the influential design movement. The source of the animated posters can be viewed on CodePen.
Our Sponsor
Gymnasium offers free online courses on web development, design, user experience, and content creation.
Gymnasium offers free online courses on web development, design, user experience, and content creation.
Want to create successful design systems? Take Working with Atomic Design and Pattern Lab with the one and only Brad Frost!
Want to test your coding chops? Take Responsive Web Design Fundamentals. Want to design a better web experience? Take Build Better Websites with Chrome Developer Tools.
When you pass a course, you earn a certificate or badge to share with your network.
In the market for new job opportunities? We have you covered. Gymnasium is supported by Aquent, one of the largest creative staffing agencies in the world.
CSS Layout News Newsletter
Join the newsletter to receive the latest updates in your inbox.