vitamin web

Importante

Esta versão atual da vitamina não evoluirá mais e aceitará apenas as correções de bugs a partir de agora. Mais detalhes aqui.

Web de vitaminas

Bibliotecas de sistemas de design de decatlo para aplicativos da Web

Site - Showcases

Introdução

O sistema de design de decatlo é a estrutura que ajuda nosso ecossistema a projetar e desenvolver experiências consistentes e de qualidade. Para sua seção digital, é chamado de vitamina.

Este repositório hospeda bibliotecas para aplicativos da Web.

Pacotes principais

Para permitir que você consuma os elementos do sistema de design de acordo com as restrições do seu produto , oferecemos a possibilidade de usar as bibliotecas da Web de vitaminas com diferentes tecnologias e níveis de granularidade com pacotes principais desenvolvidos e mantidos pela equipe do Core Vitamin.

Estilos CSS globais?

Este pacote fornece um CSS completo com um enorme conjunto de classes de serviços públicos, pois é gerado com CSS com vento de cauda. Em seguida, cabe a você otimizar a produção, purgando o CSS de acordo com as classes usadas em seu HTML:

@vtmn/css	Readme

Se você já usa o Tailwind CSS em seu projeto ou deseja aproveitar ao máximo todos os seus recursos, como funções e diretrizes, construindo suas próprias aulas via @apply , por exemplo. Você pode verificar nosso pacote @vtmn/css-tailwind-preset , que explicará como usar estilos de vitaminas em um projeto CSS de vento de cauda.

Estilos CSS específicos?

Esses pacotes permitem o consumo de elementos com um nível mais alto de granularidade. Você obtém apenas os estilos de que precisa e o que você consome é puro CSS sem propriedades personalizadas do CSS, portanto, 11 compatíveis:

Para tokens de design

@vtmn/css-design-tokens	Readme

Para cada componente

Ações

@VTMN/CSS-Button	Readme
@vtmn/css-dropdown	Readme
@vtmn/css-link	Readme

Formas

@vtmn/css-select	Readme
@VTMN/CSS-Text-Input	Readme

Indicadores

@vtmn/css-badge	Readme
@VTMN/CSS-carregador	Readme
@vtmn/css-price	Readme
@vtmn/css-progressBar	Readme
@VTMN/CSS-classificação	Readme
@vtmn/css-tag	Readme

Navegação

@vtmn/css-breadcrumb	Readme
@vtmn/css-navbar	Readme
@vtmn/css-search	Readme
@vtmn/css-tabs	Readme

Sobreposições

@vtmn/css-alert	Readme
@vtmn/css-modal	Readme
@vtmn/css-popover	Readme
@vtmn/css-snackbar	Readme
@VTMN/CSS-Toast	Readme
@VTMN/CSS-TOOLTIP	Readme

Controles de seleção

@vtmn/css-checkbox	Readme
@vtmn/css-chip	Readme
@VTMN/CSS-Quantity	Readme
@VTMN/CSS-Radio-Button	Readme
@vtmn/css-toggle	Readme

Estrutura

@vtmn/css-acordion	Readme
@vtmn/css-card	Readme
@VTMN/CSS-Divider	Readme
@vtmn/css-list	Readme
@VTMN/CSS-SKELETO	Readme

Para utilitários

@VTMN/CSS-UTILIDADES	Readme

Ícones

Este pacote fornece uma biblioteca de ícones SVG que você pode incluir de várias maneiras (SVGS, Icon Font, Sprite, CSS, incorporado) :

@vtmn/ícones	Readme

Ativos ?

Este pacote fornece uma biblioteca de ativos SVG que você pode incluir de várias maneiras (SVGs, Fonte de Ativo, Sprite, CSS, incorporado) :

@vtmn/ativos	Readme

Pacotes comunitários

Para melhorar sua experiência no desenvolvedor, oferecemos a possibilidade de desenvolver seus componentes no React, Sieve e Vue com base em nossos pacotes principais logo acima. Essas bibliotecas são desenvolvidas e mantidas pela comunidade, a equipe principal de vitaminas estará lá para revisar e garantir a qualidade de suas proposições, sinta -se à vontade para contribuir!

Reaja?

Este pacote fornece uma biblioteca de componentes do React:

@vtmn/react	Readme

Esbelto?

Este pacote fornece uma biblioteca de componentes esbeltos:

@vtmn/svelte	Readme

Vue?

Este pacote fornece uma biblioteca de componentes VUE:

@vtmn/vue	Readme

Contribuindo

Uma das metas do sistema de design de decatlo é fornecer diretrizes e componentes para ganhar consistência, eficiência e acessibilidade. A melhor maneira de conseguir isso está juntos! É por isso que estamos no Github. Adoraríamos contribuições da comunidade (relatórios de bug, solicitações de recursos, sugestões, solicitações de puxar, o que você quiser!) .

Os espaços de trabalho de fios e o NX são usados para gerenciar dependências e criar configuração entre os pacotes. Lerna é usada para gerenciar o versão e publicação.

Execute o seguinte para configurar seu ambiente de desenvolvimento 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

Consulte os documentos contribuintes para obter mais informações sobre como contribuir.

Obrigado especial

Obrigado aos colaboradores envolvidos nessas bibliotecas de vitamina-Web (mesmo antes de serem de código aberto) . ?

Obrigado também remixe o ícone porque os ícones da Vitamix são a biblioteca oficial do ícone de decatlo com base em sua biblioteca de ícones de código aberto (Remix Design © 2020). Esta biblioteca original está sob a licença Apache 2.0 e foi modificada por decatlo. Saber mais.

Licença

 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.