Issue 78
A nice mix of tips and inspiration this week.
News
Issue 78
A nice collection of things this week, I've been collecting examples of various layout patterns which has led me to find some interesting "inspiration" collecting posts. I've shared a couple of my favourites. There are also some useful tips and tricks I've spotted. Drop me a line if you read or write something that might be of interest to readers.
Last week I had a chat on the WP-Tonic podcast. We talked about Grid, CSS in general and a bunch of other things.
I'm @rachelandrew on Twitter if you want interesting CSS stuff more than once a week, and don't mind the occasional cat photo or complaint about air travel. Twitter is also a pretty good way to send me links or other ask me things.
Till next week!
Rachel Andrew, CSS Layout News
The flow-root value of the display property has now landed in Chrome Canary and Firefox Nightlies. I've put together a quick post and demo to show how it works.
Learn
An article explaining why CSS Grid Layout isn't designed to create Masonry-style layouts.
A article detailing some best practices if you are creating a long or infinitely scrolling site.
I like these "thinking through the possible solutions" type of articles.
A technique for aligning SVG icons and text from Elliot Dahl.
Interesting
This is a fun tutorial to create a poster-like image effect - be sure to take a look at the demo.
Based on the title I thought this article would be something else, what it is is a nice rundown of various design tools that help you create adaptive designs. If you are interested in design tools such as Sketch, Figma and Subform this is a useful read.
A nice collection of mobile-first, responsive navigation bars. There are some great ideas here and for sites with more complex navigation than five links and a searchbox!
Some nice examples of how to "break the grid" in your designs.
HTML5 input types. So much promise, so much frustration due to lack of and differing browser support. In this article Peter-Paul Koch unpacks support for date and makes the case that we should only provide a custom widget via JavaScript if the browser does not have support.
Our Sponsor
Content management systems so often get in the way of great design and experiences. They force your site into a certain structure. They make you store content in ways that make no sense in terms of the content - or to the people managing it. They sometimes even dictate the HTML or the front-end tools and techniques you can use.
Perch Runway is different.
Perch Runway takes a toolkit approach to content management. You remain in control. Create the site that meets your requirements and also an administration experience that will ensure that content editors can maintain and improve on the site after handover.