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-postcss
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";
If you don't need all the elements, import only what you use.
To change the default theme configuration, check out theme.css
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")(),
],
};
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.