Skip to end of metadata
Go to start of metadata

You are viewing an old version of this page. View the current version.

Compare with Current View Page History

« Previous Version 5 Next »

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

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

  • No labels