X-Tag & Custom HTML markup elements

Recently I got interested in X-Tag project.

X-Tag project is from Mozilla.

It provide a cool way to create your own html tags

like

<uni-button></uni-button>

<uni-progress-bar></uni-progress-bar>

The way of interacting with these HTML element is same as Native html element,

Like you can do use jQuery 

As shown in this example - http://jsfiddle.net/nsisodiya/266tt/

in this example, I have used x-flipbox element from brick library.

Defining custom element provide modular design.

There is huge list of custom html element can be found on 

http://customelements.io/

Example like - https://github.com/luiztiago/facebook-image-element

create very simple way to add facebook image of any user using following html markup

<facebook-image object="luiztiago"></facebook-image>

<facebook-image object="narendra.sisodiya"></facebook-image>

etc

will add facebook image on your site.

We have a chrome plugin which detect that If a website is using Web Components (Custom elements) or not 

There are 2 main ways to write custom elements

1) using XTag

2) using Polymer

I am first exploring X-tags

You can learn how to create a custom element here http://x-tags.org/docs

I will create some custom elements and will blog on whole process.

--

Narendra Sisodiya
UI Architect @ Unicommerce

Delhi - Bharat (India)