v0.0.1older

Documentation version

Currently searching v0.0.1

Search pages, component props, utilities and tokens.

↑↓ to move to openesc to close

Open files in your editor

On a Mac, right-click the folder in Finder, hold Option, and choose Copy as Pathname.On Windows, hold Shift, right-click the folder, and choose Copy as path, then delete the quote marks.

Start hereLumos 0.0.1

Introduction

What Lumos is, and how to read these docs.

Lumos is a component and styling framework for Astro. It gives you a set of design tokens, a predictable cascade, a library of utility classes and a set of components that already know how to be accessible.

It is free, MIT licensed and open source. You copy it into your project and it is yours: no account, no per-seat pricing, no publish button standing between you and the site.

The philosophy

Everything else in these docs is one of these five rules applied to a particular case.

  • Everything scales with the user's font size

    When a user adjusts their font size, the site responds the same way it does to browser zoom, because everything is set in rem. Mixing px and rem breaks that: text overflows, content gets crowded, and you are left maintaining two versions of the site. With everything in rem, you only have to check every screen size. Every font size follows.

  • Define it once. Use it everywhere.

    Type and spacing scale smoothly with the screen size instead of jumping at fixed breakpoints. Autofit grids automatically adjust to the space they are used in. Container query layouts pick the right format based on where they are. These techniques let you define a style in one place and let the site evolve without things breaking.

  • Components adapt to where you put them

    Put a button inside a dark section and it takes that section's colors. There is no modifier class to add, because a theme is a class and everything inside it inherits from it. Move a grid from a wide page into a narrow sidebar and it drops to fewer columns on its own, because it measures the space it has rather than the size of the window. You place the component; it works out the rest.

  • Accessibility is built in, not added later

    Real elements instead of divs pretending to be buttons. Focus states you can see. Labels and landmarks already in place. Motion that stops for a reader who has asked for less of it. Leaving this to a check before launch is too late: by then the markup is built the wrong way, and fixing it means building it again.

  • Markup you can read

    A variant is one class on the parent. You change the button style or the layout type by changing that class, not by rewriting everything inside it. No data attributes standing in for styles. No wrappers nested five deep. No row of a dozen utility classes where one named class would say what the thing is.

How these docs are organised

  • Start here

    Installing it, the shape of a project, and where what you already know lands here.

  • The system

    Why Lumos is built this way.

  • Components

    Every component, every prop, with a rendered example.

  • Classes

    Tokens, utilities and patterns, generated straight from the source so they cannot go stale.

Versions

Lumos is pre-1.0 and moving quickly. Component props will be renamed and classes will change before it settles. Every release keeps its own copy of these docs, and the version picker in the header switches between them without losing your place.