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
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. Paste and save the svg on your text editor
Naming:
icon-{name}-gray = $gray
icon-{name}-graydark = $gray-dark
icon-{name}-white = $white
...
4. Copy your saved icon, then upload it to empower-production-assets
...
To use an Icon from CDN
Copy the URL of the icon
...
2. Then paste the URL to your code
...
Adding Skeleton
Go to: essentials\resources\js\version2\constants\Loader.js
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
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.
...