vitamin web

Important

Cette version actuelle de la vitamine n'évoluera plus et n'acceptera plus les corrections de bogues à partir de maintenant. Plus de détails ici.

Web de vitamine

Bibliothèques de systèmes de conception de décathlon pour applications Web

Site Web - vitrines

Introduction

Decathlon Design System est le cadre qui aide notre écosystème à concevoir et à développer des expériences cohérentes et de qualité. Pour sa section numérique, elle est appelée vitamine.

Ce référentiel héberge les bibliothèques pour les applications Web.

Packages de base

Afin de vous permettre de consommer les éléments du système de conception en fonction de vos contraintes de produit , nous vous offrons la possibilité d'utiliser les bibliothèques Web de vitamines avec différentes technologies et niveaux de granularité avec des packages de base développés et maintenus par l'équipe de base de la vitamine.

Styles Global CSS?

Ce package vous fournit un CSS complet avec un énorme ensemble de cours de services publics car il est généré avec Tailwind CSS. Ensuite, ce sera à vous d'optimiser la production en purgeant le CSS en fonction des classes utilisées dans votre HTML:

@ VTMN / CSS	Réadmettre

Si vous utilisez déjà Tailwind CSS dans votre projet ou si vous souhaitez profiter pleinement de toutes ses fonctionnalités comme les fonctions et directives en créant vos propres classes via @apply par exemple. Vous pouvez vérifier notre package @vtmn/css-tailwind-preset qui vous expliquera comment utiliser les styles de vitamines dans un projet CSS à vent arrière.

Styles CSS spécifiques?

Ces forfaits permettent la consommation d'éléments avec un niveau de granularité plus élevé. Vous obtenez uniquement les styles dont vous avez besoin et ce que vous consommez est un CSS pur sans propriétés personnalisées CSS, donc IE 11 compatible:

Pour les jetons de conception

@ VTMN / CSS-DESIGN-TOKENS	Réadmettre

Pour chaque composant

Actes

@ VTMN / CSS-Button	Réadmettre
@ VTMN / CSS-Dropdown	Réadmettre
@ vtmn / css-link	Réadmettre

Formes

@ VTMN / CSS-Select	Réadmettre
@ VTMN / CSS-Text-Input	Réadmettre

Indicateurs

@ vtmn / css-badge	Réadmettre
@ vtmn / css-chargedeur	Réadmettre
@ VTMN / CSS-Price	Réadmettre
@ vtmn / css-progressbar	Réadmettre
@ VTMN / CSS Rating	Réadmettre
@ vtmn / css-tag	Réadmettre

Navigation

@ VTMN / CSS-Breadcrumb	Réadmettre
@ vtmn / css-navbar	Réadmettre
@ VTMN / CSS-SEARCH	Réadmettre
@ vtmn / css-tabs	Réadmettre

Superpositions

@ vtmn / css-alert	Réadmettre
@ vtmn / css-modal	Réadmettre
@ vtmn / css-popover	Réadmettre
@ vtmn / css-snackbar	Réadmettre
@ vtmn / css-toast	Réadmettre
@ vtmn / css-tooltip	Réadmettre

Contrôles de sélection

@ VTMN / CSS-CHECKBOX	Réadmettre
@ vtmn / css-chip	Réadmettre
@ VTMN / CSS-Quantity	Réadmettre
@ vtmn / css-radio-button	Réadmettre
@ vtmn / css-toggle	Réadmettre

Structure

@ vtmn / css-contrordion	Réadmettre
@ VTMN / CSS-CARD	Réadmettre
@ VTMN / CSS-Divider	Réadmettre
@ VTMN / CSS-list	Réadmettre
@ VTMN / CSS-Squelette	Réadmettre

Pour les services publics

@ VTMN / CSS-UTILITANTS	Réadmettre

Icônes

Ce package vous fournit une bibliothèque d'icônes SVG que vous pouvez inclure de plusieurs façons (SVGS, Font icon, Sprite, CSS, intégrée) :

@ vtmn / icônes	Réadmettre

Actifs ?

Ce package vous fournit une bibliothèque d'actifs SVG que vous pouvez inclure de plusieurs façons (SVGS, Font Asset, Sprite, CSS, Embedded) :

@ vtmn / actifs	Réadmettre

Packages communautaires

Afin d'améliorer votre expérience de développeur, nous vous offrons la possibilité de développer vos composants dans React, Svelte et Vue en fonction de nos packages de base juste ci-dessus. Ces bibliothèques sont développées et maintenues par la communauté, l'équipe Vitamin Core sera là pour examiner et assurer la qualité de vos propositions, n'hésitez pas à contribuer!

Réagir?

Ce package vous fournit une bibliothèque de composants React:

@ VTMN / REAT	Réadmettre

Svelte?

Ce package vous fournit une bibliothèque de composants svelte:

@ vtmn / svelte	Réadmettre

Vue?

Ce package vous fournit une bibliothèque de composants Vue:

@ vtmn / vue	Réadmettre

Contributif

L'un des objectifs du système de conception de décathlon est de fournir des directives et des composants à gagner en cohérence, en efficacité et en accessibilité. La meilleure façon d'y parvenir est ensemble! C'est pourquoi nous sommes sur Github. Nous aimerions les contributions de la communauté (rapports de bogues, demandes de fonctionnalités, suggestions, demandes de traction, tout ce que vous voulez!) .

Les espaces de travail YARN et NX sont utilisés pour gérer les dépendances et créer une configuration entre les packages. Lerna est utilisée pour gérer le versioning et l'édition.

Exécutez ce qui suit pour configurer votre environnement de développement local:

 # 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

Voir les documents contributifs pour plus d'informations sur la façon de contribuer.

Merci spécial

Merci aux contributeurs impliqués dans ces bibliothèques de vitamine-Web (avant même qu'ils ne soient open source) . ?

Merci également l'icône Remix parce que les icônes Vitamix sont la bibliothèque officielle d'icônes Decathlon basée sur leur bibliothèque d'icônes open source (Remix Design © 2020). Cette bibliothèque originale est sous la licence Apache 2.0 et a été modifiée par Decathlon. Apprendre encore plus.

Licence

 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.