Challenge - Expert capstone
Build a design system combining all expert topics.
Design system: all expert topics
This capstone blends every expert topic into one design system. BEM class names label the components; @layer orders priority. Container query reshapes a card to its host; view transition animates card swaps; anchor positioning pins the dropdown.
Nesting (&.is-active) keeps declarations tidy; will-change: transform speeds up the animation. Seven topics merge into a consistent, fast and predictable interface.
Exercise Build the capstone card base
Build the design system's card component. Open an @layer components block and place .card inside with padding: 1rem, container-type: inline-size and view-transition-name: card. In the same block add .card__title with font-size: clamp(1rem, 4cqi, 1.5rem).
Show example solution
/* card component */
@layer components {
.card {
padding: 1rem;
container-type: inline-size;
view-transition-name: card;
}
/* card title */
.card__title {
font-size: clamp(1rem, 4cqi, 1.5rem);
}
}Exercise Build the capstone dropdown panel
Add the dropdown panel. On .card__button add anchor-name: --card-btn. On .card__menu add position-anchor: --card-btn, position: absolute, top: anchor(bottom), position-try: --flip and will-change: transform.
Show example solution
/* card button */
.card__button {
anchor-name: --card-btn;
}
/* card menu */
.card__menu {
position-anchor: --card-btn;
position: absolute;
top: anchor(bottom);
position-try: --flip;
will-change: transform;
}Test yourself
-
Which declaration speeds up a card animation?
.card { /* ??? */ animation: cardIn 0.3s ease-out; }- transform: optimize
- will-change: transform
- speed: fast
- animation-speed: high
Show answer
will-change: transform — Correct. will-change: transform tells the browser the transform property is about to change; this makes the animation smoother.
-
Complete the nesting & selector
.card { padding: 1rem; ____.is-active { border-color: #6366f1; } }Show answer
.card { padding: 1rem; &.is-active { border-color: #6366f1; } } -
Match design system pieces
- @layer
- Priority layer
- container-type
- Container responsiveness
- view-transition-name
- Transition binding
- anchor-name
- Anchor name
- will-change
- Animation hint