Issue 47
A Firefox Grid Inspector, Grid Status in Chrome and a Snap Points Carousel
News
Issue 47
A request! I'm looking for examples of layout that we can't do using CSS alone. So that might be a place where you have to use some JavaScript to get a flex layout to do the exact thing you need, or just something that is completely unsolved right now. A good example might be the use case solved by CSS Exclusions, being able to wrap text around all sides of an image.
I'm more interested in completely impossible things rather than bugs in browser implementations for existing things - however if you send me something impossible and I figure there is a way to do it, I'll write it up. If you have a CodePen/js Bin or similar that demonstrates the issue that's ideal - but I'll happily accept a drawing!
On with the links, a whole bunch of stuff this week and a new sponsor - thanks to Environments for Humans for sponsoring this week with the CSS Summit.
Rachel Andrew, CSS Layout News
Snapper: A CSS Snap Points Carousel
"Snapper is a lightweight script that'll apply CSS and JS carefully to create a broadly-functional snap-points carousel. This script builds on a simple overflow container and native CSS snap points"
Mozilla Grid Inspector Release 1.5.1 · mozilla/css-grid-inspector
A grid inspector for Firefox. It's still in development and has bugs (at the time of writing grid gaps seem misplaced) but this is really promising for anyone working with CSS Grid Layout.
Status of CSS Grid Layout implementation
When I present on Grid, everyone wants to know when it will be shipped. I have no answer to that question but here is a great set of slides explaining the status of the implementation in Blink - with links to the Chrome bugs so you can take a look at progress of any feature you want to be able to use.
Learn
How well do you know CSS display?
A brilliant guide to the display property from Chen Hui Jing.
Coverage of CSS Day 2016 | Lanyrd
I attended CSS Day and HTML Special in Amsterdam last week, and here is a link to all of the coverage of the event.. All of the talks were filmed and so there should be videos at some point in the future.
Layout fans should take a look at Mediaqueryless Responsiveness and Braces to Pixels.
Interesting
Thinking about page floats, figures, regions and grids
As you may have noticed I like to play around with experimental CSS, to try and find the edges of what is possible. In this post and related code examples I'm taking an example from the CSS Figures specification and seeing whether any other specs can get us close to that layout. It involved several browsers and some imagination!
Step by Step CSS Layout
"Adding elements to a page one at time to demonstrate the one-way nature of most CSS layout; later elements do not affect the position of earlier elements."
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.