Issue 9
Flexbox, Responsive Design Patterns and layout thrashing.
News
Issue 9
This week I am off to France to speak about Grid Layout at Paris Web. I also have upcoming CSS Layout workshops planned - at Future of Web Apps in London and Falsy Values in Warsaw. I believe both still have some spaces available.
CSS Layout News
Learn
Enhancing Responsiveness with Flexbox (CSS Conf EU 2015)
Zoe Gillenwater presented her talk on Enhancing Responsiveness with Flexbox at CSS Conf EU, here are the slides.
What forces layout / reflow?
All of the listed properties or methods, when requested/called in JavaScript, will trigger the browser to synchronously calculate the style and layout. This is also called reflow or layout thrashing, and is common performance bottleneck.
We spent a week making Trello boards load extremely fast. Here’s how we did it. - Fog Creek Blog
For a real-world example of how avoiding layout thrashing can speed up your application, read this post from the Fog Creek blog.
Experiment: Using Flexbox Today - Chris Wright
A post with some nice examples of Flexbox usage.
Interesting
Flexbox Quote Bricks
A nice CodePen example of Flexbox used to display an image alongside a quote.
Patterns — Responsive Web Design
These are a series of patterns that are useful when putting together your website designs and solving difficult problems that people have already solved for you.
Our Sponsor
It doesn't have to be WordPress
Perch has no themes, no built in mark-up, and has been designed to be lightening fast. See the difference by trying Perch today.
CSS Layout News Newsletter
Join the newsletter to receive the latest updates in your inbox.