Skip to content

Issue 59

View Source conference, Grid UI Patterns, vMin and vMax and more to learn from this week

Rachel Andrew
2 min read

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.

thenewcode.com


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.

medium.com


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.

scotch.io


10 golden rules for responsive SVGs | Creative Bloq

An article from Dudley Storey on creating responsive SVG images. Lots of useful tips.

creativebloq.com


Building Resizeable Components with Relative CSS Units | CSS-Tricks

A whole pile of examples using relative sizing to create components that scale.

css-tricks.com

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.

medium.com


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!

jensimmons.com


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.

michael-gannon.com

Our Sponsor

A CMS that leaves you in control of the design and markup

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!

grabaperch.com

Newsletter