Design System Style Rules

Official Content
This documentation is valid for:

There’s a set of rules (beginning with the @ sign) that you can use for structuring Styles. They let you: 

●    Compose classes  

For example, declare that the H1 class consists of the style of the H1_Negative and Margin-Sides classes, in addition to the specific properties defined for it (only color here):

          @include H1_Negative Margin-Sides;
          color: $colors.Black;

See Include style rule.

●    Import Tokens or styles (or both) from other Design System Objects.

For example, declare that you are going to import both Tokens and Styles from the DSO named TravelAgency into the current one:

styles TravelAgencyFrontendExtended
    @import TravelAgency;

See Import style rule.

●    Vary the style of a class according to the screen size. 

For example, when the screen width is less than 768px, the H1_Negative class has a font-size of 26px: 

@media screen and (max-width:767px)
    .H1_Negative {
        font-size: 26px;

Note that this relates precisely to CSS Media Queries
See Media style rule.

●    Incorporate a non-default source

For example, to use the AbhayaLibre-bold family, which is not a default font, in some token or class.

    font-family: AbhayaLibre-Bold; 
    src: gx-file(AbhayaLibre-Bold_ttf);
    color: #FFFFFF;
    font-size: $fontSizes.H1;
    font-family: AbhayaLibre-Bold;

See Font-face style rule.


Since GeneXus 17 Upgrade 6.