Menu

22 May 2014

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 

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)

No comments: