Issue 104
CSS Grid, display: contents and the perfect slider.
News
Issue 104
I have been on vacation in the South of France - which is why I had time to write two blog posts in the last week. However it has been nice to be in the sunshine and to travel for reasons other than a conference for once! A week at home and I'll be heading back to France, to Paris and the CSS Working Group meeting. I hope fellow Northern Hemisphere dwellers are also having a good summer, and managing to get away from the screens into the sunshine while it lasts.
Rachel Andrew, CSS Layout News
Learn
An explanation of the difference between display: contents and the proposed idea for CSS Grid subgrid.
A good walkthrough if how to enhance a layout to ensure a good - not identical - experience in all browsers.
The next article in my series walking through the CSS Grid specification, building the examples used in the "background and motivation" section of the spec.
I'm very keen on working within components and in pattern libraries. The approach has pretty much transformed the way I work over the last couple of years. This post gives some helpful steps for testing the accessibility of your components.
Another long and detailed article from Vitaly, this time looking at how one might design the "perfect slider".
Interesting
Thoughts on Container Queries and Houdini from Jeremy.
Be sure to check out the actual demo linked to this article, a really creative slideshow using Grid Layout and other CSS features.
More wisdom from Jeremy,
"Using CSS at scale has a learning curve, just like any powerful technology. The way to deal with that is not to hammer the technology into a different shape, but to get to know it, understand it, and respect it."
Our Sponsor
Let me teach you layout, and save yourself time with every site you build.
I've distilled my knowledge about CSS Layout into this training course. This course has something for you if you are new to CSS, have been using frameworks for a while and want to understand how they work, or have been doing this for a while but want to understand the newer layout methods. The course includes video tutorials, text explanations and all the starting points to follow along.
The full table of contents gives an overview of what you can learn - at your own pace. We also have a Slack community where you can ask questions about the course materials.