vitamin web

Wichtig

Diese aktuelle Version von Vitamin entwickelt sich nicht mehr und akzeptiert von nun an nur Fehlerbehebungen. Weitere Details hier.

Vitamin Web

Deklon Design -Systembibliotheken für Webanwendungen

Website - Showcases

Einführung

Das Decathlon -Designsystem ist das Rahmen, das unserem Ökosystem hilft, konsistente und qualitativ hochwertige Erlebnisse zu entwerfen und zu entwickeln. Für seinen digitalen Abschnitt heißt es Vitamin.

In diesem Repository hostet Bibliotheken für Webanwendungen.

Kernpakete

Damit Sie die Elemente des Designsystems entsprechend Ihren Produktbeschränkungen konsumieren können, bieten wir die Möglichkeit, die Vitamin -Webbibliotheken mit unterschiedlichen Technologien und Granularitätsniveaus mit Kernpaketen zu verwenden, die vom Vitamin -Kern -Team entwickelt und verwaltet werden.

Globale CSS -Stile?

Dieses Paket bietet Ihnen ein komplettes CSS mit einem riesigen Satz von Dienstprogrammklassen, wie es mit Rückenwind -CSS erzeugt wird. Dann liegt es an Ihnen, die Produktion zu optimieren, indem Sie das CSS gemäß den in Ihrem HTML verwendeten Klassen reinigen:

@Vtmn/CSS	Readme

Wenn Sie in Ihrem Projekt bereits Tailwind -CSS verwenden oder alle Funktionen wie Funktionen und Richtlinien voll ausnutzen möchten, indem Sie beispielsweise über @apply Ihre eigenen Klassen erstellen. Sie können unser Paket @vtmn/css-tailwind-preset überprüfen, um zu erklären, wie Sie Vitamin-Stile in einem Rückenwind-CSS-Projekt verwenden.

Spezifische CSS -Stile?

Diese Pakete ermöglichen den Verbrauch von Elementen mit einer höheren Granularität. Sie erhalten nur die Stile, die Sie benötigen, und das, was Sie konsumieren, sind reine CSS ohne CSS -benutzerdefinierte Eigenschaften, daher dh 11 kompatibel:

Für Design -Token

@vtmn/css-design-tokens	Readme

Für jede Komponente

Aktionen

@Vtmn/CSS-Button	Readme
@vtmn/css-dropdown	Readme
@Vtmn/CSS-Link	Readme

Formen

@vtmn/css-select	Readme
@vtmn/css-text-Input	Readme

Indikatoren

@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

Auswahlsteuerungen

@vtmn/css-Checkbox	Readme
@Vtmn/CSS-Chip	Readme
@Vtmn/CSS-Quantity	Readme
@Vtmn/CSS-Radio-Button	Readme
@Vtmn/CSS-Toggle	Readme

Struktur

@vtmn/css-Accordion	Readme
@Vtmn/CSS-Card	Readme
@vtmn/css-divider	Readme
@Vtmn/CSS-List	Readme
@Vtmn/CSS-Skeletton	Readme

Für Versorgungsunternehmen

@Vtmn/CSS-Utilities	Readme

Ikonen

Dieses Paket bietet Ihnen eine Bibliothek von SVG -Symbolen, die Sie auf eine Handvoll Weise aufnehmen können (SVGs, Icon -Schriftart, Sprite, CSS, eingebettet) :

@vtmn/icons	Readme

Vermögenswerte ?

Dieses Paket bietet Ihnen eine Bibliothek mit SVG -Vermögenswerten, die Sie auf eine Handvoll Weise aufnehmen können (SVGs, Asset -Schriftart, Sprite, CSS, eingebettet) :

@vtmn/assets	Readme

Community -Pakete

Um Ihre Entwicklererfahrung zu verbessern, bieten wir Ihnen die Möglichkeit, Ihre Komponenten in React, Sufle und Vue auf der Grundlage unserer Kernpakete genau darüber zu entwickeln. Diese Bibliotheken werden von der Community entwickelt und gepflegt. Das Vitamin -Kernteam wird da sein, um zu überprüfen und die Qualität Ihrer Vorschläge zu gewährleisten, und können Sie gerne beitragen!

Reagieren?

Dieses Paket bietet Ihnen eine Bibliothek von React -Komponenten:

@vtmn/react	Readme

Schwung?

Dieses Paket bietet Ihnen eine Bibliothek mit SufleTe -Komponenten:

@vtmn/svelte	Readme

Vue?

Dieses Paket bietet Ihnen eine Bibliothek mit Vue -Komponenten:

@vtmn/vue	Readme

Beitragen

Eines der Ziele für das Deklon -Designsystem besteht darin, Richtlinien und Komponenten zur Verfügung zu stellen, um Konsistenz, Effizienz und Zugänglichkeit zu gewinnen. Der beste Weg, dies zu erreichen, ist zusammen! Deshalb sind wir auf Github. Wir würden Beiträge aus der Community lieben (Fehlerberichte, Feature -Anfragen, Vorschläge, Zugangsanfragen, was auch immer Sie wollen!) .

Garn -Arbeitsbereiche und NX werden verwendet, um Abhängigkeiten zu verwalten und die Konfiguration über Pakete hinweg zu erstellen. Lerna wird verwendet, um Versioning & Publishing zu verwalten.

Führen Sie Folgendes aus, um Ihre lokale Entwicklerumgebung einzurichten:

 # 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

Weitere Informationen zum Beitrag finden Sie in den beitragenden Dokumenten.

Besonderer Dank

Vielen Dank an die Mitwirkenden, die an diesen Vitamin-Web-Bibliotheken beteiligt sind (noch bevor sie Open Source waren) . ?

Vielen Dank auch das Remix-Symbol, da Vitamix-Symbole die offizielle Decathlon-Symbolbibliothek basierend auf ihrer Open-Source-Symbolbibliothek (Remix-Design © 2020) ist. Diese ursprüngliche Bibliothek befindet sich unter der Lizenz Apache 2.0 und wurde von Decathlon geändert. Erfahren Sie mehr.

Lizenz

 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.