Vitamin Web
Decathlon Design System UI components for web applications
Overview
Vitamin is the digital section of the Decathlon Design System, which is a framework that helps develop consistent and quality experiences. The repository hosts libraries for web applications, allowing the consumption of elements according to product constraints. It offers core packages, global CSS styles, specific CSS styles, icons, and assets. Additionally, the community has developed libraries for React, Svelte, and Vue components. Contributions from the community are welcome, and the setup of the local development environment is explained in the contributing docs.
Features
- Core packages: Libraries for consuming elements of the Design System with different technologies and levels of granularity.
- Global CSS styles: Complete CSS with a wide range of utility classes, generated with Tailwind CSS. Can be optimized for production by purging unused CSS classes.
- Specific CSS styles: Packages for consuming elements with a higher level of granularity, providing only the styles needed. Compatible with IE 11.
- Icons: Library of SVG icons that can be included in various ways (SVGs, icon font, sprite, CSS, embedded).
- Assets: Library of SVG assets that can be included in various ways (SVGs, asset font, sprite, CSS, embedded).
- React: Library of React components based on the core packages.
- Svelte: Library of Svelte components based on the core packages.
- Vue: Library of Vue components based on the core packages.
- Svelte
Svelte is a modern front-end framework that compiles your code at build time, resulting in smaller and faster applications. It uses a reactive approach to update the DOM, allowing for high performance and a smoother user experience.
- Tailwind
Tailwind CSS is a utility-first CSS framework that provides pre-defined classes for building responsive and customizable user interfaces.
- UI Kits & Components
A UI kit provides developers with a set of reusable components that can be easily integrated into a website or application. These components are pre-designed with consistent styling and functionality, allowing developers to save time and effort in the design and development process. UI kits can be either custom-built or third-party, and often include components for buttons, forms, typography, icons, and more.
- Storybook
Storybook is a tool for developing and testing UI components in isolation. It provides a sandbox environment where you can experiment with different props and states to see how your component responds.
- Stylelint
Stylelint is a modern linter for CSS that helps you avoid errors and enforce consistent styling conventions. It provides rules for detecting errors and warnings, and can be configured to match your specific project's requirements.
- Typescript
TypeScript is a superset of JavaScript, providing optional static typing, classes, interfaces, and other features that help developers write more maintainable and scalable code. TypeScript's static typing system can catch errors at compile-time, making it easier to build and maintain large applications.
