Issue 98
Lots of little tips and tricks - Shapes, object-fit, aspect ratios and Viewport Units.
News
Issue 98
This week I have a collection of tips and tricks covering all kinds of interesting layout things. I really enjoy tutorials that cover one thing well, especially where they demonstrate a few ways of solving a problem.
Tomorrow I head to Amsterdam for CSSDay. I'm really excited to listen to the rest of the talks, and I'll be doing a shiny new talk about some of the things I learned about layout in general from working with CSS Grid Layout. After Amsterdam is San Jose for Fluent. There I will be doing a tutorial and a talk on CSS Layout, plus office hours. So come along and say hello if you are there!
Rachel Andrew, CSS Layout News
Microsoft Edge build 16215 changelog - Microsoft Edge Development
The release notes for this Windows Insider Preview build include new Edge features object-fit and position: sticky. Great to see Edge shipping this stuff.
Learn
Fun with Viewport Units | CSS-Tricks
"Viewport units have been around for several years now, with near-perfect support in the major browsers, but I keep finding new and exciting ways to use them. I thought it would be fun to review the basics, and then round-up some of my favorite use-cases."
CSS Shapes, clipping and masking – and how to use them
Firefox 54 will have new clip-path features. This post explains how to use clipping and masking, so many possibilities!
Aspect Ratio Boxes | CSS-Tricks
A run-down of various ways to make aspect-ration friendly boxes.
Cropping Images in CSS With object-fit ← Alligator.io
A tutorial explaining the object-fit property.
How the minmax() Function Works
An exploration of minmax() from Ire Aderinokun.
Interesting
CSS at BBC Sport (Part 1) – Medium
A really interesting read about the CSS architecture of the BBC Sport website.
Patricia Realini: CSS Art History 101: Decoding Layout Through The Ages
A talk recorded at CSSConf.eu:
"For centuries the visual arts have been used to tell stories, warn people about dangers and invoke emotion. Today we use the internet for all those purposes and more. Just as the Vatican employed painters to spread their message – it will be the developers and designers who will lead us into the next Renaissance. But there is still a lot to learn from the great masters. In this talk, we will flexbox the Golden Ratio with Leonardo DaVinci, up the pixel ratio for our devices with the Impressionists & ”inspect elements” of some iconic works of art to make the web a more beautiful place."
Our Sponsor
Are you struggling with CSS Layout? Fed up with hacks and wasting time debugging?
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.
CSS Layout News Newsletter
Join the newsletter to receive the latest updates in your inbox.