vitamin web

Важный

Эта текущая версия витамина больше не будет развиваться и с этого момента принять только исправления ошибок. Подробнее здесь.

Витаминная сеть

Библиотеки систем проектирования Decathlon для веб -приложений

Веб -сайт - демонстрации

Введение

Система Decathlon Design - это структура, которая помогает нашей экосистеме проектировать и разрабатывать последовательный и качественный опыт. Для своего цифрового раздела это называется витамином.

Этот репозиторий проводит библиотеки для веб -приложений.

Основные пакеты

Чтобы позволить вам потреблять элементы системы проектирования в соответствии с вашими ограничениями продукта , мы даем вам возможность использовать витаминные веб -библиотеки с различными технологиями и уровнями детализации с помощью основных пакетов, разработанных и поддерживаемых витаминской основной командой.

Глобальные стили CSS?

Этот пакет предоставляет вам полный CSS с огромным набором полезных классов, поскольку он генерируется с помощью CSS Tailwind. Тогда вам будет оптимизировать для производства путем очистки CSS в соответствии с классами, используемыми в вашем HTML:

@vtmn/css	Ридме

Если вы уже используете Tailwind CSS в своем проекте или хотите в полной мере воспользоваться всеми его функциями, такими как функции и директивы, например, создавая собственные классы через @apply . Вы можете проверить наш пакет @vtmn/css-tailwind-preset , который объяснит вас, как использовать витаминные стили в проекте CSS Taillid.

Конкретные стили CSS?

Эти пакеты позволяют потреблять элементы с более высоким уровнем детализации. Вы получаете только те стили, которые вам нужны, и то, что вы потребляете, является чистым CSS без пользовательских свойств CSS, поэтому 11 совместимы:

Для дизайнерских токенов

@vtmn/css-design-tokens	Ридме

Для каждого компонента

Действия

@vtmn/css-button	Ридме
@vtmn/css-dropdown	Ридме
@vtmn/css-link	Ридме

Формы

@vtmn/css-select	Ридме
@vtmn/css-text-input	Ридме

Индикаторы

@vtmn/css-badge	Ридме
@vtmn/css-loader	Ридме
@vtmn/css-price	Ридме
@vtmn/css-progressbar	Ридме
@vtmn/css-rating	Ридме
@vtmn/css-tag	Ридме

Навигация

@vtmn/css-breadcrumb	Ридме
@vtmn/css-navbar	Ридме
@vtmn/css-search	Ридме
@vtmn/css-tabs	Ридме

Наложения

@vtmn/css-alert	Ридме
@vtmn/css-modal	Ридме
@vtmn/css-popover	Ридме
@vtmn/css-snackbar	Ридме
@vtmn/css-hoast	Ридме
@vtmn/css-tooltip	Ридме

Управление отбора

@vtmn/css-checkbox	Ридме
@vtmn/css-chip	Ридме
@vtmn/css-quanty	Ридме
@vtmn/css-radio-button	Ридме
@vtmn/css-toggle	Ридме

Структура

@vtmn/css-accordion	Ридме
@vtmn/css-card	Ридме
@vtmn/css-divider	Ридме
@vtmn/css-list	Ридме
@vtmn/css-skeleton	Ридме

Для коммунальных услуг

@vtmn/css-unitials	Ридме

Значки

Этот пакет предоставляет вам библиотеку значков SVG, которую вы можете включить несколькими способами (SVG, шрифт иконы, спрайт, CSS, встроенный) :

@vtmn/incons	Ридме

Ресурсы ?

Этот пакет предоставляет вам библиотеку активов SVG, которую вы можете включить несколькими способами (SVG, шрифт активов, спрайт, CSS, встроенный) :

@vtmn/активы	Ридме

Сообщество пакеты

Чтобы улучшить ваш опыт разработчика, мы даем вам возможность разработать ваши компоненты в React, Svelte и Vue на основе наших основных пакетов чуть выше. Эти библиотеки разрабатываются и поддерживаются сообществом, витаминная основная команда будет там, чтобы рассмотреть, и обеспечить качество ваших предложений, не стесняйтесь внести свой вклад!

Отреагировать?

Этот пакет предоставляет вам библиотеку компонентов React:

@vtmn/React	Ридме

СВОВА?

Этот пакет предоставляет вам библиотеку стройных компонентов:

@vtmn/stvelte	Ридме

Vue?

Этот пакет предоставляет вам библиотеку компонентов VUE:

@vtmn/vue	Ридме

Внося

Одной из целей системы Decathlon Design является предоставление руководств и компонентов для получения согласованности, эффективности и доступности. Лучший способ достичь этого - вместе! Вот почему мы на GitHub. Мы будем рады вклада от сообщества (отчеты об ошибках, запросы функций, предложения, запросы на вытягивание, все, что вы хотите!) .

Рабочие пространства пряжи и NX используются для управления зависимостями и создания конфигурации между пакетами. Лерна используется для управления версиями и публикацией.

Запустите следующее для настройки вашей локальной среды Dev:

 # 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

Смотрите документы с участием, чтобы получить дополнительную информацию о том, как внести свой вклад.

Особая благодарность

Спасибо участникам, участвующим в этих библиотеках витамина-пакета (даже до того, как они были открытыми исходными коссией) . ?

Спасибо также значок ремикса, потому что Vitamix Icons является официальной библиотекой иконок Decathlon, основанной на их библиотеке значков с открытым исходным кодом (дизайн ремикса © 2020). Эта оригинальная библиотека находится под лицензией Apache 2.0 и была изменена Decathlon. Узнать больше.

Лицензия

 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.