Issue 114
Firefox Quantum is now in Developer Edition, test your sites! Plus lots more CSS Grid.
News
Issue 114
I'm back in the UK, getting caught up on things that are easier to do in the office before my October events kick off - I'll be in Ireland, Portugal, Germany, France plus an event in London before I head back to the USA for An Event Apart San Francisco. An Event Apart are sponsoring this issue of CSS Layout News - take a look at the footer of the email for a special offer code. I'll be doing a brand new talk for the final two events of 2017.
I'm also counting down the days to the launch of my book - The New CSS Layout. I've put some additional information on my site, if you want to take a look at what I cover in the book.
Rachel Andrew, CSS Layout News
Firefox Quantum Developer Edition: the fastest Firefox ever with Photon UI and better tooling ★ Mozilla Hacks – the Web developer blog
Firefox Quantum is now in Developer Edition, and it really is noticeably fast. With a new CSS engine in place there is the possibility of new layout issues, so this is a really good time to test your sites and report any problems that you see.
New WebKit Features in Safari 11 | WebKit
This posts lists the various improvements in Safari 11. Of interest to readers of this newsletter are the improved Flexbox support and updates to CSS Scroll Snapping.
Learn
CSS Grid Gotchas And Stumbling Blocks – Smashing Magazine
I took the most frequently asked questions that I hear about grid layout and wrote an article about them for Smashing magazine. I'm going to be writing a series of posts about layout for Smashing so watch this space!
Essential Image Optimization
A fantastic guide to image optimization. A must-read for every front-end developer.
CSS Grid PlayGround | Terminology | Mozilla
I'm a huge fan of the Grid Inspector which is part of Firefox DevTools. If you are using Grid, even a tiny bit, make sure you have an up to date copy of Firefox Nightly so you can use the very latest Grid Inspector tools.
This site is from Firefox DevTools and is a walkthrough of some of the basic feature of Grid Layout.
Contextual Callouts with CSS Grid - Jonathan Harrell | CSS Blogger & Teacher, UI/UX Designer, Front-End Developer
A practical article demonstrating how to create contextual callouts using CSS Grid.
Interesting
More Padding, Please! – Wayfair Design – Medium
An interesting article on the use of white space in UX design. As someone who thinks in code not pictures I found the A/B comparisons very useful.
Comic book style layout with CSS Grid
A fun comic book type layout which uses CSS Grid and clip-path.
Our Sponsor
Not your father’s design & front-end conference
Designers and developers who seek out An Event Apart are a special breed. They know what's happening in web and interaction design, and want to know what's coming next. They’re eager to share with their peers and to learn from the unrivaled leaders in interaction and UX.
They’re women and men like you, who come to AEA for three days of design, code, content, and comradery. They return to work energized by new ideas. So, come. Join your people. Register now and save $100 with code AEACSSLAYOUT.
CSS Layout News Newsletter
Join the newsletter to receive the latest updates in your inbox.