Install Cherry for PostCSS
Cherry is compiled in PostCSS, each element of the design system can be imported independently. You can import .css files to your PostCSS project or import the minified version from the distribution files. To install Cherry for PostCSS, run the command:
npm install cherry-postcssImport CSS
To import all Cherry elements, include the cherry.css file in your entry point style file:
@import "cherry-postcss/src/cherry.css";@import "cherry-postcss/src/theme";
@import "cherry-postcss/src/helpers";
@import "cherry-postcss/src/globals";
@import "cherry-postcss/src/typography";
@import "cherry-postcss/src/buttons";
@import "cherry-postcss/src/inputs";
@import "cherry-postcss/src/grid";
@import "cherry-postcss/src/spacing";Cherry.css includes all the elements from the design system.
If you don't need all the elements, import only what you use.
To change the default theme configuration, check out theme.css
PostCSS Plugins
module.exports = {
plugins: [
require("postcss-import"),
require("postcss-preset-env")({
stage: 0,
features: {
"nesting-rules": true,
"color-mod-function": true,
"custom-media": true,
},
}),
require("postcss-mixins"),
require("autoprefixer"),
require("cssnano")(),
],
};postcss.config.js
Import Minified CSS
To import all Cherry elements from the minified CSS. Import the cherry.css file from the dist directory. Include it it in your main css file or directly in the head of the HTML.
@import "cherry-postcss/dist/cherry.css";or
<link rel="stylesheet" href="cherry-postcss/dist/cherry.css">That's it 🎉 you are ready to use Cherry.
