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.
...