Decathlon Design System - Vitamin global CSS styles library


Keywords
design-system, ui-kit, libraries, css, vitamin, accessibility, components, decathlon, design-tokens, html, lerna, monorepo, nx, showcases, storybook, styleguide, tailwindcss, ui-components, ui-library, yarn
License
Apache-2.0
Install
npm install @vtmn/css@0.80.1

Documentation

Vitamin Decathlon Design System logo

Vitamin Web

Decathlon Design System libraries for web applications

Website - Showcases

Introduction

Decathlon Design System is the framework that helps our ecosystem to design and develop consistent and quality experiences. For its Digital section, it is called Vitamin.

This repository hosts libraries for web applications.

Core packages

In order to allow you to consume the elements of the Design System according to your product constraints, we give you the possibility of using the Vitamin web libraries with different technologies & levels of granularity with core packages developed and maintained by the Vitamin core team.

Global CSS styles 🎨

This package provides you with a complete CSS with a huge set of utility classes as it is generated with Tailwind CSS. Then it will be up to you to optimize for production by purging the CSS according to the classes used in your HTML:

@vtmn/css README storybook npm version Quality Gate Status

Specific CSS styles 🖌

These packages allow the consumption of elements with a higher level of granularity. You get only the styles you need and what you consume is Pure CSS without CSS Custom Properties, therefore IE 11 compatible:

For design tokens
@vtmn/css-design-tokens README storybook npm version Quality Gate Status
For each component
@vtmn/css-alert README documentation storybook npm version Quality Gate Status
@vtmn/css-badge README documentation storybook npm version Quality Gate Status
@vtmn/css-button README documentation storybook npm version Quality Gate Status
@vtmn/css-card README documentation storybook npm version Quality Gate Status
@vtmn/css-checkbox README documentation storybook npm version Quality Gate Status
@vtmn/css-link README documentation storybook npm version Quality Gate Status
@vtmn/css-loader README documentation storybook npm version Quality Gate Status
@vtmn/css-modal README documentation storybook npm version Quality Gate Status
@vtmn/css-popover README documentation storybook npm version Quality Gate Status
@vtmn/css-progressbar README documentation storybook npm version Quality Gate Status
@vtmn/css-radio-button README documentation storybook npm version Quality Gate Status
@vtmn/css-rating README documentation storybook npm version Quality Gate Status
@vtmn/css-select README documentation storybook npm version Quality Gate Status
@vtmn/css-skeleton README documentation storybook npm version Quality Gate Status
@vtmn/css-snackbar README documentation storybook npm version Quality Gate Status
@vtmn/css-text-input README documentation storybook npm version Quality Gate Status
@vtmn/css-toast README documentation storybook npm version Quality Gate Status
@vtmn/css-toggle README documentation storybook npm version Quality Gate Status
@vtmn/css-tooltip README documentation storybook npm version Quality Gate Status
For utilities
@vtmn/css-utilities README storybook npm version Quality Gate Status

Icons

This package provides you with a library of SVG icons that you can include in a handful of ways (SVGs, icon font, sprite, CSS, embedded):

@vtmn/icons README documentation storybook npm version Quality Gate Status

Web Components ⚫️

This package provides you with a library of Web Components (Custom Elements). So, you will be able to use custom <vtmn-**> HTML tags directly in your markup:

@vtmn/web-components README storybook npm version Quality Gate Status

Community packages

In order to enhance your Developer eXperience, we give you the possibility to develop your components in React, Svelte and Vue based on our core packages just above. These libraries are developed and maintained by the community, the Vitamin core team will be there to review, and ensure the quality of your propositions, feel free to contribute!

React 🔵

This package provides you with a library of React components:

@vtmn/react README storybook npm version Quality Gate Status

Svelte 🟠

This package provides you with a library of Svelte Components:

@vtmn/svelte README storybook npm version Quality Gate Status

Vue 🟢

This package provides you with a library of Vue components:

@vtmn/vue README storybook npm version Quality Gate Status

Contributing

One of the Decathlon Design System goals is to provide guidelines & components to gain in consistency, efficiency & accessibility. The best way to achieve this is together! That's why we are on GitHub. We would love contributions from the community (bug reports, feature requests, suggestions, Pull Requests, whatever you want!).

Yarn workspaces and nx are used to manage dependencies and build config across package. Lerna is used to manage versioning & publishing.

Run the following to setup your local dev environment:

# Install `yarn`, alternatives at https://yarnpkg.com/en/docs/install
brew install yarn

# Clone or fork `vitamin-web`
git clone git@github.com:Decathlon/vitamin-web.git # or your fork
cd vitamin-web

# install dependencies
yarn

# build all packages
yarn build

# start all showcases and build sources in watch mode & hot reload
yarn start
# or you can launch separately (recommended)
yarn start:css
yarn start:icons
yarn start:web-components
yarn start:react
yarn start:svelte
yarn start:vue

# test packages
yarn test

👉 See the contributing docs for more information about how to contribute.

Special thanks

Thank you to the contributors involved in these vitamin-web libraries (even before they were Open Source). 💙

License

Apache-2.0 © Decathlon