iRoom — The flex one, in a flex world.
iRoom
$ cat stack.txt SCSS Dart Sass 1.106 TypeScript 7.0 esbuild Vitest Biome $ stats --short 16 kB CSS, gzipped 6 kB JavaScript, gzipped 30+ Components
Front-end, 2017
Scroll down
—Overview
iRoom is a CSS framework of its own: no Bootstrap, no Tailwind. One stylesheet in six cascade layers — a commented reset, design tokens, a twelve columns flex grid, more than thirty components, light and dark themes driven by custom properties, parallax — and one 6 kB script in strict TypeScript that opens the menus, the tabs, the dialogs and the lightbox, keyboard included. First released in 2017, rewritten from a blank page for its third version, under the MIT license.
02The front
What people see.
Classes that read like what they do: the page is written in HTML, and the framework stays out of the way — one stylesheet, one deferred script, and every component follows the theme.
A reset first,
then six layers
The reset is the first layer of the cascade, then come the tokens, the base, the layout, the components and the utilities. A utility always wins over a component, and a style of your own wins over all of them, without !important.
Every color is a custom property: change --ir-primary, and the hover, soft, border and text shades follow, mixed by the browser, with no rebuild.
—Screens
Scroll sideways
Twelve components,
one small script
The script starts by itself once the page is parsed: the markup is enough. It sets up the markup added later too, removes every listener when it stops, and follows the platform — a native dialog, commandfor and closedby, polyfilled only where a browser lacks them.
Every page of this site is built with it: view the source, it is meant to be read.
03The back
What keeps it standing.
$ cat stack.txt SCSS Dart Sass 1.106 TypeScript 7.0 esbuild Vitest Biome
- 16 kBCSS, gzipped
- 6 kBJavaScript, gzipped
- 30+Components
- 12Grid columns
- 6Cascade layers
- 25Automated tests
- 0Dependencies
- 0W3C errors
37 features6 modules
016 features
Foundations
- A commented reset, the first layer of the cascade
- Six cascade layers: your own CSS always wins
- Design tokens as --ir-* custom properties
- Light, dark and auto, on the page or on any element
- Shades mixed by the browser from one color
- Poppins served with the framework, no font service
026 features
Layout
- A twelve columns flex grid with real gaps
- Mobile first: -m, -l and -xl on every utility
- Offsets, order and every alignment
- Stack, cluster and grid primitives
- Containers in four widths
- Parallax sections at three speeds
037 features
Components
- Buttons in six tones: solid, outline, soft, ghost, link
- Fields, input groups, checkboxes, radios and switches
- Cards, alerts, badges, tags, avatars and tables
- A navbar: sticky, transparent over a header, megamenu
- Dropdowns, tabs, accordions and tree views
- Native dialog modals and a lightbox
- Tooltips, progress bars, spinners and skeletons
046 features
JavaScript
- Twelve components in 6 kB, strict TypeScript
- Starts by itself: the markup is enough
- Markup added later is set up as it arrives
- start() and stop(), every listener removed
- Typed ir:* events and options
- commandfor and closedby, polyfilled where missing
056 features
Accessibility
- AA contrast in both themes
- ARIA states written by the script
- Arrow keys in the menus and the tabs
- A visible focus ring
- Reduced motion: no transition, no parallax
- Print styles
066 features
Delivery
- Sass modules, sources in the archive
- A script, its minified version and an ES module
- Source maps and type declarations
- Vitest tests on happy-dom
- Biome lint and format
- MIT license
—Built-in quality
