@vaadin/vaadin-material-styles

What is @vaadin/vaadin-material-styles?

@vaadin/vaadin-material-styles is a package that provides Material Design inspired styles for Vaadin components. It includes a set of CSS custom properties, mixins, and utility classes that can be used to style web components in a consistent and visually appealing way.

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

CSS Custom Properties

The package provides a set of CSS custom properties that can be used to apply Material Design colors and styles to elements. For example, you can use `--material-primary-color` to set the primary color of a component.

{ "color": "var(--material-primary-color)" }

Typography Styles

It includes typography styles that follow Material Design guidelines. You can use `--material-font-family` to apply the standard font family used in Material Design.

{ "font": "var(--material-font-family)" }

Utility Classes

The package offers utility classes like `material-shadow` to easily apply common Material Design effects such as shadows to elements.

<div class="material-shadow">Content</div>

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

material-components-web

Material Components for the web (MDC Web) is a library that provides reusable UI components following Material Design guidelines. It offers a more comprehensive set of components compared to @vaadin/vaadin-material-styles, which focuses on styles and utilities.

bootstrap

Bootstrap is a popular CSS framework that provides design templates for typography, forms, buttons, and other interface components. While it does not specifically follow Material Design guidelines, it offers a wide range of styling options similar to @vaadin/vaadin-material-styles.

tailwindcss

Tailwind CSS is a utility-first CSS framework that allows for rapid UI development. It provides a different approach compared to @vaadin/vaadin-material-styles by offering low-level utility classes instead of predefined styles.

README

Material Theme for Vaadin components

vaadin-material-styles is customizable theme for the Vaadin components.

Documentation ↗

License

Apache License 2.0