slippers-ui
v3.3.0-alpha
Published
GitLab Marketing Design System
Downloads
42,579
Keywords
Readme
Slippers UI - GitLab's Marketing Design System
Slippers is the open-source GitLab Marketing Web Design System. It was created in the spirit of "everyone can contribute".
Resources:
- Storybook: https://gitlab-com.gitlab.io/marketing/digital-experience/slippers-ui/.
- Figma: https://www.figma.com/file/nWIOpmuMp7RZXmfTj6ujAF/Slippers_foundations.
- GitLab project: https://gitlab.com/gitlab-com/marketing/digital-experience/slippers-ui.
- Further documentation: https://about.gitlab.com/handbook/marketing/digital-experience/slippers-design-system/.
Gettings started with Slippers:
Local development
Slippers uses Storybook to enable component exploration.
Yarn is the preferred package manager.
Running Storybook locally:
- Clone the Slippers project.
- Install the dependecies using the version of node specified in .npmrc -
npm install. - Run Storybook -
yarn storybook buildto build for production,yarn storybook devfor local development. - Storybook should now be running at: http://localhost:6009/.
Updating the slippers-ui NPM package
- Make changes to slippers-ui.
- If needed, create/update .stories so Storybook is upto date.
- Increment the version number in package.json.
- If needed, add component into install.js (this adds components into the build).
- Build /dist folder -
yarn build. - Publish to NPM -
yarn publish. - You can optionally publish using
sh scripts/publish.sh. Note that you must havejqinstalled. This attempts to run Step 5 and 6 and validate all of this process for you. - Merge changes into origin/main.
- Once the package has been published it's now ready to be updated in the consuming repositories (Example: Buyer Experience, be-navigation, etc.).
Importing slippers-ui into your project:
- With NPM
npm install slippers-uiOR with YARNyarn add slippers-ui - Slippers main entry point is /dist/slippers-core.umd.min.js, example usage. To import the styling for the above components, the compiled css file can be found at: /dist/slippers-core.css.
