LumoCSS | Lightweight CSS framework for semantic HTML

Parrot

Parrots (order Psittaciformes), also known as psittacines from the name of the type genus Psittacus, are birds with a strong curved beak, upright stance, and clawed feet.

Source: https://en.wikipedia.org/wiki/Parrot

9KB

Minified JavaScript

14KB

CSS + JS gzipped

Your HTML shouldn't need a decoder. Try Lumo.

A modal in Bootstrap

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h1 class="modal-title fs-5" id="exampleModalLabel">Modal title</h1>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

The same modal in Lumo.CSS

<!-- Button trigger modal -->
<button data-target="testing-dialog">Launch default modal</button>

<!-- Modal -->
<dialog id="testing-dialog">
    <section>
        <header>
            <h4>Dialog title</h4>
            <button type="button" data-close-button data-close aria-label="Close dialog"></button>
        </header>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Veniam qui mollitia
            itaque
            et temporibus magnam hic id, optio earum cumque!</p>
        <footer>
            <button class="secondary" data-close>Cancel</button>
            <button type="submit">Confirm</button>
        </footer>
    </section>
</dialog>

Same component. Less framework-specific markup.

Designed for semantics. Built for simplicity.

Lumo.CSS is as simple as it looks, with semantic HTML and accessibility at its core. Its components share a consistent design language while preserving the behavior and meaning of native HTML.

Easy to learn. Because you don't have to.

Lumo.CSS uses the syntax you already know. If you understand semantic HTML, you already understand Lumo.

Everything you need. Nothing you don't.

Lumo comes as a single minified CSS and JS file with everything you need to get started. No pile of dependencies, no unnecessary imports.

Lightweight and fast.

The minified stylesheet is only 63 KB. Add it to your page and start building.

Shape it for your project.

Customize Lumo with CSS variables, classes, and built-in dark mode. Make it yours without fighting the framework.

Lightweight CSS framework for semantic HTML

Log in