Skip to main content

Setting up a Sandbox for Google Polymer

    In the last article, we got introduced to Google Polymer which implements Google's Material Design for the web. Google Polymer is based on the concept of Web Components and provides users with 2 types of components that can be readily utilized - the Polymer Core Elements and the Paper Elements.

    Polymer's core elements are a set of visual and non-visual utility elements.They include elements for working with the layout, user input, selection and scaffolding apps.


    Polymer's paper elements collection implements material design for the web. They are a set of highly visual, highly interactive elements that includes things like controls, layout, hero transitions and scrolling effects.


    We will be taking a look at the implementation of the Paper Elements in the next few posts, but before that we need to set up a sandbox to try out Google Polymer on our local systems. Follow the steps below and you can successfully set up your Google Polymer sandbox.
  1. Download the zip file of Polymer Paper Elements from the link - http://www.polymer-project.org/docs/start/getting-the-code.html
  2. When you download a component or components (we are downloading the entire components set for development) as a zip file, you get all of the dependencies bundled into a single archive. You need not install any additional tools.
  3. Extract the zip and add the folder to your local web servers home/htdocs folder.
  4. That's all that you have to do get Google Polymer components and set it up on your local system.
    You need to set the paths of the platform js file, the Roboto font and paper-elements html in the head section. Refer to the code below to get an idea.


    Do not worry about the code above as of now. We will take a look at it in detail from the next post onward, where we take a look at each Paper Element in detail. Stay tuned for the fun!

Labels:

Comments

Post a Comment

Please leave your comments here...

Recommended for You

ES6 101 - Class

Spatial Unlimited changes to The UI Dev After being hosted on blogger 😣 for the last 6 years 📆, this page has finally been moved to Github.io This means a few things for you, dear reader! You will be redirected to the new page shortly! ⏩ ⏩ ⏩ Once crapy HTML is now better looking Markdown ! 😍 😍 The entire blog is a Github repo ! 😍 😍 Spatial Unlimited is now The UI Dev 😍 😍
Post a Comment
Read more

CSS - Counter-increment and counter-reset

Today we will take a look at a couple of CSS properties that are usually used together but not very frequently used. We will be talking about the counter-increment and counter-reset properties. As the name suggests counter-increment and counter-reset definitely have something to do with counters. Let's take a look at the example below which will clearly illustrate the usage of these 2 properties. The implementation is very clear and straight-forward. The only question that remains now, can these CSS properties replace the ordered list (ol-li) HTML code? Do let me know your comments and feedback. Would you use these CSS properties against the standard ol-li structure?
Post a Comment
Read more

Side-scrolling web pages issue with Jquery Mobile - Issue #5748

    While developing a Jquery mobile based application, I came across a issue that is observed only on the iOS 6 devices and Android 4.2.2 devices.     What is the issue?         Web pages are side scrolling on iOS6 and Android 4.2.2 devices.     How did I debug the issue?         This bug was in our applications bug tracker for a long time and since I am the lone front-end developer the project that I am working on, my manger was pushing me to close this bug quickly. I had used the perfect mobile meta tag and still the web pages were side-scrolling. None of my divs had width that was going beyond the device widths and still there was this issue. That day, I decided to break down my HTML to pieces, and tested each piece on the dreadful iOS 6 device. I came down to a textbox that had some placeholder text in it and there it was, the issue was glaring me in my face. ...
Post a Comment
Read more

Removing overlays

    "Overlays"....!!! What is this now! Never heard or used it before? You might immediately say "NO"...But, actually all of you have already seen what an overlay is and you have also used it! Now you would say "When!?!?" Well, all of the markers, polylines, polygons that you have created are overlays. Overlays are objects on the map that are tied to latitude/ longitude coordinates, so they move when you drag or zoom the map. Overlays reflect objects that you add to the map to designate points, lines, areas or collection of objects.     Till now we have seen how to create an overlay. In today's example we will see how to remove an overlay. In this example we will create markers on click. But the difference will be that when you create a new marker, the earlier one will disappear from the map. So at any given time there would only be one single marker on the map! Note that removing the marker does not delete the overlay; it simply removes the overlay...
Post a Comment
Read more

KML Layer Example

         Until now, we have covered various examples involving markers, polylines, polygons, i.e. creating overlays. We have also seen other examples to remove overlays! We will now move on to some other concepts. Today we will have a look at what KML is and how to create a KML layer!          Let us first understand what KML is and why is it necessary. KML stands for Keyhole Markup Language which is an XML schema for expressing geographic annotation and visualisation within 2D maps and 3D Earth browsers. The KML file specifies a set of features (place marks, images, polygons, 3D models, textual descriptions, etc.) for display in Google Earth, Maps and Mobile, or any other 3D Earth browser (geobrowser) implementing the KML encoding. Each place always has a latitude and a longitude. Other data can make the view more specific, such as tilt, heading, altitude, which together define a "camera view". ...
Post a Comment
Read more