Making truly reusable and themeable user interface components is a goal designers are always trying to achieve. Trying to keep things in a DRY manner has always been a challenge. Building modular and reusable user interface components was difficult, yet one of the goals of the Baasic project is to provide users with such components. Fortunately, there is a light at the end of the tunnel — the Web Components project.

Designing for the future with Web Components

Web Components are a set of web standards landing in most modern web browsers that allow us to build reusable, composable and encapsulated HTML components.

The primitives behind Web Components that provide us with the necessary functionalities are custom elements, HTML templates, HTML imports and Shadow DOM.

Designing and styling Web Components requires a bit of background knowledge. Since this is a design-related article, we won’t get into a lot of technical details on the inner workings of Web Components, but rather give a light overview on the topic with UI aspects on mind. For those who wan’t to know more there are plenty of resurces out there.

Let’s get started!

Custom Elements

Custom Elements allow web developers to define new types of HTML elements. Simplified — it is now possible to register our own custom HTML/DOM elements, extend existing DOM elements and more.

An example custom element:

<baasic-element>
    <p>Build up your backend using Baasic.</p>
</baasic-element>

HTML Templates

The HTML template tag provides a mechanism to define HTML markup fragments as prototypes.

Templates provide a way of creating chunks of markup that is unused at page load, but can be used later in the document.

An example of a simple HTML template:

<template id="myWidget">
    <h1 class="title"></h1>
    <div class="content"></div>
</template>

HTML Imports

HTML Imports, part of the Web Components cast, is a way to include HTML documents in other HTML documents.

Our HTML partials can now be imported using:

<link rel="import" href="/path/to/my-component.html">

As simple as that.

Shadow DOM

Shadow DOM provides methods for encapsulating the DOM.

Encapsulation gives us the possibility to create style independant, resuable and modular parts of user interface. The context of the page does not affect our elements (if we don’t explicitly specify it). We don’t have to use iframes anymore or rewrite our CSS components every time we add it to a project.

To get a visual grasp on the workings of Shadow DOM see the Shadow DOM Visualizer tool.

Polymer Project

Polymer is a library built on top of Web Components. It adds extra flavouring and a solid base for building your own custom web components.

Baasic meets Polymer demo

Polymer demo site Polymer demo site

The Baasic meets Polymer demo is a demonstration of how we reused the ready-made Polymer components and combined them with our own set of Baasic components.

Comming up next — Styling web components

Stay tuned for part two of this article where we will talk more on our workflow when styling web components, using /deep/, ::shadow and other methods of Shadow DOM CSS trickery.

Tell us what you think

Your comments and suggestions are highly appreciated and will shape the way we develop Baasic components.

Feel free to leave a comment

comments powered by Disqus