For CSS Guidelines and Documentation:
https://docs.google.com/document/d/1HGSnVGT7tMMU01PmDboF7ZiX41lDo8VXBi6N-7Xds20/edit#

Css Guidelines

Adding Scss to V2

• Make sure to add your codes inside “v2” class name.

• Tips: 

  • Use existing/global class names as much as possible to avoid code duplication. Ex. .button, .card, .card-content, .alert, .row

  • When adding a certain style to a component you can either add a parent class name or another class name.

Ex.

Naming Convention

• {component_name}-{name}

Ex. card-overtime

Icons and SVG Files

• Locate icon at: empower-production-assets

Save Icon

1. Locate and select  the icon on the mockup

2. Copy the icon by left-clicking on the selected icon and then selecting Copy/Paste as > Copy as SVG

3. And then, paste the svg into your text editor

• Naming:

  • icon-{name}-gray = $gray

  • icon-{name}-graydark = $gray-dark

  • icon-{name}-white = $white

To use an Icon from Assets.js

1. Copy URL of the icon

2. Then paste the URL to your code

Adding Skeleton

1. Go to: essentials\resources\js\version2\constants\Loader.js

2. Add your code. Ex.

3. Add Scss at: essentials\resources\sass\version2\components\_loading.scss

Ex.

• Naming :

Ex. l-{name}

• Tip:

  • Use existing class names as much as possible. 

Ex. l-card, l-text, l-icon, l-info, l-button

4. To use the loader:

 Import it on the page then add the component.

Theming

1. Locate Theme folder.

2. Add your Scss codes inside “ .v2.theme-dark”, “.v2.theme-gray“ and “.v2.theme-lightblue“ class names.

3. Make sure to use the premade Sass styles above.

Mobile Responsiveness

• The breakpoints are set using media queries inside a mixin

• Tip:

  • Write you code through mobile-first approach

To use the mixin add the @include at-rule inside your code. 

Syntax: @include <name> { … }

Ex.