How to Use GDS Styles
To get started using Nielsen’s Global Design System, we first need access to the private package registry.
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
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 email@example.com
yarn add @nielsen-media/gds-styles
In your root styles files. In my
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";
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.