Responsive x-tags

Custom elements are small UI components that you can re-use all over your application, while at the same time keeping you markup tidy and semantic. However, in practice, you often cannot fit the same element everywhere. Imagine the autocomplete built in the previous blog post. If you place the autocomplete in a small sidebar, you need the results appearing in a pop-over list. However, if you want to build a real search page, you want the results always visible in a clear, big area. The solution to this is a new concept, named Responsive x-tags.

Do you know enough about custom elements? If not, you can start with this tutorial, before reading this post.

The problem is simple to explain. You want the element to be different based on the size it has to render itself. This is not something that can be handled by CSS media queries, since they only target screen size, and not container size. To overcome this, I did an experiment by building a plugin on top of Mozilla’s x-tag librady. Lets see how this works.

To extend the base functionality of xtag.register, there is a new method, called xtag.registerResponsive. This method has the same arguments as the original register method, and behind the scenes it calls that one. For the purposes of this demo, we will create a x-nature element, so the declaration will be something like this:

xtag.registerResponsive('x-nature', {
    lifecycle: {},
    accessors: {},
    events: {},
    methods: {}

So, this is exactly the same as the x-tag.register. However, we now have another object we can pass along in the options: queries. This is a key-value type of object, with the key being a pseudo-expression for defining the breakpoints (much like a media query) and value is a function that will automatically be invoked when the width of the element gets the proper size. Sounds more complicated than it really is, so lets see the example

xtag.registerResponsive('x-nature', {
    lifecycle: {},
    queries: {
        'max(200)' : function () {
            // "this" is the element itself
        'min(201) and max(400)' : function () {
        'min(401)' : function () {
    accessors: {},
    events: {},
    methods: {}

The numbers correspond to the size(width) the element has available. So, in the first case, the container is up to 200px, in the second between 201px and 400px and in the third, over 400px. Of course in the function you can do as much as you want. From simply changing a class in the element, to rendering a totally different template. So, you have the power to actually do whatever you need for your application.

To use the plugin, you just need to include it, after the x-tag library:

<script src="x-tag/x-tag-components.js"></script>
<script src="x-tag/x-tag-responsive.js"></script>

And that’s it! You can find a working demo here. Try resizing the window and notice how only one of the 2 x-nature changes its template (the one that is in the fluid column of course). You can also try changing the columns width programatically and see the same result. You can also get the source code of the example (along with the plugin code) from the Github repo.


Everything of course is not as perfect as it might seem. First of all, the x-tag plugin is more of a proof-of-concept, than an actual plugin, so I wouldn’t recommend using it in a real project (unless re-written).

But the real problem is detecting size changes. Ideally we would need a resize event on the element, much like the resize event on window. However, such a thing doesn’t exist. Part of that functionality can be covered using the transitionend event, much like I describe in this article. But even that isn’t enough (and also doesn’t work in older browsers).

For this experiment, to emulate a resize event, I just used an interval to check if the size has changed. Of course this is not the best way to do it, but the main thing about this article is to demonstrate the concept of responsive elements.

And the third problem was actually extending the x-tag library. I think it wasn’t built to be really extendable, so it doesn’t have clear extension points. Or maybe it has and I haven’t found them yet. In any case, this is another thing you need to be careful about, if you try to use the library.

3 Responses to Responsive x-tags
  1. Reply

    Ces рoss sont véritablement captivants

    Аlso visit my web pagе:

  2. vidéo de défonce Reply

    Ƭout ces post sont véritɑblement intéressants

    Feel frede to surf to my site; vidéo de défonce

  3. sell notes for cash Reply

    Aw, this was an incredibly nice post. Finding the time and actual
    effort to produce a superb article… but
    what can I say… I put things off a whole lot and never
    manage to get nearly anything done.

Leave a Reply

Your email address will not be published. Please enter your name, email and a comment.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>