1. Creating your styles library

Build style rules

In the Component builder, style rules are the secondary building assets you build in the Styles builder. Style rules extend design primitives so that you can apply them to elements. Rules such as Typographies, Decorations, Fills, and Spacing use the basics (fonts and colors) that you previously added in the Styles library basics.

You can also add custom CSS styles to rules. Adding custom CSS to a rule will propagate that styling feature to the elements and themes built using the customized rule.

You can organize all style rules in Collections, including a preexisting Default collection.

Add typography rules

Typographies are extensions of fonts with defined sizing for each font type. 

To add a new typography:

  1. In the Styles builder, in the left pane, click Typographies, then click Create.

  2. Enter a name for the typography (for example, Medium headline) and click the Collection the typography belongs to.

  3. On the Font type tab, click one of the fonts. Only fonts Basicsare displayed. If you have not yet defined at least one font in Basics yet, a default font is available to build a typography.

  4. On the Settings tab, you can configure values for font size, line height, letter spacing, paragraph spacing, icon size, and case style. You can set the values independently for different breakpoints.

  5. Click Save to add the typography to the Styles library.

Add decoration rules

To add visual accents to blocks, you can define borders and drop shadows with Decorations styles. 

To add a new decoration:

  1. In the Styles builder, in the left pane, click Decorations, then click Create. 

  2. Enter a name for the decoration and click the Collection the decoration belongs to.

  3. On the Corner radius tab, specify whether you want to allow rounded corners on element and block shapes.

  4. On the Drop shadow tab, define whether you want to add shadows to element and block shapes.

  5. On the Border tab, add border shadows to element and block shapes.

  6. Click Save to add the decoration to the Styles library.

Add fill rules

After you have defined some color primitives, you can create fill rules to add background colors to cards, buttons, or sections.

To add a new fill:

  1. In the Styles builder, in the left pane, click Fills, then click Create.  

  2. Enter a name for the fill and click the Collection the fill belongs to.

  3. On the Color tab, you can click previously selected colors from a drop-down menu. You can also choose to create color gradients for the fill with various options for the angle of the gradient and the opacity of each color.

  4. On the Effects tab, define a blur intensity and opacity for the fill.

  5. Click Save to add the fill to the Styles library.

Add spacing rules

Spacing represents presets of different grid arrangements and utilizes CSS Flexible Box Layout or Flexbox. 

To start defining spacing:

  1. In the Styles builder, in the left pane, click Spacings, then click Create.

  2. Enter a name for the spacing and click the Collection the spacing belongs to.

  3. On the Spacing tab, you can define padding values in pixels, percentages, em, and rem. You can select one of the following options:

    • Sync - makes all paddings and gaps the same value.

    • Vertical/Horizontal - provides symmetry by combining top and bottom or horizontal spacing padding values into one value.

    • All custom - allows you to customize the most padding and gap values.

    It is best practice to set values for all three configurations so that you can more easily choose the one you want for your component in the Component builder.

  4. Click Save to add the spacing rule to the Styles library.

If you have suggestions for improving this article, let us know!