Advertisement
  1. Web Design
  2. CSS
Webdesign

How to Build a Responsive UI Component Using Element Queries

by
Difficulty:IntermediateLength:ShortLanguages:

In this tutorial we’ll continue our discussion about element queries, turning our hand to building a reusable responsive component.

To recap, element queries enable us to mould an element based on its container’s characteristics; the width, height and so on. But it’s worth pointing out that element queries are a long way off becoming a CSS standard, and we’ll probably have to wait for a couple of years before that happens.

So, for now, we will have to resort to a JavaScript library to emulate similar functionality, such as EQCSS.

EQCSS

EQCSS is a JavaScript library developed by Tommy Hodgins. Let’s look at some reasons for opting for this library.

To begin with, EQCSS gives us a similar syntax to CSS3 Media Queries standard with the @element declaration. This works within a stylesheet or embedded in a style element, therefore feeling very intuitive. In the following code, for example, we stack the menus in the navigation to cope with the navigation’s (not the viewport’s) shrinking space.

EQCSS offers more than just width or height-based queries. It also provides count-based queries, which give us the power to apply style rules based on the content; the number of characters, lines, and elements contained.

It supports varying CSS units including recent additions like vwvhvmin, and vmax

And for those who still require support for IE8, EQCSS provides a polyfill.

EQCSS is available via Bower, NPM, CDNJS, and directly from the repository in Github. Opt for whichever outlet fits your project deployment, and make sure to have it loaded in your page.

Now, let’s build something!

The HTML

We’re going to build a user profile UI component, and we start with the HTML markup.

Our component consists of an avatar image, the user name, where they live, a short biography, and a “Follow” button à la Twitter and Medium.

The CSS

First, we set the UI component container width and the display mode to flex. The flexbox syntax in the following code snippet is unprefixed for the sake of clarity, so it will only work in the latest browsers. If needed, you can always employ Autoprefixer to generate older syntax as well as the vendor prefixes to support legacy browsers.

Next, we set the width proportion between the avatar image and the profile summary containing the name, location, and short biography.

We also slightly adjust the font size of the user name and the location.

These are the primary style rules to demonstrate how element queries work. The stylistic rules such as background-colour, text colour, and box-shadow are entirely up to your taste. In my case, it appears as follows.

Deploying Element Queries

Using element queries with EQCSS is quite intuitive. As mentioned, the syntax closely resembles CSS media queries. First, as we showed earlier, we denote an element query with @element followed with one or more element selectors and the query condition such as the width, the height, scroll position, etc. of the element.

We can now deploy it into our UI component, for example, to resize the element’s width within the container and adjust the font size when the container width is reduced.

Furthermore, we want the UI component to be reusable, and more importantly presentable in any part of the website regardless of the available width. The sidebar, for instance, where its width is commonly less than 400px. In this case, since the width is much narrower we have to realign the entire layout of the component.

Wrapping Up

In this tutorial we have built a UI component to display a user profile. It is responsive, changing according to its container instead of to the viewport. You can look at the demo page and see that the layout shifts regardless of the viewport size. Neat!

This is just one example. There are a handful of other examples that others have pointed out where element queries make sense

Remember; the syntax in this tutorial is entirely based on EQCSS–whether the W3C Working Group will adopt it or create their own is undecided yet. Nonetheless, I’m looking forward to this idea being adopted and revolutionising the way we build websites once again.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.