Issue 59
View Source conference, Grid UI Patterns, vMin and vMax and more to learn from this week
News
Issue 59
I'm writing this introduction before heading down to day 1 of View Source in Berlin. I'm speaking tomorrow, and will be around for the two days. If you are at View Source come and say hello - talk to me about Grid Layout, CSS in general or anything else.
There were plenty of things to choose from this week to add to this email. Seems like everyone is back at work after the summer. I hope you'll find something interesting amongst the links. Also in the last few days I have updated my CSS Grid Layout examples site at Grid by Example starting a new UI patterns section for more fully worked examples.
Rachel Andrew, CSS Layout News
Learn
the new code – MinMaxing: Understanding vMin and vMax in CSS
An excellent introduction to vMin and vMax, lesser known and very useful viewport units.
Designing Great UIs for Progressive Web Apps – Medium
If you are working on a Progressive Web App there are some good suggestions here for how to make great mobile experiences, including a checklist of common mistakes.
Getting Started with CSS Counters | Scotch
CSS Counters can be really useful. I use them a lot when working on CSS for PDF and print as it is how we do things like automatically number figures and chapters. I don't often think of using them on the web, and here is a great guide on how to do that.
10 golden rules for responsive SVGs | Creative Bloq
An article from Dudley Storey on creating responsive SVG images. Lots of useful tips.
Building Resizeable Components with Relative CSS Units | CSS-Tricks
A whole pile of examples using relative sizing to create components that scale.
Interesting
HOW TO: Pure CSS masonry layouts – Medium
This is a good walkthrough and thinking around creating masonry style layouts using CSS only. How to do a Masonry style layout is something that constantly comes up in discussions around Grid and Flexbox.
Layout Demos by Jen Simmons
Jen has added a neat header to her layout labs page (needs Grid, works best in a Firefox Nightly right now). She is added lots of new examples all the time, definitely bookmark this page and check back!
Simple CSS Media Queries
While I would definitely not suggest trying to specifically target devices this is quite useful in being able to see the kind of sizes different devices have.
Our Sponsor
A CMS that leaves you in control of the design and markup
We believe that content management systems should manage content really really well, and leave the design and front-end code to you. That's why when you use Perch or Perch Runway you have full control of everything the CMS outputs.
Use any framework you like, or your own carefully crafted HTML and CSS. Output to JSON instead of HTML? No problem at all! And with our focus on performance your site should be super-fast too!
CSS Layout News Newsletter
Join the newsletter to receive the latest updates in your inbox.