@vaadin/vaadin-material-styles
Advanced tools
Vaadin Material is a complete theme for Vaadin components, inspired by Google’s Material Design guidelines.
@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.
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>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 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.
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.
vaadin-material-styles is customizable theme for the Vaadin components.
Apache License 2.0
FAQs
Vaadin Material is a complete theme for Vaadin components, inspired by Google’s Material Design guidelines.
The npm package @vaadin/vaadin-material-styles receives a total of 68,724 weekly downloads. As such, @vaadin/vaadin-material-styles popularity was classified as popular.
We found that @vaadin/vaadin-material-styles demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 12 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Security News
Socket researchers uncover a malicious npm package posing as a tool for detecting vulnerabilities in Etherium smart contracts.
Security News
Research
A supply chain attack on Rspack's npm packages injected cryptomining malware, potentially impacting thousands of developers.
Research
Security News
Socket researchers discovered a malware campaign on npm delivering the Skuld infostealer via typosquatted packages, exposing sensitive data.
