Skip to content

Issue 122

A Smashing CSS Grid webinar, the Firefox CSS Shapes Highlighter, and a lovely travel site for your inspiration

Rachel Andrew
2 min read


Issue 122

I hope my American readers had a lovely Thanksgiving and are refreshed for the final weeks of 2017. My calendar is filling up with 2018 events already - so much to look forward to!

Later this week I'll be doing a webinar on CSS Grid Layout for Smashing Magazine, this is something new we are doing at Smashing, and it should be good fun. I'll be doing a one hour presentation and then we'll have a chat about Grid and layout.

This week the newsletter is sponsored by Smashing Conference - highlighting the San Francisco event next year. I'll be there, and having spoken at the venue last year the Palace of Fine Arts really is a very nice place to have a conference.

Have a great week!

Rachel Andrew, CSS Layout News

New in Firefox 58: Developer Edition – Mozilla Hacks – the Web developer blog

Of interest to readers of this email is the CSS Shapes Highlighter now part of DevTools, which highlights elements with a clip-path property.


Common Responsive Layouts with CSS Grid (and some without!)

A nice article full of code examples - I do love articles that include code examples - demonstrating some common responsive layouts using CSS Grid.

Advocating for Accessible UI Design | CSS-Tricks

An article that gives some tips to help designers and developers work together to create more accessible user interfaces.

Eric's Archived Thoughts: Generating Wireframe Boxes with CSS and HTML5

"I thought about taking screenshots and Photoshopping wireframe boxes over the various layout pieces, but then I wondered: could I overlay boxes on the live page with CSS?  Or perhaps even create and overlay them with nothing but some declarations and a wanton disregard for the sensibilities of god or man? And that’s when I realized…I could."

CSS Grid Starter Layouts | CSS-Tricks

"This is a collection of starter templates for layouts and patterns using CSS Grid. The idea here is to show off what the technique is capable of doing and provide a starting point that can be re-purposed for other projects."


Inspiration from Lauren Hallden - Travel Log

This is just lovely. It uses CSS Grid for the galleries and she includes the code at the end if you want to make your own. Perhaps a nice Christmas project!

Brenda Storer — Practical CSS Grids

On the Non Breaking Space podcast, Brenda Storer talks about CSS Grid.

Our Sponsor

SmashingConf San Francisco. April 17-18, 2018.

SmashingConf San Francisco. April 17-18, 2018.

We love bringing people together, and creating a friendly atmosphere for everybody to share and learn. No fluff, no theory — just actionable insights applicable to your work right away.

The conference will cover the ultimate CSS layout techniques, performance optimization, UX, strategies and design workflows, tips on establishing and maintaining design systems, and techniques to produce resilient, fast responsive websites. Get the last super early birds →