Style Guide

This section describes a set of tools and recommendations that will help you on styling your application. The goal of this guidelines include improving UI consistency and quality, making the design and development process more consistent and efficient.

Containers

OntimizeWeb defines a set of containers components that allow you to distribute the elements on the screen as you need. Use the attribute layout-align to distribute the elements inside the container and layout-gap to define the spacing between them.

<o-column title="Column" layout-gap="14px">
<o-row title="Row" layout-align="start center" layout-gap="14px">
    <span>First element</span>
    <span>Second element</span>
</o-row>
<span>Last element</span>
</o-column>

Spacing

The goal of whitespace is to maximize readability and understanding of content/data. You can set margin or padding for an element without creating an extra CSS class, just using the directive or CSS class that most fits your requirements. OntimizeWeb uses a 8px system to define its whitespaces.

• CSS classes: .vertical-margin-4, .vertical-margin-4 where vertical can be replaced by horizontal, margin can be replaced by padding and 4 can be replaced by 8, 12, 16, 20 or 24.
• Directives:

    <div directive-goes-here class="class-goes-here">Sample content</div>