Install Cherry for Sass

Cherry is compiled in Sass, each element of the design system can be imported independently. You can import .scss files to your Sass project or import the minified version from the distribution files. To install Cherry for Sass, run the command:

npm install cherry-sass

Import Scss

To import all Cherry elements, include the cherry.scss file in your entry point style file:

@import "cherry-sass/src/cherry.scss";

@import "cherry-sass/src/theme";
@import "cherry-sass/src/helpers";
@import "cherry-sass/src/globals";
@import "cherry-sass/src/typography";
@import "cherry-sass/src/buttons";
@import "cherry-sass/src/inputs";
@import "cherry-sass/src/grid";
@import "cherry-sass/src/spacing";

If you don't need all the elements, import only what you use, and make sure you have autoprefixer installed.

To change the default theme configuration, check out theme.scss

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-sass/dist/cherry.css";

or

<link rel="stylesheet" href="cherry-sass/dist/cherry.css">

That's it 🎉 you are ready to use Cherry.