Issue 145
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.
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?"
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.
The Relative Units of CSS - Pine
A useful post explaining relative units in CSS.
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.
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.
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.
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.