Issue 62
Grid is now at Candidate Recommendation, what does that mean. Plus responsive images, flexbox and SVG links.
News
Issue 62
This issue goes out as I'm speaking at An Event Apart in Orlando. It's been my first experience of a Disney Park - that's been interesting in itself! The news this week is that Grid Layout has gone to Candidate Recommendation, so we are a big step closer to having it available in browsers. Unsurprisingly there has been a lot more buzz online about Grid, I've tried not to entirely fill this email with Grid Layout stuff though.
We've also got pattern libraries and style guides, SVG and responsive images. So hopefully something for every interest.
Rachel Andrew, CSS Layout News
CSS Grid Layout Module Level 1 at Candidate Recommendation
Last week CSS Grid Layout transitioned to Candidate Recommendation status. I wrote a post to explain what this actually means for the specification.
Learn
Free Learn Grid Layout video series
I have posted the first set of videos in what I intend to be a comprehensive introduction to the CSS Grid Layout specification.
More coming very soon!
SVG has more potential · MadebyMike
Some interesting tips demonstrating how SVG is much more than just an alternate image format.
Grid layout is a much needed step-change for CSS | Matt Hinchliffe, Front-End Developer
I love this post from Matt Hinchliffe, a front-end developer working on the Financial Times. He has take the layout patterns using on the FT website and demonstrates how they would be created using Grid.
View Source Conference Berlin | Rachel Andrew | Presentations
My talk at View Source Conference in Berlin contrasted grid and flexbox, it is an introduction to both specifications - their similarities and differences.
AtoZ CSS Quick Tip: Justifying Text and Using Flexbox
A quick tip on the justify-content property as part of SitePoints A-Z of CSS series.
Clarity Conference 2016 - SitePoint Premium
The videos from Clarity, a conference about pattern libraries and style guides, are now available free on SitePoint. If you are interested in the move to using style guides and pattern libraries as deliverables and as a way to keep your projects consistent there is some good stuff here.
Interesting
Automating Art Direction With The Responsive Image Breakpoints Generator – Smashing Magazine
A thorough article explaining how to automate "art directed" crops for responsive images.
"Any time we alter our images visually to fit a different context, we’re “art directing.” A resolution-adaptable image will look identical everywhere — it only resizes. An art-directed image changes in visually noticeable ways. Most of the time, that means cropping, either to fit a new layout or to keep the most important bits of the image visible when it’s viewed at small physical sizes."
Web Platform Feature Availability
A page that shows the percentage of users who have a browser natively supporting various web platform features.
Our Sponsor
A CMS made for web designers and developers - and their clients
We believe that content management systems should manage content really really well, and leave the design and front-end code to you. That's why when you use Perch or Perch Runway you have full control of everything the CMS outputs.
Use any framework you like, or your own carefully crafted HTML and CSS. Output to JSON instead of HTML? No problem at all! And with our focus on performance your site should be super-fast too!
CSS Layout News Newsletter
Join the newsletter to receive the latest updates in your inbox.