@rbc-dsse/framework-library-css NPM

RBC Wealth Management UI Library SCSS/CSS base code

Project setup

The CSS library is the main style base on which everything relies on. The Angular (framework-library-angular), React (framework-library-react) and Vuejs (framework-library(-vue)) libraries are all consuming these styles. Combined with the testing repository for Cypress (framework-library-specs), this creates the full ecosystem for the UI library of components for the Design System of RBC Wealth Management.

Architecture

v2/
	- framework-library-specs
	- framework-library-css
	- framework-library(-vue)
	- framework-library-angular
	- framework-library-react

Folder structure

/src/ contains the styles for the base and components.
/src/components/ contains the stylesheets for the components and modules. Each folder follows a naming convention: NameOfComponent.scss for the main styles of the component and NameOfComponent.dependencies.scss for importing the styles of base components when compiling the single component CSS.
/src/Core/ contains all of the base styles for typography, layout, utilities etc.
/src/variables/ contains all of the Sass variables to be consumed by base styles and components.
/src/_universal.scss contains Sass variables for the RBC brand colours and fonts.
/src/_variables.scss contains imports of the necessary Sass variable files.
/src/library.scss contains imports of the necessary variables and partial files to be compiled into the main CSS.

Install dependencies

To work on this project, you are going to need sass to build the SCSS into CSS. You can find instructions to install sass: https://sass-lang.com/install

After sass is properly installed, you can run:

npm install

Contribution

Branching model

We are using a standard approach for our branching model. The production code is held in the master branch. The development code is held in the dev branch. All the development work should be made on the dev branch making sure you pull the latest code before contributing back.

master : production branch
dev : development branch
feature/{name of feature} : to branch out and create a feature branch.
fix/{name of fix} : to branch out and create a fix branch.
v1 : this branch holds the CSS code of the v1 of the library. (Used in Angular v1)

How to work with us

You can create a Pull Request out of dev back to dev. If it is an approved feature or fix, a reviewer will approve the changes and merge it into dev.