How You Can Use Responsive Web Components Today

A few years ago I started to hear a lot about Web Components. I got pretty excited and then totally forgot about them as the noise settled down. It turns out there has been some good movement and support is starting to increase. Responsive Web Components, in particular, are set to really simplify how we approach responsive design. As promising as this sounds, there are four questions many developers out there will want to know before they start using them today:

Will they...

• Fit into the current state of the web?
• Work cross browser?
• Adapt to fit the space they are dropped into?
• Promote modular code?

In this article, we will explore the answers to each of those questions!

What Are Web Components?

Essentially, they are a W3 specification that enables you to build your own HTML elements. If you literally don’t know anything about them it may be worth having a quick read up about them as some of the terms I use in the article require a basic understanding.

Why Would I Want To Use Them?

A good example of when you might want to use Web Components would be when you are building UI that doesn’t exist natively in the browser — elements such as color pickers, carousels, accordions or typeaheads. Alternatively, you are likely to have some components that you use all the time across various sites that you are sick of rebuilding every time. These are things like social buttons, subscribe forms or notifications. With Web Components you can bundle up your markup, styles and scripts into encapsulated modules using HTML tags like <color-picker></color-picker> to reference them. This will seem familiar if you have used Angular directives or React components but the benefit here is that it is native to the browser and framework agnostic.

Web Components enable you to build pieces of UI once and use them everywhere. This is ideal for projects like a living styleguide where you want to build a library with a single source of truth for each of your components. This approach means repeating less code and having portable components that you or your team can simply drop references to into your interface.

Another big advantage of using Web Components is the ability to package these components up and share them with other developers or website owners. Essentially, the consumer can put an import statement in their web page such as:

[code language="html"]
<link rel="import"
href="http://ift.tt/256K6FD;
[/code]

Then use the custom element tag you've defined in that component. With this imported into their webpage, they can have as many instances of the custom component on their page as they wish. In the subscribe form example, we could use the tag <subscribe-form></subscribe-form> in multiple locations on the page. Of course, if you are doing this, you need to ensure that the beautiful component you have crafted is extremely flexible and will work across a range of devices and screen sizes.

Turning These Bad Boys Into Responsive Web Components

I feel the best way to demonstrate is by example, so I’ll continue with the subscribe form which is a common piece of UI that doesn’t change much between different sites and implementations.

Here’s one I made earlier:

Inside my Web Component template I have some basic markup for the form.

[code language="html"]
<ul class="form">
<li class="form__item">
<label for="name">Name:</label>
<input id="name" name="name" type="text">
</li>
<li class="form__item">
<label for="name">Email:</label>
<input id="name" name="name" type="text">
</li>
</ul>
[/code]

My markup and CSS are tucked away inside my component making use of the Shadow DOM part of the specification. This gives me encapsulation, allowing me to use label and input selectors freely in my code without worry of other styles bleeding in or mine bleeding out into the parent site.

For clarity and brevity, I’m not going to write out the styles other than ones used for layout. I’ve used a combination of float: left and display: table to achieve this layout to prevent breaking in any widths.

[code language="css"]
.form__item {
display: table;
float: left;
width: 50%;
}

label {
display: table-cell;
width: auto;
}

input {
display: table-cell;
width: 100%;
}
[/code]

I'll be using HTML imports to pull it into the SitePoint site as a demonstration:

Now we’re all set up, let’s look at some responsive techniques.

Continue reading %How You Can Use Responsive Web Components Today%

by David Berner via SitePoint