✨enchantment (Finnish) and 🔆light (Esperanto)
Lumo is a design system foundation for modern, beautiful and accessible web applications.
Lumo contains foundational styles – typography, colors, visual style, sizing & spacing and icons – that components and applications can use to achieve a consistent visual design.
The implementation of Lumo is based on CSS custom properties, and Polymer style modules. Note, that you don’t need to use Polymer to build your application in order to use Lumo.
For documentation and instructions how to get started, use the “Documentation” link in the latest release notes.
Part of the Vaadin platform
Lumo is maintained as a part of the Vaadin platform.
Cross-browser Testing Platform and Open Source <3 Provided by Sauce Labs.
Running demos and tests in a browser
vaadin-lumo-stylesrepository and clone it locally.
When in the
npm installand then
bower installto install dependencies.
npm start, browser will automatically open the component API documentation.
You can also open demo/documentation by adding demo to the URL, for example:
Adding or updating icons
icons/Lumo Icons.sketchusing Sketch
Follow the instructions in the Sketch document
npm installto install dependencies
gulp iconsto generate new versions of
Following the coding style
gulp lint, which will automatically lint all
.html files. CSS inside
.html files is also linted at the same time.
Creating a pull request
- Make sure your code is compliant with our code linters:
- Submit a pull request with detailed title and description
- Wait for response from one of Vaadin components team members
Updating the version number
npm version <new version> to update the version number in
package.json and in other relevant places such as
version.html, when preparing to release a new version.
Apache License 2.0