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.
Top comments (0)