@vaadin/vaadin-lumo-styles

What is @vaadin/vaadin-lumo-styles?

@vaadin/vaadin-lumo-styles is a package that provides a set of customizable CSS styles and design tokens for Vaadin components. It is part of the Vaadin platform, which is used for building modern web applications. The package includes a variety of styles such as typography, color schemes, and spacing utilities that can be applied to enhance the appearance of web components.

What are @vaadin/vaadin-lumo-styles's main functionalities?

Typography

The typography feature provides a set of CSS custom properties for font families, sizes, and weights. These can be used to ensure consistent typography across your application.

import '@vaadin/vaadin-lumo-styles/typography.js';

// Usage in HTML
// <style>
//   h1 {
//     font-family: var(--lumo-font-family);
//     font-size: var(--lumo-font-size-xl);
//   }
// </style>

Color Schemes

The color schemes feature offers a range of CSS custom properties for defining primary, secondary, and contrast colors. This allows for easy theming and color management in your application.

import '@vaadin/vaadin-lumo-styles/color.js';

// Usage in HTML
// <style>
//   .primary-button {
//     background-color: var(--lumo-primary-color);
//     color: var(--lumo-primary-contrast-color);
//   }
// </style>

Spacing Utilities

Spacing utilities provide CSS custom properties for margins and paddings, enabling consistent spacing throughout your application.

import '@vaadin/vaadin-lumo-styles/spacing.js';

// Usage in HTML
// <style>
//   .content {
//     padding: var(--lumo-space-m);
//     margin: var(--lumo-space-l);
//   }
// </style>

Other packages similar to @vaadin/vaadin-lumo-styles

bootstrap

Bootstrap is a popular front-end framework that provides a wide range of CSS styles and components for building responsive web applications. Unlike @vaadin/vaadin-lumo-styles, which is specifically designed for Vaadin components, Bootstrap offers a more general-purpose set of styles and components that can be used with any HTML elements.

material-components-web

Material Components for the web is a library that implements Google's Material Design guidelines. It provides a set of UI components and styles similar to @vaadin/vaadin-lumo-styles but follows the Material Design principles. It is suitable for developers looking to implement Material Design in their web applications.

tailwindcss

Tailwind CSS is a utility-first CSS framework that provides low-level utility classes for building custom designs. Unlike @vaadin/vaadin-lumo-styles, which offers predefined styles for Vaadin components, Tailwind CSS allows developers to create custom designs by composing utility classes.

README

Lumo

Lumo – ✨ 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.

Documentation ↗

License

Apache License 2.0