Sizing

One of the features of ACoreX is element sizing. Using css classes and variables, you can change the size of an element or all elements

Our suggestion is to not change the default value as much as possible and to change the site elements to small and large for the whole project, change the body font size. Its default value is 16px

To implement size in ACoreX, we have created two variables --ax-sys-size-base and --ax-sys-size-base. In fact, their definition and value is as follows

styles.scss

To change the size, we have created different classes, each of which changes the --ax-sys-size-base variable. In fact, these classes increase or decrease the value of --ax-sys-size-base to a certain ratio. If you want to change the size, you should use the following classes for an element. And if you want to change the --ax-sys-size-base value for the whole project, you should increase or decrease the --ax-sys-size-base variable. The default value of --ax-sys-size-base is 2.5rem.

For example, size classes are written like this

styles.scss

Note that some components receive a specific size as a property and in the form of a number. Like ax-avatar

An example of placing a size on an element

app.component.html