Issue 51
Several flexbox tutorials this week, an update on Grid Layout and an interview with me as I head to Australia.
News
Issue 51
Lots of Flexbox in the email this week and several links to good walkthroughs of specific techniques. These types of tutorials are always really popular - if you do something interesting on a project and can write up how you solved the problem send me a link.
Rachel Andrew, CSS Layout News
Web Directions Monday Profile: Rachel Andrew - Web Directions
By the time the next edition of this newsletter is sent I'll be in Australia for Web Directions Code. This is an interview with me, also published in Web Directions Scroll Magazine.
CSS Grid updates, changes and state of the browsers
My roundup of recent changes to the CSS Grid Layout specification plus information about current browser implementations.
Learn
the new code – A Previous-Next UI Navigation Pattern with Flexbox
A tutorial from Dudley Storey demonstrating how to create a previous and next navigation pattern with Flexbox.
SitePoint's Tiles: A Case Study in Components, Theming and Flexbox
Using flexbox to recreate the Tiles used on SitePoint.com. Another nice walkthrough tutorial from Hugo Giraudel.
Considerations for Styling a Modal | CSS-Tricks
"A modal. A small box that pops up to tell you something important. How hard can it be? Wellllll. Medium hard, I'd say. There's quite a few considerations and a few tricky things to get just right. Let us count the ways."
Things to think about if you need to use a modal in your site or application.
Introducing the CSS clip-path Property
A tutorial introducing the CSS clip-path property. It is worth noting that the same shapes you use for clip-path can be used for CSS Shapes. I often use the Clippy tool when creating complex shapes.
Interesting
Web Directions Video: in conversation with Jen Simmons - Web Directions
Also on the Web Directions site is an interview with Jen Simmons. I'm speaking at a number of events with Jen this year. While I throw 160 slides of code at audiences, Jen inspires with her examples of the new things we can do once we have learned new techniques.
The limits of @supports - QuirksBlog
" I’m forced to wonder about the limits of @supports. What’s clear from these tests is that @supports is only useful when you’re detecting entire CSS modules such as flexbox."
ppk does some detailed testing of @supports, interesting as this feature is very useful in working with newer CSS features such as Grid Layout given that there won't be a browser supporting grid that doesn't also have @supports.
Our Sponsor
Virtual CSS and Sass Conference Event - July 26-28, 2016
Join us for the virtual CSS and Sass conference event, CSS Summit, and discover the tips and techniques to improve your CSS, keep it responsive and lean, and ready for the future. From Flexbox to Style Guides, from Sass to PostCSS, our experts can help you find the best ways to create your best CSS. Best of all, there’s no travel hassle with E4H’s online events! Enjoy all the presentations, and ask questions of the speakers live on your own desktop, then review the recordings later on at your own pace. Register now and save 20% with LAYOUTNEWS code at CSSSummit.com.
CSS Layout News Newsletter
Join the newsletter to receive the latest updates in your inbox.