Styles, Theming and UI Kit

Theming and controls

AVASpace is using grid system, utilities and helpers from Bootstrap v5.1.3 to build responsive application layouts and Avaspace controls based on Angular Material controls to bring fast application building to other developers. Bootstrap documentation can be found here.

Responsivity

AVASpace is defining mobile breakpoints as:

• Smallest mobile width: 360px
• Mobile menu breakpoint: 768px – breakpoint when menu is changed to hamburger menu and back

UI Kit

UI kit defines color palette, font family, font size, spacing, control design etc.

List of basic design rules is:

Default font size: 16px

Font family

• Headers: geomanist-bold
• Other: geomanist,

Spacing

number	size
0	0 px
1	4 px
2	8 px
3	16 px
4	24 px
5	48 px
6	72 px
7	96 px
8	120 px
9	144 px
10	168 px

Headers

	size
h1	40 px
h2	32 px
h3	28 px
h4	24 px
h5	20 px
h6	16 px

Display

	size
display-1	80 px
display-2	72 px
display-3	64 px
display-4	56 px
display-5	48 px
display-6	40 px

If you need to use variables from control library, you can import it in scss file like: @import '~@asol-platform/controls/asol-platform.variables.scss';

#ESLint and Prettier ESLint and prettier are used to enforce coding standards. After each implementation every developer should run linting and fix issues. ESLint and Prettier should be already installed using Angular Essentials extension, but in some cases the installation is not working. In that case follow these steps here.

Formatters

To use same formatters each application should have same settings. This is done through settings.json file which should be in .vscode folder. If it is not there create folder .vscode and settings.json and add following settings:

{
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.codeActionsOnSave": {
      "source.fixAll.eslint": true
    },
    "editor.formatOnSave": true
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.codeActionsOnSave": {
      "source.fixAll.eslint": true
    },
    "editor.formatOnSave": true
  },
  "[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.codeActionsOnSave": {
      "source.fixAll.eslint": true
    },
    "editor.formatOnSave": true
  },
  "[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.codeActionsOnSave": {
      "source.fixAll.eslint": true
    },
    "editor.formatOnSave": true
  },
  "[scss]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.codeActionsOnSave": {
      "source.fixAll.eslint": true
    },
    "editor.formatOnSave": true
  }
}

You should also exclude .vscode folder from .gitignore file, so the settings.json will be stored in git.