Issue 108

News

Issue 108

On Friday I fly to Chicago for the start of a very busy conference season. My site is up to date with where I'm speaking and what I'm speaking about. I hope to see some of you on the road!

I like to mention other aspects of CSS and design in this newsletter, as layout doesn't happen all alone. So it isn't surprising to include animation every so often as I have this week, with an article on A List Apart that describes how to include animation in a design system. I'd also like to give a shoutout to fellow A Book Apart author, Rachel Nabors. Her book Animation at Work is out today. I read a preview copy and it really is a worthwhile addition to your library.

Rachel Andrew, CSS Layout News


Chromium Blog: Chrome 61 Beta: JavaScript modules, Payment Request API on desktop, Web Share API, and WebUSB

Details of features in Chrome 61 Beta which includes the scroll-behavior CSS property for smooth scrolling.

chromium.org


728062 - DevTools: Add CSS grid highlighter

If you have Chrome Canary you can check out the Grid Highlighter now part of Chrome DevTools. It isn't quite to the functionality provided by the Firefox Grid Highlighter yet, but it is great to see Grid support landing in more browser DevTools.

chromium.org

Learn

Here's a Super Quick Way to Try out CSS Grid | Jen Simmons

Some quick exercises to get started with learning CSS Grid - from Jen Simmons.

jensimmons.com


Integrating Animation into a Design System · An A List Apart Article

Animation is very much becoming standard in interfaces, in this article Alla explains how to integrate animation into your design system in order to maintain a cohesive system.

alistapart.com


Designing The Perfect Feature Comparison Table – Smashing Magazine

Another extensive breakdown of a design pattern from Vitaly. This time he takes a look at feature comparison tables.

smashingmagazine.com


Lazy loading images using Intersection Observer | Dean Hume

Using Intersection Observer when lazy loading images, to avoid the jank that can occur as re-layout happens when images load in.

deanhume.com

Interesting

[css-grid] fit-content() vs 'stretch' alignment · Issue #1732 · w3c/csswg-drafts

What we initially thought was a simple issue raised over on my GridBugs repo, turned out to be a bit more involved (don't they always!?)

If you have thoughts to add with regard to whether fit-content should stretch or not, comment on the issue.

github.com

Our Sponsor

Learn, prototype and get creative

CSS Grid is powerful and no doubt the layout method of the future. CCS Grid might take a little to get used to though. That's why we created Grid Builder. And so everybody can learn and work with this exciting new technology, we made it free!

As you can see in the screenshot above, we totally got creative while toying around. Just hop over to get the app, play with the showcases or create something from the start. Then let us know what you think!

You are also welcome to hang around a bit, look at demos and read up on Grid. See ya there!

cssgrid.cc