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: essentials\resources\js\version2\assets\Asset.js
CDN: empower-production-assets
Add documentatiion for assets
Naming:
icon-{name}-gray = $gray
icon-{name}-graydark = $gray-dark
icon-{name}-white = $white
To export an Icon from Figma
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 essentials\resources\js\version2\assets\Asset.js
Naming: SVG_{NAME}
Ex. SVG_NEWSFEED, SVG_DTRSTATUS_GREEN, SVG_BADGE_INACTIVE
To use an Icon from Assets.js
Copy the SVG name
2. Import the SVG to the file
3. Then, call the SVG
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.