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
Zoe Gillenwater presented her talk on Enhancing Responsiveness with Flexbox at CSS Conf EU, here are the slides.
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.
For a real-world example of how avoiding layout thrashing can speed up your application, read this post from the Fog Creek blog.
A post with some nice examples of Flexbox usage.
Interesting
A nice CodePen example of Flexbox used to display an image alongside a quote.
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
Perch has no themes, no built in mark-up, and has been designed to be lightening fast. See the difference by trying Perch today.