Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/decathlon/vitamin-web
Decathlon Design System UI components for web applications
https://github.com/decathlon/vitamin-web
accessibility components css decathlon design-system design-tokens html lerna libraries monorepo nx showcases storybook styleguide tailwindcss ui-components ui-kit ui-library vitamin yarn
Last synced: about 5 hours ago
JSON representation
Decathlon Design System UI components for web applications
- Host: GitHub
- URL: https://github.com/decathlon/vitamin-web
- Owner: Decathlon
- License: apache-2.0
- Created: 2020-12-16T17:36:03.000Z (about 4 years ago)
- Default Branch: main
- Last Pushed: 2024-12-11T10:59:17.000Z (about 2 months ago)
- Last Synced: 2025-02-02T02:05:29.562Z (5 days ago)
- Topics: accessibility, components, css, decathlon, design-system, design-tokens, html, lerna, libraries, monorepo, nx, showcases, storybook, styleguide, tailwindcss, ui-components, ui-kit, ui-library, vitamin, yarn
- Language: HTML
- Homepage: https://decathlon.github.io/vitamin-web
- Size: 24.8 MB
- Stars: 284
- Watchers: 15
- Forks: 77
- Open Issues: 10
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
- Codeowners: .github/CODEOWNERS
- Security: SECURITY.md
Awesome Lists containing this project
README
> [!IMPORTANT]
> This current version of Vitamin will no longer evolve and only accept bug fixes from now on. [More details here](https://github.com/Decathlon/vitamin-design/blob/main/IMPORTANT_NOTE.md).
Vitamin Web
Decathlon Design System libraries for web applications
## Introduction
[Decathlon Design System](https://decathlon.design) is the framework that helps our ecosystem to design and develop consistent and quality experiences. For its [Digital section](https://www.decathlon.design/726f8c765/p/6145b2-overview), 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](https://tailwindcss.com). Then it will be up to you to [optimize for production](https://purgecss.com/) by purging the CSS according to the classes used in your HTML:
@vtmn/css
README
If you already using [Tailwind CSS](https://tailwindcss.com/) in your project or you want to take full advantage of all its features like [functions & directives](https://tailwindcss.com/docs/functions-and-directives) by building your own classes via [`@apply`](https://tailwindcss.com/docs/functions-and-directives#apply) for example. You can check our package [`@vtmn/css-tailwind-preset`](https://github.com/Decathlon/vitamin-web/tree/main/packages/sources/css/presets/tailwind#readme) which will explain you how to use Vitamin styles in a Tailwind CSS project.
### 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](https://developer.mozilla.org/en-US/docs/Web/CSS/--*), therefore IE 11 compatible:
For design tokens
@vtmn/css-design-tokens
README
For each component
Actions
@vtmn/css-button
README
@vtmn/css-dropdown
README
@vtmn/css-link
README
Forms
@vtmn/css-select
README
@vtmn/css-text-input
README
Indicators
@vtmn/css-badge
README
@vtmn/css-loader
README
@vtmn/css-price
README
@vtmn/css-progressbar
README
@vtmn/css-rating
README
@vtmn/css-tag
README
Navigation
@vtmn/css-breadcrumb
README
@vtmn/css-navbar
README
@vtmn/css-search
README
@vtmn/css-tabs
README
Overlays
@vtmn/css-alert
README
@vtmn/css-modal
README
@vtmn/css-popover
README
@vtmn/css-snackbar
README
@vtmn/css-toast
README
@vtmn/css-tooltip
README
Selection controls
@vtmn/css-checkbox
README
@vtmn/css-chip
README
@vtmn/css-quantity
README
@vtmn/css-radio-button
README
@vtmn/css-toggle
README
Structure
@vtmn/css-accordion
README
@vtmn/css-card
README
@vtmn/css-divider
README
@vtmn/css-list
README
@vtmn/css-skeleton
README
For utilities
@vtmn/css-utilities
README
### 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
### Assets 🏞
This package provides you with a library of SVG assets that you can include in a handful of ways _(SVGs, asset font, sprite, CSS, embedded)_:
@vtmn/assets
README
## 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](https://reactjs.org/) components:
@vtmn/react
README
### Svelte 🟠
This package provides you with a library of [Svelte](https://svelte.dev/) Components:
@vtmn/svelte
README
### Vue 🟢
This package provides you with a library of [Vue](https://vuejs.org/) components:
@vtmn/vue
README
## 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](https://yarnpkg.com/lang/en/docs/workspaces/) and [nx](https://nx.dev) are used to manage dependencies and build config across packages. [Lerna](https://github.com/lerna/lerna/) is used to manage versioning & publishing.
Run the following to setup your local dev environment:
```sh
# Install `yarn`, alternatives at https://yarnpkg.com/en/docs/install
brew install yarn
# Clone or fork `vitamin-web`
git clone [email protected]: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:react
yarn start:svelte
yarn start:vue
```
> 👉 See [the contributing docs](CONTRIBUTING.md) for more information about how to contribute.
## Special thanks
Thank you to the [contributors](CONTRIBUTORS.md) involved in these vitamin-web libraries _(even before they were Open Source)_. 💙
Thank you also [Remix Icon](https://remixicon.com) because Vitamix Icons is the official Decathlon icon library based on their [open-source icon library](https://github.com/Remix-Design/RemixIcon) (Remix Design © 2020). This original library is under the license Apache 2.0 and has been modified by Decathlon. [Learn more](https://www.decathlon.design/726f8c765/p/58575f-vitamix-license).
## License
Copyright 2021 Decathlon.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.