Asset library for Renault Design System.
How to use
Configure Renault artifactory:
- Connect to Renault artifactory to ensure your account is already created
- Go to your profile and get your API key (or generate it and copy it)
- Then configure artifactory in your npm settings:
npm config set registry https://artifactory.dt.renault.com/artifactory/api/npm/npm/npm login# and enter: your ipn as username, copied API key as password, and your email
npm i desyre
And then link files from
node_modules/desyre/dist/ folder. Example in a SCSS file:
Include the entire library:
Include only the used components:
See complete documentation about variables and available components here: https://design-system.gitlab-pages.dt.renault.com/desyre/landing-page
How to contribute
npm run build:all
Files are generated in
You can also start the watchers, to generate files each time the source change:
npm run watch
Styles can be previewed from html pages in
Publish a new version
npm version <newversion>npm publish
This step is done by Gitlab CI. You need to bump the version, then merge develop branch into master branch to trigger the package publication to npm repository.
- Main development branch is
- A feature branch starts from
develop, and is attached to a merge request. Once accepted, the feature branch can be merged in
developand will be deleted.
developis stable and candidate for a package release in production, bump the version and commit it, then merge to
master. It will be automatically published to npm repository.
For each development (feature, fix, rework, ...), the CHANGELOG.md file should be updated with the description of the new changes. It will enable to have the complete list of all changes linked to a release. For further information, please read the CHANGELOG.md file.
CSS objects naming
CSS variables must be named according to the following pattern:
--modifier is optional
CSS classes must be named according to the following pattern:
block is a standalone entity that is meaningful on its own:
element is a part of a block that has no standalone meaning and is semantically tied to its block:
header title ...
modifier is a flag on a block or element. Use them to change appearance, behavior or state:
--modifier is optional
Find more examples there: http://getbem.com/naming/