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.
In one day, you’ll learn:
Creating creative page layouts with the new CSS Grid framework- Component-level layout enhancements using CSS Flexbox- Using CSS’s native feature detection
@supportsto 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.
This workshop is for professional Web designers and developers and assumes that you’re already familiar with HTML5 and a little CSS.
Attendees will be challenged with a series of creative exercises, implying all the above techniques to solve real-world design challenges — satisfaction guaranteed!
Workshop Schedule
- 8:30 Doors open, Registration
- 9:00 Introduction & Kick-off
- 11:00 Coffee Break
- 12:30 Lunch
- 13:30 Afternoon Session
- 15:00 Coffee Break
- 17:00 The End, Networking
Workshop Includes
- Snacks and drinks during the whole day
- Tea and coffee
- Lunch
- Paper and pen/pencil
Required equipment and knowledge
This workshop is for professional web designers and developers and assumes that you’re already familiar with HTML5 and a little CSS. It‘s a good idea to bring your laptop to the workshop. Pencils, markers and paper will be supplied.
Location
TBA
Smashing Newsletter
