foundation
: atomics components. e.g. typographies, colors{component-name}
: molecules components. e.g buttons, text inputsvitamin
: final artifact with Vitamin templatesample
: demo with all Vitamin components in action
You can find all components in ReadMe, at the Artifacts paragraph.
Because Vitamin is the Design System of Decathlon, you may ask why this project is open source? There are multiple reasons for that:
- We are working with a lot of external teams, sometimes with no access to our internal resources, publish this project on the public registry, Maven Central, and in our public GitHub organization allow us to work better with these teams.
- For now, Vitamin is the Design System of Decathlon but the ambitions of this project is to create a generic Design System for retail application, not specific to Decathlon.
This project and everyone participating in it is governed by the following code of conduct. By participating, you are expected to uphold this code.
If you are not familiar with Git and GitHub terms you can check a complete glossary on the GitHub website.
As shown in Pull Request template, you have to test on 3 devices, mobile, tablet and kiosk. If you do not own these types of devices, you can emulate them following these tips.
The first way to contribute to a project is simply proposing an issue. If you find anything which is not working well or as expected you can open an issue.
Before to open the issue please check if there is one similar already opened. It will save us hours of work and it will allow us to answer you quickly with the desired hotfix or implementation.
NOTE: if looking for existing issues you will find the same problem, or similar, in closed state, please refer to this issue (with its number) when you are opening your one. It is maybe a regression we didn't see. In this way you will help to go faster and to find a definitive solution to the recurrent problem.
When you are opening an issue, please be sure to report as much information as you can to allow us to replicate the problem and faster find the solution.
If you are a dev and you want to directly fix a problem or implement a new feature... you are the best one ! 👏 To propose any change you have to submit us a Pull Request
The workflow we are using is:
- Fork this repository (as you don't have a direct write access to the main one).
- Create your code,
Commit
andPush the code
on your forked repo - Create a GitHub
Pull Request
to our main branch (which is the main one for the coming version).
We will take the time to review your code, make some comments or asking information if needed. But, as you took time to help us, we will take in serious consideration what you are proposing. To quickly have your code available on production, please take care and read our Contribution acceptance criteria
We love maintenable software and we are happy when some else than us is able to take the code, understand it and be able to change it. To reach this goal we fixed some rule in our team and we would love to go ahead in this way, even with the external contribution:
- Be sure your code compile: no syntax error, no missing library, ...
- Add comments on the code if you want to explain better what is happening in the code.
- Add documentation for any API, if needed, or functional explaining what changed/added with your code.
- After you proposed the PullRequest. If you will receive any mail or find any automatic comment on the Pull Request you opened, it means there is something which is not respecting the project defined code style or your broke any previously created test.
If you respect all these rules you will help us saving time and we will be able to check your pull request faster.
To keep a clean project, thanks to respect the following naming convention guidelines:
- Theme attributes use camel case with the following specification for the name:
vtmn<Component><Variant>?<Size>?
whereComponent
is the name of the component in singularVariant
is an optional variant if exist for the componentSize
is an optional size if exist for the component
- Resource use snake case with the following specification for the name:
vtmn_<module>_<component>?_<description>_<size>?
wheremodule
is the module name of the componentcomponent
is an optional name if the module have several componentsdescription
is free space to give more context about the resourcesize
is an optional size if exist for the resource