Issue 78

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.

rachelandrew.co.uk

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.

rachelandrew.co.uk


Best Practices for Long Scrolling

A article detailing some best practices if you are creating a long or infinitely scrolling site.

babich.biz


A Table With Borders Only On The Inside | CSS-Tricks

I like these "thinking through the possible solutions" type of articles.

css-tricks.com


Align SVG Icons to Text and Say Goodbye to Font Icons

A technique for aligning SVG icons and text from Elliot Dahl.

prototypr.io

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.

tympanus.net


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.

medium.com


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!

justuxdesign.com


How to Break the Grid Without Making a Mess | Design Shack

Some nice examples of how to "break the grid" in your designs.

designshack.net


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.

medium.com

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.

perchrunway.com