Installation

How to add sds-core to a project.

To facilitate sds-core inclusion into projects, you need to access the library, which can be found as an NPM package or can be used locally by downloading it from the GitHub repository.

We recommend using sds-corethrough its NPM package.

How to add and use sds-core into a JavaScript project

1. Add sds-core as a dependency to the project by using the following command in the terminal.

NPM

npm install @2600hz/sds-core --save-dev

Yarn

2. Once added, there are two primary files to use inside the sds-core package: sds-reset.scss and sds-tools.scss.

sds-reset.scss contains all the reset styles, and sds-tools.scss once has all the functions and mixins. We strongly recommend adding the sds-reset.scss only one time into the main file of hte project in order to apply the general styels reset.

//Include this line only into the main file of the project (Probably, an index.js)
import '@2600hz/sds-core/sds-reset.scss';

If these two files are used properly, there should not be any duplicated styles.

3. In order to have access to all the functions and mixins of Sipster-Core, you must import the sds-tools.scss file at the beginning of all the SCSS files where these tools are going to be used, like in the following example:

@import '@2600hz/sds-core/sds-tools';

.mainTitle {
    margin-bottom: sds-spc(16);
    @include sds-typeset(title-1, bold);
}

Why would you use @import into SCSS files instead of @use?

This is a very good and valid question. As some developers may have noticed, official SASS documentation now recommends using @use instead of @import.

Then, why do we keep using @import? At the time of this writing, most 2600Hz projects use node-sass packages, which is not yet compatible with the new @use command. @use is only compatible with the latest SASS package versions, which are not yet very common and could create compatibility issues. So, for the time being, keep using @import as it is the standard in 2600Hz projects and will not be deprecated any time soon.