iRoom

The flex one,
in a flex world.

A CSS framework built on flexbox, cascade layers and custom properties: a twelve columns grid, more than thirty components, light and dark themes, parallax and a 6 kB script. No dependency.

Download v3.0.2 Get started

Why iRoom

Everything a page needs, nothing it does not

Classes that read like what they do, a grid that bends to every screen and components that look good in both themes.

A real flex grid

Twelve columns, four sizes, true gaps instead of negative margins, offsets, order and every alignment.

Cascade layers

Reset, tokens, base, layout, components, utilities: an utility always wins, and your own CSS wins over everything.

Light, dark or auto

Put data-theme on the page or on a single section. The auto theme follows the operating system.

Themed by variables

Change --ir-primary: hover, soft, border and text shades follow, mixed by the browser. No rebuild.

Accessible by default

AA contrasts in both themes, ARIA and keyboard support in every component, reduced motion respected.

6 kB of JavaScript

Dropdowns, navbar, tabs, modals, lightbox, filters, scrollspy, parallax… Strict TypeScript, tested, no setup, no jQuery.

Make it yours

One variable, a whole new look

Pick a color: this page sets --ir-primary on the <html> element and every component follows, in both themes.


                        :root {
                            --ir-primary: #6d3fc0;
                            --ir-radius: .75rem;
                            --ir-font-heading: Georgia, serif;
                        }
Ada Lovelace Front-end developer
Online

Components

33

82 %

JavaScript

6 kB

30 %

The soft background, the border and the text are mixed from the primary color.

Get started

Up and running in two minutes

Download the archive, link two files, write HTML.

1

Download

The compiled files, the Sass and TypeScript sources and the fonts.

framework.zip

  • your project
    • css
      • iroom.css, iroom.min.css
      • img: the logo and the favicon
    • js
      • iroom.js, iroom.min.js
      • iroom.esm.js, for a bundler
      • types: the TypeScript declarations
    • fonts
      • Poppins (titles)
      • Libre Barcode 128 Text (logo)
    • sass, ts: the sources
    • example.html
2

The minimum HTML

One stylesheet, one deferred script. Remove data-theme to stay in the light theme.


                        <!DOCTYPE html>
                        <html lang="en" data-theme="auto">
                        <head>
                            <meta charset="UTF-8"/>
                            <meta name="viewport" content="width=device-width, initial-scale=1"/>
                            <title>Example page</title>
                            <link rel="stylesheet" href="css/iroom.min.css"/>
                            <script src="js/iroom.min.js" defer></script>
                        </head>
                        <body>

                            <!-- PUT YOUR CONTENT HERE -->

                        </body>
                        </html>
3

Build from the sources optional

Dart Sass for the CSS, TypeScript, esbuild and Vitest for the JavaScript. The tokens (breakpoints, spacing, colors) live in sass/abstracts/_tokens.scss.


                        npm install
                        npm run build     # css/ and js/, minified files and source maps included
                        npm run check     # the linter (Biome) and the tests (Vitest)
                        npm run watch     # rebuilds css/iroom.css on every change