Issue 58
Accessibility and new layout methods, using CSS Grid to create a hero block with better tolerance, 9-sliced SVGs
News
Issue 58
In this issue are a couple of videos from CSS Day earlier this year. I've been looking out for these being posted so I could share them as I attended the event this year, and they are well worth a watch.
I'm back at home this week before heading out to Berlin for View Source where I will be speaking about new layout methods in CSS. My favourite part of talking about these new layout methods is just how excited people get as they start to see the possibilities. Here is a Storify with tweets out of An Event Apart last week - it really is so much fun to show people a glimpse of the future!
Rachel Andrew, CSS Layout News
The web is not print and other stories
I've been building websites for 20 years, I've been running my own business for 15 of them. Here are some thoughts about our history - and why I'm still excited about the web.
Learn
Léonie Watson | On CSS accessibility and drinking tea | CSS Day 2016 on Vimeo
In this talk recorded at CSS Day Léonie looks at the changing relationship between design and structure brought by new layout methods such as flexbox, and what it means for accessibility mechanics in the browser.
CSS Grid Demo - Multiple Image Hero Layout - YouTube
A quick demo I created while putting together some examples for my upcoming conference talks. Here is how to use Grid (and a touch of flexbox) to create a hero image panel that copes with differing sizes and amounts of content.
Vasilis van Gemert | Mediaqueryless Responsiveness | CSS Day 2016 on Vimeo
In another talk from CSS Day find out how to create responsive layouts that don't require media queries. This is one of the nice things about our newer layout methods - they are inherently responsive which means we can do far less work!
Aerotwist - Slicing SVG 9 Ways
A demo and article detailing a technique that uses a combination of border-image and SVG to make 9-sliced SVGs for flexibly sized shadows.
AtoZ CSS: The CSS Value of Auto - SitePoint Premium
SitePoint have started a series called AtoZ of CSS. Here is A with The CSS Value of auto.
8 Clever Tricks with CSS Functions
Some nice tips including using calc() in your grids and for aligning position: fixed elements.
Interesting
Compare responsive frameworks. Find responsive design snippets, patterns and examples.
This is fun if you want to compare how different front-end frameworks do things or find snippets for a framework you already use.
Our Sponsor
A CMS that leaves you in control of the design and markup
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.