Styling ORGENIC UI Components

ORGENIC Team — Mon, 27 May 2019 12:04:01 +0000

Styling ORGENIC UI Components

ORGENIC UI is a growing set of web components with focus on UX and design. Though ORGENIC UI comes with an integrated theming system it is often useful to modify the current theme quick and effective for individual purposes instead of creating a complete theme from scratch. This tutorial shows how to change the given styles of the ORGENIC UI tab component.

Insert the Component

Just add this code to use a tab control within an ORGENIC UI project:

<og-tab-container>
    <og-tab label="Tab Title">
        <!--CONTENT OF THE TAB -->
    </og-tab>
</og-tab-container>

Listing 1: adding the tab control to the template

Style the Component

Since all ORGENIC UI components are native WebComponents with ShadowDOM, it is not possible to overwrite them with basic CSS features. For example, it is impossible to set the background-color of the current selected tab like this:

.og-tabs__list-item--selected {
    background: red;
}

Listing 2: This won’t work

Custom properties to the rescue

Themability is one of the underlying features of ORGENIC UI. To provide the capability of modifying styles within the ShadowDOM by an external stylesheet, ORGENIC UI uses CSS Custom Properties aka CSS variables. Therefor every component has its own set of CSS variables the user can use to create an individual design.

All UI components and their Custom Properties are documented at http://docs.orgenic.org

Modify the Design

This example will show how to apply a new background color for the tabs. The documentation provides the CSS variables needed:

--og-tabs__tab-Background
--og-tabs__tab-Background--hover
--og-tabs__tab-Background--active

Just create a new CSS file (custom-theme.css) where the new values are applied to the CSS variables and include it as last stylesheet into the HTML:

og-tab-container {
    --og-tabs__tab-Background:                 #39b6e4;
    --og-tabs__tab-Background--active:         #1ca2d2;
    --og-tabs__tab-Background--hover:          #1ca2d2;
    color:                                     #FFFFFF;              
}

og-tab {
    color:      #333333;
}

Listing 3: Overwriting the default theme

The text color of the tabs title and the content are set to inherit. That means - despite of the ShadowDOM - it is enough to set the parents CSS property color to change it without any special Custom Property.

TL;DR

With the power of pre-defined CSS variables, it is very easy to modify the design of ORGENIC UI components without creating a complete theme. The encapsulation that comes with the ShadowDOM makes the components immune against side effects from foreign CSS, but also open to its own specific Custom Properties.

Forem: ORGENIC Team

Styling ORGENIC UI Components

Styling ORGENIC UI Components

Insert the Component

Style the Component

Custom properties to the rescue

Modify the Design

TL;DR

Please visit us at: