How to Use GDS Styles
Install
To get started using Nielsen’s Global Design System, we first need access to the private package registry.
Instructions
If this is your first time setting up Nielsen GDS take a looks at creating a GitLab access token first then come back to get started with GDS Styles.
Alright! With the GL setup out of the way let’s add some styles. These below examples will show case how gds-styles works with React and Create React App but this can be applied to any javascript framework or build system.
With a fresh new copy of create-react-app ready to go, let’s build and install the design system.
Install and build Sass
We need to run a Sass build as the Carbon styles are authored in Sass, so run the following command to install sass as a dependency.
yarn add sass@1.51.0
Install GDS
yarn add @nielsen-media/gds-styles
In your root styles files. In my create-react-app it’s index.scssinside of the src directory, I can add the import statement to bring in the gds library.
## index.scss
@import "@nielsen-media/gds-styles";
That’s it!
To check that it’s imported correctly we can add a class of gds-ml-400 to any html element and if it kicks the element a few pics from the left its working properly.