Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/nextcss/deprecated-material-colors
Next.css material-colors module
https://github.com/nextcss/deprecated-material-colors
background beta-release beta-testing border css css-framework css-modules css3 foreground front-end frontend good-first-issue html library material-colors nextcss open-source opensource sass
Last synced: 3 months ago
JSON representation
Next.css material-colors module
- Host: GitHub
- URL: https://github.com/nextcss/deprecated-material-colors
- Owner: nextcss
- License: mit
- Archived: true
- Created: 2021-02-10T17:18:57.000Z (almost 4 years ago)
- Default Branch: main
- Last Pushed: 2022-11-16T03:32:23.000Z (about 2 years ago)
- Last Synced: 2024-09-21T13:02:42.401Z (3 months ago)
- Topics: background, beta-release, beta-testing, border, css, css-framework, css-modules, css3, foreground, front-end, frontend, good-first-issue, html, library, material-colors, nextcss, open-source, opensource, sass
- Language: SCSS
- Homepage:
- Size: 185 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Funding: FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
# Next.css Material Colors Module
Material Colors Module is part of [Next.css framework](https://github.com/nextcss). This module contains original Material Color Palette CSS styles for your Next.css project. You can use in all modern websites with module bundlers, like webpack, rollup, parcel.
**[Next.css on GitHub](https://github.com/nextcss)**
## How to Install
You can install with npm or yarn package managers.
```shell
npm i @nextcss/material-colors
yarn add @nextcss/material-colors
```
Simple import to your project, and add class rules to you HTML tags.
Check available selector rules below.
```javascript
import '@nextcss/material-colors';
```
## Features
- Text colors (foreground)
- Background colors
- Border colors
- Hover states
- Active states
- Focus states
- Focus-In states
## How to use
```html
...
...
...
```
Selector formula
**`[state:]prefix-color[-scale]`**
#### state
After _state_ must use colon, _state_ is not required.
`hover`,`active`,`focus`,`focus-in`
#### prefix
After _prefix_ must use hyphen, _state_ is required.
`fg` - foreground, `bg` - background, `b` - border
#### color (scalable)
After _color_ must be set _scale_ value. _color_ is required.
`red`, `pink`, `purple`, `deep-purple`, `indigo`, `blue`, `light-blue`,`cyan`,`teal`,`green`,`light-green`,`lime`,`yellow`,`amber`,`orange`,`deep-orange`,`brown`,`grey`,`blues-grey`
#### color (not scalable)
After _color_ can not set _scale_ value. _color_ is required.
`black`,`white`
#### scale
Before _scale_ must use hyphen, _scale_ is required for scalable _color_ only.
`100`,`200`,`300`,`400`,`500`,`600`,`700`,`800`,`900`
## Production build
We strongly recommend to use `postcss` with `autoprefixer` and `postcss-purgecss`. This stack will extend the CSS rules with browser specific prefixes, like `-webkit` and will remove unused styles in production build.
```shell
npm i -D postcss autoprefixer @fullhuman/postcss-purgecss
```
Our `postcss.config.js` config. You need to configure the `content` parameter for your project.
```js
module.exports = {
plugins:
process.env.NODE_ENV === 'production'
? [
'autoprefixer',
[
'@fullhuman/postcss-purgecss',
{
content: ['./{pages,components}/**/*.{js,jsx}'],
safelist: ['html', 'body'],
defaultExtractor: (content) => content.match(/[\w-/:]+(?