The framework is split in six layers. A later layer always wins over an earlier one, whatever the specificity; your own CSS, outside of any layer, wins over all of them.
@layer reset, tokens, base, layout, components, utilities;
/* yours, unlayered: one class is enough to override a component */
.btn { border-radius: 0; }
Light by default; data-theme="dark" forces the dark theme, data-theme="auto" follows the system. On the page or on any element.
Light
data-theme="light"
Success
Dark
data-theme="dark"
Success
A data-theme-toggle button switches the theme and saves it (JavaScript). .dark-only and .light-only show a content in one theme. To avoid a flash at the load, apply the saved theme in the head:
<script>
try {
var theme = localStorage.getItem('iroom-theme');
if (theme) document.documentElement.setAttribute('data-theme', theme);
} catch (e) {}
</script>
Every value is a custom property prefixed with --ir-. Override them in your stylesheet, no rebuild needed.
:root {
--ir-primary: #6d3fc0; /* and --ir-on-primary for its text */
--ir-radius: .75rem;
--ir-gutter: 1.5rem;
--ir-font-body: 'Inter', sans-serif;
}
/* a local change needs data-theme, to recompute the derived shades */
.promo[data-theme] {
--ir-primary: #c2255c;
}
A layer that moves slower than the page. The JavaScript gives the progress of each visible section, the CSS turns it into a translate on the compositor. The headers of this site use it.
Scroll the page:
The flex world
The image moves slower than the text, which fades as the section leaves.
.parallax
the section: it clips the layer and gives the timeline
.parallax-layer
the moving layer: an image, a <picture>, a video or any element, behind the content
.parallax-slow, .parallax-fast
the share of the section height the layer travels: .08, .15 by default, .3
.parallax-content
optional: rises and fades as the section leaves the screen
The JavaScript writes --parallax-progress (0 when the section enters the screen, 1 when it leaves) on the visible sections only, found by an IntersectionObserver. Without JavaScript, and for the visitors who asked for less motion, the layer stays still. For another amplitude, set --parallax and --parallax-shift, its travel in % of the layer: p / (1 + 2p).
Alignment for every size, transforms, sizes, weights and overflow.
.text-center .text-left-m: centered on small screens
.uppercase .tracking-wide .text-sm
.weight-light .text-lg
.truncate: a very long sentence that does not fit on one line
.line-clamp-2: Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab accusamus aperiam consectetur culpa distinctio dolorem enim eos facilis, iusto maxime minima placeat.
