https://github.com/seanmcp/material-design-css-variables

🎨 CSS variables for Google's Material Design palette
https://github.com/seanmcp/material-design-css-variables

css css-variables material-design

Last synced: about 2 months ago
JSON representation

🎨 CSS variables for Google's Material Design palette

• Host: GitHub
• URL: https://github.com/seanmcp/material-design-css-variables
• Owner: SeanMcP
• License: mit
• Created: 2018-07-17T13:06:34.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2018-07-17T13:32:39.000Z (over 6 years ago)
• Last Synced: 2024-10-30T10:09:04.148Z (3 months ago)
• Topics: css, css-variables, material-design
• Language: CSS
• Size: 4.88 KB
• Stars: 2
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# material-design-css-variables

🎨 CSS variables for Google's Material Design

## How to use

1. Download or copy [material-design-colors.css](./material-design-colors.css) and add it to your project's styles directory

2. Import the document at the top of your main stylesheet:

    

```css

/* main.css */

@import './material-design-colors.css';

```

3. Reference the material variables using [CSS's `var()` function](https://developer.mozilla.org/en-US/docs/Web/CSS/var):

```css

body {

  background: var(--blue500);

  color: var(--gray50);

}

```

## Use with other CSS variables

If you want to use Material Design CSS Variables in addition to your own CSS variables, make sure to import `material-design-colors.css` **first**:

```css

/* main.css */

@import './material-design-colors.css';

@import './other-variables.css';

```