css-desyre v0.1.3

css-desyre

Collection of CSS assets for the 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

The library consists of core elements of DeSyRe, the Renault Design System

Installation

npm i css-desyre

And then link files from node_modules/css-desyre/dist/ folder. Example in a SCSS file:

Include the entire library:

@import '~css-desyre/dist/css/desyre.min.css';

Include only the used components:

@import '~css-desyre/dist/css/global/desyre-text.min.css';
@import '~css-desyre/dist/css/global/desyre-fonts.min.css';
@import '~css-desyre/dist/css/compoenents/desyre.min.css';

See complete documentation about variables and available components here: https://design-system.gitlab-pages.dt.renault.com/desyre/landing-page

How to contribute

Build

npm i                    # install NPM packages dependencies
npm run build:all        # build the library
npm run build:showcase   # build the html app showcase

Files are generated in dist/ folder in packages folders.

See main package.json file for detailed commands.

Publish a new version

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.

Workflow

• Main development branch is develop.
• A feature branch starts from develop, and is attached to a merge request. Once accepted, the feature branch can be merged in develop and will be deleted.
• When develop is 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.

Conventions

CSS objects naming

Variables

CSS variables must be named according to the following pattern:

dsr-elementtype-elementname--modifier

--modifier is optional

Examples:

dsr-color-yellow
dsr-color-red--light

Classes

CSS classes must be named according to the following pattern:

dsr-block__element--modifier

block is a standalone entity that is meaningful on its own: header, container, menu, checkbox, input ...

element is a part of a block that has no standalone meaning and is semantically tied to its block: menu item, list item, checkbox caption, header title ...

modifier is a flag on a block or element. Use them to change appearance, behavior or state: disabled, highlighted, checked, fixed, size big, color yellow

--modifier is optional

Find more examples there: http://getbem.com/naming/

Examples:

dsr-btn__icon
dsr-btn__icon--hover
dsr-card__title
dsr-card__title--danger

DESIGN TOKENS

We use design token with css custom properties in place of hard-coded values (such as hex values for color or pixel values for spacing) in order to maintain a scalable and consistent visual system for UI development.

FONTS Tokens

Use these tokens for fonts text colors only.

FONTS SIZE Tokens

Use these tokens for text size only. Do not use spacing for text.

SPACING Tokens

Spacing tokens are used for padding, margins, border. Use size tokens to control the size of common objects.

COLORS Tokens

Generic colors to use within a Desyre application. Tokens have the prefix of "--dsr-color".