Tutorial by Examples

So you want to add material design to your business or career portfolio.huh? You Just can not resist using a Modal? which pops upon a click on those crisp cards you intend to design, for each of your projects/products! Let us say, for each project, you have done, or for each product you have design...

Note I assume you know Webcomponent Specifications Polymer from Google What if, we could just have one custom element, say <tool-bar></tool-bar> and it magically did everything that messy Modal markup could? Tempting eh! How do you specify which Modal belongs to which project...

So far, we defined how easy it is to write a custom element that hides the messy html behind it and gives the user, an easy to write and brief markup. Time to code it! Our custom element, to display the bar below the hero image should Accept a Link to be shared Accept a Link to the Repo to be ...

<link rel="import" href="../bower_components/iron-icon/iron-icon.html"> <link rel="import" href="../bower_components/iron-icons/iron-icons.html"> <link rel="import" href="../bower_components/iron-icons/social-icons.html"&gt...

On whichever page you want to display your product / project portfolio, invoke the custom element like so: <article id="project-neighbourhood"> <div class="row"> <div class="col-12 hero"> <img src="path-to-hero-image...