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-postcss

Import 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.

Sass ThemePostCSS Colors