...
Icons and SVG Files
Locate icon at: essentials\resources\js\version2\assets\Asset.jsCDN: 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 FigmaSave 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. And then, paste the svg into essentials\resources\js\version2\assets\Asset.js
...
Naming: SVG_{NAME}
Ex. SVG_NEWSFEED, SVG_DTRSTATUS_GREEN, SVG_BADGE_INACTIVEPaste 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 Assets.jsCDN
Copy the URL of the SVG name icon
...
2. Import Then paste the SVG URL to the file
...
3. Then, call the SVG
...
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.
...
Import it on the page then add the component.
...
Theming
Locate Theme folder.
...
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
...