Foundation
Responsive breakpoints and rhythm application mixins for consistent vertical rhythm and spacing across all elements. These mixins ensure proper spacing application for rhythm-aware components.
| Name | Description |
|---|---|
$mobile |
Mobile breakpoint boundary (600px). |
$small |
Small screen/tablet breakpoint boundary (768px). |
$large |
Large desktop screen breakpoint boundary (1024px). |
$wide |
Ultra-wide display breakpoint boundary (1440px). |
$text-elements |
Selector list of inline and text elements receiving text-box-trim for baseline grid alignment. |
$rhythm-simple-tags |
Selector list of standard flow elements spaced by single rhythm gap. |
$rhythm-double-tags |
Selector list of heavier block elements spaced by multiplied rhythm margin. |
$rhythm-tags |
Union selector list of all rhythm-managed elements. |
%surface |
Placeholder selector applying card/surface elevation, radius, and background. |
%padding-text |
Placeholder selector applying standard text control padding. |
$stnd-theme-scope |
CSS selector scope for theme token assignment (:root by default). |
// Using breakpoint variables
@media (min-width: $small) {
font-size: 1.2rem;
}
// Extending surface placeholder
.my-panel {
@extend %surface;
}
since 0.1.0 · see standard-01-token.scss