Build a Better Accordion
Fun with semantic markup, CSS animations, and Sass mixins
This is from a talk I gave at ATXSass in July 2015.
Accordions are a useful way to handle groups of nested lists when there’s not a lot of screen real estate to play with – especially handy for off-canvas navigation on mobile devices. Don’t see yourself needing to build an accordion any time soon? That’s okay! We’ll talk about things that’ll help make anything you build even more awesome:
- Semantic markup (When do I use an
<a>? When do I use a<button>?) - Animatable and non-animatable CSS properties
- Making Sass do the work for you
After laying the groundwork, I’ll walk through building a mixin that lets us add good user affordance and silky-smooth CSS animations with a single line of code.
This is a fairly beginner-level talk that also includes:
- Baseball
- Flippy things
- Sage words from a wise devops man