A Smashing Case Study
In this talk, Sara will share a lot of things that she has learned while building the new Smashing Magazine. She has been challenged to come up with techniques that she was never using before, as well as what she thought she’d never have to use, including some techniques that are definitely more hacky than anything.
The Front-End Espresso Shot
CSS has seen a lot of new feature releases in the last few years. Keeping up with everything can sometimes be overwhelming. It’s even harder for many designers and developers to ditch the tools and frameworks they’re already familiar with and relying on, in favor of new, native “frameworks” with a less than familiar syntax. But doing so is the way forward.
CSS’s native features like Flexbox and Grid as well as CSS Variables provide a lot more power and flexibility than any previous frameworks or tools did—power than we should embrace and put to good use today moving forward.
In this workshop, we will cover a range of topics from SVG usage as an image system to CSS features, building progressively enhanced page layouts with the newest CSS layout techniques, creating truly scalable, responsive typography, theming using CSS Variables, and creative visual effects using CSS transformations, blend modes and filters, and making sure our components have at least the minimum level of accessibility.
You'll walk away with knowledge they can apply right away, including:
- Creating creative page layouts with the new CSS Grid framework.
- Component-level layout enhancements using CSS Flexbox.
- Using CSS’s native feature detection @supports to leverage the new layout techniques, all the while providing basic fallback for non-supporting browsers.
- Using CSS custom properties to create and support multiple themes, including providing an accessible theme for less accessible designs.
- Using math in CSS to create scalable, responsive typography for our responsive designs: CSS viewport and relative units inside calc().
- Using CSS transforms and shapes to break out of the box and create creative, non-rectangular layouts.
- Make peace with the occasional responsible usage of CSS hacks, without compromising the accessibility of the user interface.
- Implementing SVGs in a responsive workflow, including basic icon animations.
- Enhancing and styling UI elements (such as form elements) accessibly and using animated SVGs.
- Learn how to use SVG to display, style and apply powerful image effects to other image formats!
- Strong focus on semantics and accessibility using ARIA roles and attributes where needed.
- Learning how all the new CSS features open up more flexible possibilities for designing and making decisions in the browser.
- We'll also be getting an overview of CSS graphical effects such as filters and blend modes, allowing us to give our designs that extra punch, making design and experimenting in the browser more accessible to us.
You will be challenged with a series of creative exercises, applying all the above techniques to solve real-world design challenges.
A bit about Sara
Named ‘Developer of the Year’ in the 2015 net awards and ‘Open Web Evangelist’ by Microsoft, Sara Soueidan is an independent front-end web developer, author and speaker from Lebanon. She runs workshops across the globe, and is renowned for her high-quality technical articles that she writes for the biggest publications in the Web industry, including Smashing Magazine and net Magazine.
Sara on the web
Don't miss out. Come see Sara Soueidan and other inspiring speakers at Source Up! 2017.
Early Bird tickets (10% off) start at R 5,850 (~USD 450) to learn from the world's leading front-end design experts in Johannesburg, South Africa.
Other great folks speaking at Source Up!