vitamin web

Importante

Esta versión actual de la vitamina ya no evolucionará y solo aceptará correcciones de errores a partir de ahora. Más detalles aquí.

Web vitamina

Bibliotecas de sistemas de diseño de decatlón para aplicaciones web

Sitio web - exhibiciones

Introducción

El sistema de diseño de decatlón es el marco que ayuda a nuestro ecosistema a diseñar y desarrollar experiencias consistentes y de calidad. Para su sección digital, se llama vitamina.

Este repositorio aloja bibliotecas para aplicaciones web.

Paquetes centrales

Para permitirle consumir los elementos del sistema de diseño de acuerdo con las limitaciones de sus productos , le brindamos la posibilidad de utilizar las bibliotecas web de vitaminas con diferentes tecnologías y niveles de granularidad con paquetes centrales desarrollados y mantenidos por el equipo central de vitamina.

Estilos globales de CSS?

Este paquete le proporciona un CSS completo un gran conjunto de clases de utilidad, ya que se genera con CSS de viento de cola. Entonces dependerá de usted optimizar para la producción purgando el CSS de acuerdo con las clases utilizadas en su HTML:

@vtmn/css	Readme

Si ya usa CSS Tailwind en su proyecto o si desea aprovechar al máximo todas sus características, como funciones y directivas, construyendo sus propias clases a través de @apply . Puede consultar nuestro paquete @vtmn/css-tailwind-preset , que le explicará cómo usar estilos de vitaminas en un proyecto CSS de viento de cola.

Estilos de CSS específicos?

Estos paquetes permiten el consumo de elementos con un mayor nivel de granularidad. Obtiene solo los estilos que necesita y lo que consume es CSS puro sin propiedades personalizadas de CSS, por lo tanto, es decir, 11 compatible:

Para fichas de diseño

@vtmn/css-design-tokens	Readme

Para cada componente

Comportamiento

@vtmn/css-botton	Readme
@vtmn/css-dropdown	Readme
@VTMN/CSS-Link	Readme

Formularios

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

Indicadores

@vtmn/css-badge	Readme
@VTMN/CSS-Loader	Readme
@vtmn/css-privado	Readme
@VTMN/CSS Progressbar	Readme
@VTMN/CSS-CLASE	Readme
@vtmn/css-tag	Readme

Navegación

@VTMN/CSS-Breadcrumb	Readme
@VTMN/CSS-Navbar	Readme
@VTMN/CSS-Search	Readme
@vtmn/css-tabs	Readme

Superposición

@vtmn/css-alert	Readme
@vtmn/css-modal	Readme
@VTMN/CSS-POPOVER	Readme
@vtmn/css-snackbar	Readme
@vtmn/css-tost	Readme
@vtmn/css-tooltip	Readme

Controles de selección

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

Estructura

@VTMN/CSS-Accordion	Readme
@vtmn/css-comd	Readme
@VTMN/CSS-Divider	Readme
@vtmn/css-list	Readme
@vtmn/css-esqueleton	Readme

Para servicios públicos

@vtmn/css-utilidades	Readme

Íconos

Este paquete le proporciona una biblioteca de iconos SVG que puede incluir de manera (SVG, fuente de iconos, Sprite, CSS, incrustado) :

@vtmn/icons	Readme

Activos ?

Este paquete le proporciona una biblioteca de activos de SVG que puede incluir de manera en un puñado de formas (SVG, fuente de activos, Sprite, CSS, incrustado) :

@vtmn/activos	Readme

Paquetes comunitarios

Para mejorar la experiencia de su desarrollador, le damos la posibilidad de desarrollar sus componentes en React, Svelte y Vue en función de nuestros paquetes principales justo arriba. Estas bibliotecas son desarrolladas y mantenidas por la comunidad, el equipo central de vitaminas estará allí para revisar y garantizar la calidad de sus proposiciones, ¡no dude en contribuir!

Reaccionar?

Este paquete le proporciona una biblioteca de componentes React:

@vtmn/reaccionar	Readme

Esbelte?

Este paquete le proporciona una biblioteca de componentes SVelte:

@vtmn/eslte	Readme

¿Vue?

Este paquete le proporciona una biblioteca de componentes VUE:

@vtmn/vue	Readme

Que contribuye

Uno de los objetivos del sistema de diseño de decatlón es proporcionar directrices y componentes para ganar consistencia, eficiencia y accesibilidad. ¡La mejor manera de lograr esto es juntos! Por eso estamos en Github. Nos encantaría contribuciones de la comunidad (informes de errores, solicitudes de funciones, sugerencias, solicitudes de extracción, lo que quieras!) .

Los espacios de trabajo de Yarn y NX se utilizan para administrar dependencias y construir la configuración en todos los paquetes. Lerna se utiliza para administrar versiones y publicaciones.

Ejecute lo siguiente para configurar su entorno de desarrollo 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 los documentos contribuyentes para obtener más información sobre cómo contribuir.

Agradecimiento especial

Gracias a los contribuyentes involucrados en estas bibliotecas de vitamina-Web (incluso antes de que fueran de código abierto) . ?

Gracias también icono de remix porque Vitamix Icons es la biblioteca oficial de iconos de decatlón basada en su biblioteca de iconos de código abierto (Remix Design © 2020). Esta biblioteca original está bajo la licencia Apache 2.0 y ha sido modificada por Decathlon. Aprende más.

Licencia

 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.