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 end of the clearfix hack?
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
CSS Grid. One layout method not the only layout method
An article explaining why CSS Grid Layout isn't designed to create Masonry-style layouts.
Best Practices for Long Scrolling
A article detailing some best practices if you are creating a long or infinitely scrolling site.
A Table With Borders Only On The Inside | CSS-Tricks
I like these "thinking through the possible solutions" type of articles.
Align SVG Icons to Text and Say Goodbye to Font Icons
A technique for aligning SVG icons and text from Elliot Dahl.
Interesting
Little Fragments: Creating a Simple Image Poster Effect | Codrops
This is a fun tutorial to create a poster-like image effect - be sure to take a look at the demo.
The Current State of Adaptive Design – The Startup – Medium
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.
8 amazing examples of mobile-first, responsive navigation | Just UX Design
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!
How to Break the Grid Without Making a Mess | Design Shack
Some nice examples of how to "break the grid" in your designs.
Making input type=date complicated – Samsung Internet Developers – Medium
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
Powerful developer tools - simplicity for your clients
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.
CSS Layout News Newsletter
Join the newsletter to receive the latest updates in your inbox.