Set the Base Styles

caution

This document needs an UPGRADE

Stylesheets are incredibly powerful and provide a lot of intelligent solutions to drive flexibility in your designs. There are over 100 different properties that you can use, and among other things, Evolve also comes with the ability to do queries, constants, and in-style variables. Stylesheets are scoped to modules which means that any styles the same level or lower in your module asset will be made available to all assets in the same module.

Typography styles

The first thing you will do is define the Title typography style. Create a new Style File and name it Typography. Open the file and add the following code:

const H1_Font = "H1";
const H2_Font = "H2";
const Normal_Font = "Normal";

const PrimaryAccentColor = #77E2C7;
const SecondaryAccentColor = #BACED4;

Evolve stylesheets can create a constant variable, which can be referenced by any style property. This is very handy for creating reusable values that you only need to change in one location. Constant variables require the const keyword, a string id and a value.

In the example above, a new constant is created called H1_Font with the value of H1, which points to the font asset reference you defined in QuestLogModule earlier.

Next, add the following:

style <Text_H1> {
   TextColor = white;
   TextTransform = UpperCase;
   TextFontAsset = @H1_Font;
   TextFontSize = 48px;
}

Styles require the style keyword, a string Id, and curly braces ({ }). All properties are defined within the curly braces.Surrounding a String Id with angle brackets ( < > ) indicates that you want the style applied to any element that matches the tag type. Leaving the brackets off is the equivalent of a class style, which you must reference on an element. (You'll do this shortly.)

In the code above, the <Text_H1> style will automatically be applied to any Typography element that has the same tag. The style has typical font properties, such as the font color and size. The TextTransform property is used to ensure every character is uppercase. The TextFontAsset property points to the H1_Font constant defined at the top.

Add the rest of the typography styles in now:

style <Text_H2> {
    TextColor = white;
    TextFontSize = 24px;
    TextFontAsset = @H2_Font;

    [attr:uppercase] {
        TextTransform = UpperCase;
    }
}

style <Text_H3> {
    TextTransform = UpperCase;
    TextFontAsset = @H1_Font;
    TextFontSize = 48px;
    TextColor = @PrimaryAccentColor;
}

Attributes are a way to extend your style to cover more scenarios. For example, when referencing the Text_H2 or Text_H3 style, you can include the uppercase attribute to turn all character’s upper case. Leave it off and they'll show up exactly how you entered them. You'll explore attributes in more depth shortly.

Root styles

The entry point for the QuestLog will be via an AppRoot template and will have a stylesheet. Create a new UI File, name it AppRoot, and check the Include Style File box.

Open AppRoot.style and add the following code:

style <AppRoot> {
   BackgroundImage = "quest_log_background";
   PaddingTop = 64px;
   PaddingBottom = 64px;
   PaddingLeft = 83px;
   PaddingRight = 150px;
}

<AppRoot> will automatically apply to the AppRoot template. The style properties set the background image to quest_log_background, which was defined in the module asset earlier. It also sets the padding so that the children are brought in a bit.

Add two more styles:

style header-row {
   PreferredWidth = 1s;
   PaddingLeft = 1s;
   PaddingRight = 1s;
   LayoutType = Horizontal;
   SpaceBetweenHorizontal = 18px;
   MarginBottom = 75px;
}

style gradient-line {
   MarginTop = 12px;
   BackgroundImage = linear-gradient("GeneralModule::quest_gradient");
   PreferredSize = 300px 4px;
}

header-row is a class style that will be set on the topmost div in AppRoot and is where all the title elements will sit.

• PreferredWidth is set to 1s, which makes the element stretch the entire width of the div.
• Setting PaddingLeft and PaddingRight to 1s tells the engine to center the content.
• LayoutType specifies the direction that children should appear.
• SpaceBetweenHorizontal adds an 18px gap between each element.

gradient-line introduces a new property, BackgroundImage, which in this case is set to a linear-gradient rather than an image. Linear-gradient takes one property, which is a string id that points to a gradient in GeneralModule.

info

quest_gradient was defined in the GeneralModule that was included in the starter project. References in other modules must be prefixed with the scope operator ::. See this article for more information.

There are two UI Measurement types being used, pixel (px) and stretch (s). Use pixel if you want to define the fixed pixel value that accounts for DPI scaling. Use stretch to tell Evolve to apply a portion of the ‘remaining space’ that the element has.

info

Another way to think about Stretch is that it is the equivalent of FlexGrow, which is used by the FlexBox CSS system and UI Toolkit. Read more about UIMeasurements here.