> For the complete documentation index, see [llms.txt](https://2600hz.gitbook.io/sds/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://2600hz.gitbook.io/sds/sds-core/installation.md).

# 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](https://www.npmjs.com/package/@2600hz/sds-core) or  can be used locally by downloading it from the [GitHub repository](https://github.com/2600hz/sds-core).

{% hint style="info" %}
We recommend using `sds-core`through its NPM package.
{% endhint %}

###

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

{% tabs %}
{% tab title="NPM" %}

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

{% endtab %}

{% tab title="Yarn" %}

```bash
yarn add @2600hz/sds-core -D
```

{% endtab %}
{% endtabs %}

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

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

{% hint style="warning" %}
 If these two files are used properly, there should not be any duplicated styles.
{% endhint %}

**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:

```css
@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.