Decathlon Design System - Vitamin specific CSS styles for text input component
# with npm npm i -S @vtmn/css-modal # with yarn yarn add @vtmn/css-modal
Or you can also install it with a CDN like
<link rel="stylesheet" href="https://unpkg.com/@vtmn/css-modal" />
Shown below is a sample link markup used to load from a CDN:
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&family=Roboto+Condensed:ital,wght@0,400;0,700;1,700&display=swap" />
You can also do it via CSS Import:
Otherwise, you can install them with
# with npm npm i -S typeface-roboto typeface-roboto-condensed # with yarn yarn add typeface-roboto typeface-roboto-condensed
Then, you can import them in your entry-point:
import 'typeface-roboto'; import 'typeface-roboto-condensed';
Install icons (optional)
If you need to display icons, you will need to install
# with npm npm i -S @vtmn/icons # with yarn yarn add @vtmn/icons
Then follow instructions in README of @vtmn/icons :
Or you can also import it with a CDN like
unpkg.com with this file.
Once you have installed this package, you just have to import CSS styles!
With a bundler that supports CSS imports in JS files:
Otherwise include it in your HTML file:
<link rel="stylesheet" href="./node_modules/@vtmn/css-modal/dist/index.css" />
To know all the use cases and their associated code, check out the showcase here.
For more information about how this component is designed and how to use it in your application, check out the decathlon.design docs
Base 10 support
If your project uses the mathematical trick of basing the value of
10px, there is also an
index-base10 output within the
dist folder of this package.
If you want to know the different changes between versions of this package, look at the changelog here.
I have an issue, what should I do?
Please file the issue here.
Apache-2.0 © Decathlon