Styleguide, Sass and Angular Instructions

[mattJurz]

Styleguide, Sass and Angular Instructions

We want to standardize the way we approach the Ui design, Sass and angular structure. Please follow the instructions bellow.

UI-Design

There is a Styleguide that we are working on right now that is not completed but some of it has already been pushed and you can see it in the STYLE GUIDE page

Please use reuse all the style that you can see in this page:

• borders
• spacing
• cards
• round corners
• input colors
• bg colors
• etc

Sass:

Naming convention:
We want to avoid any kind of nesting inside our css and we are using BEM naming conventions.
Please read the documentation and start using it.

Structure:

The CSS for components we use inside the component folder, all the other global styles, mixins and reusable classes we keep inside the assets folder: assets.
Bootstrap: we are importing all the bootstrap SCSS files from our bootstrap file in the vendors folder: _bootstrap.scss. After that, we have created a separate _custom-bootstrap.scss file where we set the bootstrap settings _custom-bootstrap.scss
Please analyze and follow our sass structure.

Angular Structure

All the reusable ui components are stored in ui-components folder, pages, layout, shared classes are kept separately. Please follow our structure for modeling the components app