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!