An example of working with the Boundless Styles editor

Text Nodes allow a Creator to apply one-off customizations to text, but it is sometimes better to change the overall appearance of an app.

In this example, there are two Sections each containing similarly structured content. Rather than editing each Text Node individually, the Styles editor may be used to change both sections simultaneously.

Clicking the Styles link the upper right corner of the Page top-bar will show the current Page in the Styles editor view.

The Styles editor contains sections for changing Text, Forms, Colors, Page Layout, and performing advanced styling.

For this example, we’re going to

  • adjust the font and size for Heading 2
  • adjust the size of Heading 3
  • select two new colors for the Color Palette

Clicking Manage Fonts in the Advanced section will allow us to load a font from a font service provider, such as Google Fonts or Typekit.

Once the custom font has been loaded, we can use it to change the font for Heading 2.

Next we’ll adjust the color palette. The first section is using a Primary Button style and the second section is using a Secondary Button style. When we change the color palette, the color of these buttons will also change.

In addition to using the Styles editor on existing pages, a Styleguide can be viewed by selecting it from the Page dropdown in the upper left corner.

The Styleguide provides an overview of the various styles used throughout a Boundless App. The Styleguide is a good way to health-check the overall style of an App.

Viewing the Styleguide shows that Heading 4 is in need of adjustment in order to maintain a consistent visual hierarchy.

Clicking “Done” in the upper right corner will apply the style changes to your Boundless App. Clicking “Cancel” will reset any changes.

built with boundless