Home

Introduce

@sandlada/material-design-css is a CSS library for Material Design. Each style is obtained and written from Material Design 3. Developers can easily use Material Design design tokens such as text-on-primary, bg-surface-container, title-medium, shape-large, etc. through this style library.

CSS styles utilities include:

Color
Palette
Motion
Shape
Typography

Installation

npm i @sandlada/material-design-css

Import

If you are using a development environment such as Vite, you can import the css style file through import in the JS/TS file:

// TypeScript / JavaScript

import "@sandlada/material-design-css/color/bg-utilities.css"
import "@sandlada/material-design-css/color/text-utilities.css"
import "@sandlada/material-design-css/palette/bg-utilities.css"
import "@sandlada/material-design-css/palette/text-utilities.css"
import "@sandlada/material-design-css/motion/animation-utilities.css"
import "@sandlada/material-design-css/motion/transition-utilities.css"
import "@sandlada/material-design-css/prebuild-color/light-green.css"
import "@sandlada/material-design-css/preset.css"
import "@sandlada/material-design-css/shape.css"
import "@sandlada/material-design-css/typography.css"

If you prefer to use CSS files to import css style files:

/* CSS */

@import "@sandlada/material-design-css/color/bg-utilities.css";
@import "@sandlada/material-design-css/color/text-utilities.css";
@import "@sandlada/material-design-css/palette/bg-utilities.css";
@import "@sandlada/material-design-css/palette/text-utilities.css";
@import "@sandlada/material-design-css/motion/animation-utilities.css";
@import "@sandlada/material-design-css/motion/transition-utilities.css";
@import "@sandlada/material-design-css/prebuild-color/light-green.css";
@import "@sandlada/material-design-css/preset.css";
@import "@sandlada/material-design-css/shape.css";
@import "@sandlada/material-design-css/typography.css";

You may also consider using relative positioning to import the styles:

/* CSS */

@import url("../../node_modules/@sandlada/material-design-css/color/bg-utilities.css");
@import url("../../node_modules/@sandlada/material-design-css/color/text-utilities.css");
@import url("../../node_modules/@sandlada/material-design-css/palette/bg-utilities.css");
@import url("../../node_modules/@sandlada/material-design-css/palette/text-utilities.css");
@import url("../../node_modules/@sandlada/material-design-css/motion/animation-utilities.css");
@import url("../../node_modules/@sandlada/material-design-css/motion/transition-utilities.css");
@import url("../../node_modules/@sandlada/material-design-css/prebuild-color/light-green.css");
@import url("../../node_modules/@sandlada/material-design-css/preset.css");
@import url("../../node_modules/@sandlada/material-design-css/shape.css");
@import url("../../node_modules/@sandlada/material-design-css/typography.css");

Usage

Now that you have completed the installation and import, go to the following page for more usage tutorials: