Skip to content

Issue 145

Hello from Google I/O, using Grid to get the job done, display: contents and a11y

Rachel Andrew
2 min read

News

Issue 145

I'm writing this intro sat waiting for the Google I/O keynote to start. I flew out here yesterday, and it has been a somewhat hectic few days with the launch of our latest product Notist. If you are a public speaker it might interest you, and there is also a fair bit of Grid used around the site. Not for anything fancy, there is no amazing new layout that would have been unheard of without Grid. What it enabled was me to get the CSS done and onto other, more important  to the business things. In fact I barely remember writing a lot of it! Jeremy writes about a similar feeling in his post Good Griddance.

I'm very excited to see what people can come up with using Grid and other new layout. However I'm also very happy when established patterns that work well, can be achieved far more quickly, so I can get on with everything else I need to do to launch a product!

Rachel Andrew, CSS Layout News

Learn

Display: Contents Is Not a CSS Reset | Adrian Roselli

Apparently - although I've not seen it myself - people are using display: contents as a CSS reset. That's a weird thing to do, don't do that. However this post also explains current a11y issues with display: contents which are hopefully something we can get fixed in browsers.

adrianroselli.com


Hot metal : Pasteup :: Floats : CSS Grid - YouTube

"Jen takes a look at the evolution of the printing press and typesetting technology — from letterpress and the Linotype machine, to photo-based paste-up techniques — and how these advances radically changed graphic design. History has taught us that big changes to the underlying technologies can open up new communication possibilities. This is happening again, now, on the web. Today, with CSS Grid, Flexbox and all the pieces of Intrinsic Web Design, we have the freedom to place anything anywhere on the page. What can similar transitions in the past teach us about our future?"

youtube.com


Priority Guides: A Content-First Alternative to Wireframes · An A List Apart Article

Before you get to creating your layout, you need to organise your content. I struggle with this and really enjoyed this article on A List Apart as a method to help do this, thinking about content priority rather than how it will look.

alistapart.com


The Relative Units of CSS - Pine

A useful post explaining relative units in CSS.

pineco.de


New CSS Features That Are Changing Web Design — Smashing Magazine

Zell writes about how new features in CSS such as Grid, Shapes and Writing Modes are changing web design.

smashingmagazine.com

Interesting

Ideas for Proximity Feedback with Progressive Hover Effects | Codrops

Some interesting ideas described as proximity hover effects, alerting users to something they need do before clicking a button for example, as they approach the button.

tympanus.net


I Used The Web For A Day With JavaScript Turned Off — Smashing Magazine

The start of an interesting series I'm very happy to be publishing over at Smashing. In this post Chris Ashton uses the web for a day without JavaScript.

smashingmagazine.com

Our Sponsor

Updated material for spring 2018 - learn CSS Layout with me

Let me teach you layout, and save yourself time with every site you build.

With new lessons and updates for Spring 2018, I've distilled my knowledge about CSS Layout into this training course. This course has something for you if you are new to CSS, have been using frameworks for a while and want to understand how they work, or have been doing this for a while but want to understand the newer layout methods. The course includes video tutorials, text explanations and all the starting points to follow along.

The full table of contents gives an overview of what you can learn - at your own pace. We also have a Slack community where you can ask questions about the course materials.

thecssworkshop.com

Newsletter