Installations
npm install @vtmn/css-tagReleases
Unable to fetch releases
Developer
Developer Guide
Module System
CommonJS
Min. Node Version
Typescript Support
No
Node Version
14.21.3
NPM Version
lerna/5.6.2/node@v14.21.3+x64 (linux)
Statistics
282 Stars
2,045 Commits
76 Forks
15 Watching
2 Branches
58 Contributors
Updated on 25 Oct 2024
Languages
HTML (31.83%)
JavaScript (21.07%)
CSS (15.59%)
TypeScript (13.27%)
Svelte (11.81%)
Vue (4.9%)
MDX (1.47%)
Shell (0.06%)
Total Downloads
Cumulative downloads
Total Downloads
2,246,056
Last day
-16%
1,765
Compared to previous day
Last week
-42.6%
7,889
Compared to previous week
Last month
-27.1%
48,547
Compared to previous month
Last year
-14.4%
947,547
Compared to previous year
Daily Downloads
Weekly Downloads
Monthly Downloads
Yearly Downloads
Dev Dependencies
2
[!IMPORTANT] This current version of Vitamin will no longer evolve and only accept bug fixes from now on. More details here.
Vitamin Web
Decathlon Design System libraries for web applications
Introduction
Decathlon Design System is the framework that helps our ecosystem to design and develop consistent and quality experiences. For its Digital section, it is called Vitamin.
This repository hosts libraries for web applications.
Core packages
In order to allow you to consume the elements of the Design System according to your product constraints, we give you the possibility of using the Vitamin web libraries with different technologies & levels of granularity with core packages developed and maintained by the Vitamin core team.
Global CSS styles 🎨
This package provides you with a complete CSS with a huge set of utility classes as it is generated with Tailwind CSS. Then it will be up to you to optimize for production by purging the CSS according to the classes used in your HTML:
| @vtmn/css | README |  |  |
|---|
If you already using Tailwind CSS in your project or you want to take full advantage of all its features like functions & directives by building your own classes via @apply for example. You can check our package @vtmn/css-tailwind-preset which will explain you how to use Vitamin styles in a Tailwind CSS project.
Specific CSS styles 🖌
These packages allow the consumption of elements with a higher level of granularity. You get only the styles you need and what you consume is Pure CSS without CSS Custom Properties, therefore IE 11 compatible:
For design tokens
| @vtmn/css-design-tokens | README | |  |
|---|
For each component
Actions
| @vtmn/css-button | README |  | |  | |
|---|---|---|---|---|---|
| @vtmn/css-dropdown | README | | |  | |
| @vtmn/css-link | README | | |  |
Forms
| @vtmn/css-select | README | | |  | |
|---|---|---|---|---|---|
| @vtmn/css-text-input | README | | |  |
Indicators
| @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 | | |  |
Selection controls
| @vtmn/css-checkbox | README | | |  | |
|---|---|---|---|---|---|
| @vtmn/css-chip | README | | |  | |
| @vtmn/css-quantity | README | | |  | |
| @vtmn/css-radio-button | README | | |  | |
| @vtmn/css-toggle | README | | |  |
Structure
| @vtmn/css-accordion | README | | |  | |
|---|---|---|---|---|---|
| @vtmn/css-card | README | | |  | |
| @vtmn/css-divider | README | | |  | |
| @vtmn/css-list | README | | |  | |
| @vtmn/css-skeleton | README | | |  |
For utilities
| @vtmn/css-utilities | README | |  |
|---|
Icons ✨
This package provides you with a library of SVG icons that you can include in a handful of ways (SVGs, icon font, sprite, CSS, embedded):
| @vtmn/icons | README | |  |  |
|---|
Assets 🏞
This package provides you with a library of SVG assets that you can include in a handful of ways (SVGs, asset font, sprite, CSS, embedded):
| @vtmn/assets | README | |  |
|---|
Community packages
In order to enhance your Developer eXperience, we give you the possibility to develop your components in React, Svelte and Vue based on our core packages just above. These libraries are developed and maintained by the community, the Vitamin core team will be there to review, and ensure the quality of your propositions, feel free to contribute!
React 🔵
This package provides you with a library of React components:
| @vtmn/react | README |  |  |
|---|
Svelte 🟠
This package provides you with a library of Svelte Components:
| @vtmn/svelte | README |  |  |
|---|
Vue 🟢
This package provides you with a library of Vue components:
| @vtmn/vue | README |  |  |
|---|
Contributing
One of the Decathlon Design System goals is to provide guidelines & components to gain in consistency, efficiency & accessibility. The best way to achieve this is together! That's why we are on GitHub. We would love contributions from the community (bug reports, feature requests, suggestions, Pull Requests, whatever you want!).
Yarn workspaces and nx are used to manage dependencies and build config across packages. Lerna is used to manage versioning & publishing.
Run the following to setup your local dev environment:
1# Install `yarn`, alternatives at https://yarnpkg.com/en/docs/install 2brew install yarn 3 4# Clone or fork `vitamin-web` 5git clone git@github.com:Decathlon/vitamin-web.git # or your fork 6cd vitamin-web 7 8# install dependencies 9yarn 10 11# build all packages 12yarn build 13 14# start all showcases and build sources in watch mode & hot reload 15yarn start 16# or you can launch separately (recommended) 17yarn start:css 18yarn start:icons 19yarn start:react 20yarn start:svelte 21yarn start:vue
👉 See the contributing docs for more information about how to contribute.
Special thanks
Thank you to the contributors involved in these vitamin-web libraries (even before they were Open Source). 💙
Thank you also Remix Icon because Vitamix Icons is the official Decathlon icon library based on their open-source icon library (Remix Design © 2020). This original library is under the license Apache 2.0 and has been modified by Decathlon. Learn more.
License
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.
No vulnerabilities found.
Reason
security policy file detected
Details
- Info: security policy file detected: SECURITY.md:1
- Info: Found linked content: SECURITY.md:1
- Info: Found disclosure, vulnerability, and/or timelines in security policy: SECURITY.md:1
- Info: Found text in security policy: SECURITY.md:1
Reason
no dangerous workflow patterns detected
Reason
license file detected
Details
- Info: project has a license file: LICENSE:0
- Info: FSF or OSI recognized license: Apache License 2.0: LICENSE:0
Reason
no binaries found in the repo
Reason
SAST tool is not run on all commits -- score normalized to 8
Details
- Warn: 13 commits out of 15 are checked with a SAST tool
Reason
Found 15/30 approved changesets -- score normalized to 5
Reason
0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0
Reason
detected GitHub workflow tokens with excessive permissions
Details
- Warn: no topLevel permission defined: .github/workflows/build-canary.yml:1
- Warn: no topLevel permission defined: .github/workflows/build-main.yml:1
- Warn: no topLevel permission defined: .github/workflows/build-pr.yml:1
- Info: no jobLevel write permissions found
Reason
no effort to earn an OpenSSF best practices badge detected
Reason
project is not fuzzed
Details
- Warn: no fuzzer integrations found
Reason
dependency not pinned by hash detected -- score normalized to 0
Details
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/build-canary.yml:13: update your workflow using https://app.stepsecurity.io/secureworkflow/Decathlon/vitamin-web/build-canary.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/build-canary.yml:24: update your workflow using https://app.stepsecurity.io/secureworkflow/Decathlon/vitamin-web/build-canary.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/build-canary.yml:30: update your workflow using https://app.stepsecurity.io/secureworkflow/Decathlon/vitamin-web/build-canary.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/build-canary.yml:54: update your workflow using https://app.stepsecurity.io/secureworkflow/Decathlon/vitamin-web/build-canary.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/build-canary.yml:71: update your workflow using https://app.stepsecurity.io/secureworkflow/Decathlon/vitamin-web/build-canary.yml/main?enable=pin
- Warn: third-party GitHubAction not pinned by hash: .github/workflows/build-canary.yml:85: update your workflow using https://app.stepsecurity.io/secureworkflow/Decathlon/vitamin-web/build-canary.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/build-main.yml:12: update your workflow using https://app.stepsecurity.io/secureworkflow/Decathlon/vitamin-web/build-main.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/build-main.yml:23: update your workflow using https://app.stepsecurity.io/secureworkflow/Decathlon/vitamin-web/build-main.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/build-main.yml:29: update your workflow using https://app.stepsecurity.io/secureworkflow/Decathlon/vitamin-web/build-main.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/build-main.yml:101: update your workflow using https://app.stepsecurity.io/secureworkflow/Decathlon/vitamin-web/build-main.yml/main?enable=pin
- Warn: third-party GitHubAction not pinned by hash: .github/workflows/build-main.yml:105: update your workflow using https://app.stepsecurity.io/secureworkflow/Decathlon/vitamin-web/build-main.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/build-pr.yml:12: update your workflow using https://app.stepsecurity.io/secureworkflow/Decathlon/vitamin-web/build-pr.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/build-pr.yml:16: update your workflow using https://app.stepsecurity.io/secureworkflow/Decathlon/vitamin-web/build-pr.yml/main?enable=pin
- Warn: third-party GitHubAction not pinned by hash: .github/workflows/build-pr.yml:20: update your workflow using https://app.stepsecurity.io/secureworkflow/Decathlon/vitamin-web/build-pr.yml/main?enable=pin
- Warn: third-party GitHubAction not pinned by hash: .github/workflows/build-pr.yml:27: update your workflow using https://app.stepsecurity.io/secureworkflow/Decathlon/vitamin-web/build-pr.yml/main?enable=pin
- Warn: third-party GitHubAction not pinned by hash: .github/workflows/build-pr.yml:32: update your workflow using https://app.stepsecurity.io/secureworkflow/Decathlon/vitamin-web/build-pr.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/build-pr.yml:39: update your workflow using https://app.stepsecurity.io/secureworkflow/Decathlon/vitamin-web/build-pr.yml/main?enable=pin
- Warn: third-party GitHubAction not pinned by hash: .github/workflows/build-pr.yml:45: update your workflow using https://app.stepsecurity.io/secureworkflow/Decathlon/vitamin-web/build-pr.yml/main?enable=pin
- Warn: third-party GitHubAction not pinned by hash: .github/workflows/build-pr.yml:52: update your workflow using https://app.stepsecurity.io/secureworkflow/Decathlon/vitamin-web/build-pr.yml/main?enable=pin
- Warn: third-party GitHubAction not pinned by hash: .github/workflows/build-pr.yml:57: update your workflow using https://app.stepsecurity.io/secureworkflow/Decathlon/vitamin-web/build-pr.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/build-pr.yml:64: update your workflow using https://app.stepsecurity.io/secureworkflow/Decathlon/vitamin-web/build-pr.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/build-pr.yml:71: update your workflow using https://app.stepsecurity.io/secureworkflow/Decathlon/vitamin-web/build-pr.yml/main?enable=pin
- Info: 0 out of 14 GitHub-owned GitHubAction dependencies pinned
- Info: 0 out of 8 third-party GitHubAction dependencies pinned
Reason
62 existing vulnerabilities detected
Details
- Warn: Project is vulnerable to: GHSA-hpx4-r86g-5jrg
- Warn: Project is vulnerable to: GHSA-prr3-c3m5-p7q2
- Warn: Project is vulnerable to: GHSA-67hx-6x53-jw92
- Warn: Project is vulnerable to: GHSA-wf5p-g6vw-rhxx
- Warn: Project is vulnerable to: GHSA-qwcr-r2fm-qrc7
- Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg
- Warn: Project is vulnerable to: GHSA-x9w5-v3q2-3rhw
- Warn: Project is vulnerable to: GHSA-pxg6-pf52-xh8x
- Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275
- Warn: Project is vulnerable to: GHSA-ghr5-ch3p-vcr6
- Warn: Project is vulnerable to: GHSA-434g-2637-qmqr
- Warn: Project is vulnerable to: GHSA-49q7-c7j4-3p7m
- Warn: Project is vulnerable to: GHSA-977x-g7h5-7qgw
- Warn: Project is vulnerable to: GHSA-f7q4-pwc6-w24p
- Warn: Project is vulnerable to: GHSA-fc9h-whq2-v747
- Warn: Project is vulnerable to: GHSA-4gmj-3p3h-gm8h
- Warn: Project is vulnerable to: GHSA-rv95-896h-c2vc
- Warn: Project is vulnerable to: GHSA-qw6h-vgh9-j6wx
- Warn: Project is vulnerable to: GHSA-jchw-25xp-jwwc
- Warn: Project is vulnerable to: GHSA-cxjh-pqwp-8mfp
- Warn: Project is vulnerable to: GHSA-vfrc-7r7c-w9mx
- Warn: Project is vulnerable to: GHSA-7wwv-vh3v-89cq
- Warn: Project is vulnerable to: GHSA-pfq8-rq6v-vf5m
- Warn: Project is vulnerable to: GHSA-c7qv-q95q-8v27
- Warn: Project is vulnerable to: GHSA-78xj-cgh5-2h22
- Warn: Project is vulnerable to: GHSA-2p57-rm9w-gvfp
- Warn: Project is vulnerable to: GHSA-4wx3-54gh-9fr9
- Warn: Project is vulnerable to: GHSA-5v2h-r2cx-5xgj
- Warn: Project is vulnerable to: GHSA-rrrm-qjm4-v8hf
- Warn: Project is vulnerable to: GHSA-x2fc-mxcx-w4mf
- Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv
- Warn: Project is vulnerable to: GHSA-rp65-9cf3-cjxr
- Warn: Project is vulnerable to: GHSA-j9fq-vwqv-2fm2
- Warn: Project is vulnerable to: GHSA-pqw5-jmp5-px4v
- Warn: Project is vulnerable to: GHSA-9wv6-86v2-598j
- Warn: Project is vulnerable to: GHSA-566m-qj78-rww5
- Warn: Project is vulnerable to: GHSA-7fh5-64p2-3v2j
- Warn: Project is vulnerable to: GHSA-wvhm-4hhf-97x9
- Warn: Project is vulnerable to: GHSA-h4hr-7fg3-h35w
- Warn: Project is vulnerable to: GHSA-gj77-59wh-66hg
- Warn: Project is vulnerable to: GHSA-hqhp-5p83-hx96
- Warn: Project is vulnerable to: GHSA-3949-f494-cm99
- Warn: Project is vulnerable to: GHSA-3965-hpx2-q597
- Warn: Project is vulnerable to: GHSA-p8p7-x288-28g6
- Warn: Project is vulnerable to: GHSA-gcx4-mw62-g8wm
- Warn: Project is vulnerable to: GHSA-c2qf-rxjj-qqgw
- Warn: Project is vulnerable to: GHSA-m6fv-jmcg-4jfg
- Warn: Project is vulnerable to: GHSA-cm22-4g7w-348p
- Warn: Project is vulnerable to: GHSA-8266-84wp-wv5c
- Warn: Project is vulnerable to: GHSA-f5x3-32g6-xq36
- Warn: Project is vulnerable to: GHSA-72xf-g2v4-qvf3
- Warn: Project is vulnerable to: GHSA-w5p7-h5w8-2hfq
- Warn: Project is vulnerable to: GHSA-7p7h-4mm5-852v
- Warn: Project is vulnerable to: GHSA-353f-5xf4-qw67
- Warn: Project is vulnerable to: GHSA-c24v-8rfc-w8vw
- Warn: Project is vulnerable to: GHSA-8jhw-289h-jh2g
- Warn: Project is vulnerable to: GHSA-4vvj-4cpr-p986 / GHSA-64vr-g452-qvp3
- Warn: Project is vulnerable to: GHSA-9cwx-2883-4wfx
- Warn: Project is vulnerable to: GHSA-wr3j-pwj9-hqq6
- Warn: Project is vulnerable to: GHSA-j8xg-fqg3-53r7
- Warn: Project is vulnerable to: GHSA-3h5v-q93c-6h6q
- Warn: Project is vulnerable to: GHSA-f9xv-q969-pqx4
Score
4.5
/10
Last Scanned on 2024-11-25
The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.
Learn More