CSS and SVG in 2018

Feeling overwhelmed at the amount of new CSS and SVG features and techniques you keep hearing about? Join CSS superstar Lea Verou and “Father of SVG” Chris Lilley in a day jam-packed with CSS and SVG goodness that will not only bring you up to date, it will help you understand all these new features at a deeper level. You will learn:

• Writing maintainable CSS using CSS variables to improve maintainability of your CSS and streamline communication between CSS and Javascript. What are their limitations, and how can we get around some of them?
• How to use new OpenType features to progressively enhance your typography before you can say "diagonal-fractions"
• How Variable Fonts can help you, today and in the future
• The Web Design Cheat Code: Going beyond what CSS can do, by utilizing SVG right there in your CSS.
• Utilizing CSS features that came from SVG such as clipping paths, masking, blending modes for innovative layouts that break outside the box, literally
• Getting up to speed with Grid Layout and Flexbox, including tips & tricks that may surprise even those of you that already use them daily
• Pragmatic, modern fallback strategies for preventing your 2018 CSS from breaking in 2013 browsers.

By the end of the day you are up to date on CSS variables, layout and fallbacks, OpenType features, Variable Fonts and SVG & CSS for innovative layouts. You will practice what is taught hands-on, at your own pace, with a series of practical exercises to make sure you walk out with a real understanding of what has been taught, and are ready to immediately apply it to your daily work. Bring your questions & problems! Are you working on a tough CSS or SVG problem that you just can’t figure out? Send it to us before the workshop, and the best few will be solved live in the workshop!

Who is it for

Designers and front-end developers with at least intermediate knowledge of CSS. No knowledge of SVG is required, but a basic understanding will certainly help. Please bring your laptop to the workshop, and make sure you have a recent version of Google Chrome installed (so that we are all using the same devtools), plus any other browsers for testing.