How to develop Wireframes and Web Applications with Polymer.js
Wireframing is an important aspect in any front-end design process. It primarily allows a developer to define and organize information, in a way that depicts the hierarchy of the overall design process.
Wireframing makes it easy for a developer to embark on the planning process of an application. It therefore enables him/her to layout designs based on how a user is expected to navigate through the application.
What is Polymer.js?
Polymer is a JavaScript library that allows developers to create custom reusable HTML elements with markdown, which improves the performance of an application and makes it maintainable.
In this article, we will go through how you can build an application using a Polymer.js
starter kit and also add a wireframe to the application at the same time. Currently, Polymer.js
has 19 wired elements and we will utilize some of these elements in this project.
Set up application
- To start with, check the site below to ensure that your node.js version supports Polymer tools
run node --version
to check your node version
- run
npm install npm@latest -g
to update npm - run
npm install -g bower
to install the latest version of Bower. Bower is a package manager that manages components that contain HTML, CSS, JavaScript, fonts and image files. - run
npm install -g polymer-cli
to install polymer-cli which is the command line interface for polymer projects. - Open your terminal, run the command
mkdir my-app
to create a new directory to start from. - Run
cd my-app
to access the directory - Run
polymer init
to initialize your project with an existing starter-kit template. - Select the
polymer-2-starter-kit
and press the enter.
Create a new page
At this point, you already have the starter-kit app which is a placeholder that contains three template pages. You can modify these pages to implement whatever design pattern you desire.
Next, we are going to implement our wireframe.
- Create a new file called
src/my-wire-frame.html
and open it in an editor. - Your directory structure should appear like the structure summary below
Add element to your app
For your application to utilize your wire-frame element, you need to add the element to the app. Follow the subsequent steps to add the required to my-wire-frame.html.
- Each element should import the polymer-element, add:
<link
rel="import"
href="../bower_components/polymer/polymer-element.html"
/>
- Add “shadow into light” font style by adding this link path:
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Shadows+Into+Light"
/>
- Add
web-components-lite.js
to support HTML imports, custom elements and templates. The HTML imports allow you to include and reuse HTML documents via other HTML documents and the custom elements allow you to define your own custom tag. Add this script path:
<script src="../webcomponentsjs/webcomponents-lite.js></script>
- Add all necessary import paths needed by the wireframe components
- Add a
<dom-module>
element with anid
attribute corresponding to the element's name in themy-wire-frame.html file:
- Add
<template></template>
- Inside the template, add a wired card which is a form type:
<wired-card class="form"> </wired-card>
- Let us add the wired-menu-bar which contains our top-bar by adding this snippet in the wired card:
- Add this snippet that creates an ES6 class and associates it with the wired frame element in the
dom-module
right before the closing </dom-module>
.
- Add
<my-wireframe name="wire-frame"></my-wire-frame>
to the iron-pages element in themy-app.html
. This is a content switcher that is used to cycle through the list of children pages in order to select the page to show on the base page. - Open the
polymer.json
file in your text editor and add src/my-wire-frame.html
in the fragments section. - Run your app with
polymer serve --open
You should get an output like this:
- Now, let us add the wired input element in the wired card.
- Let us add the wired radio element.
- Let us add the text area element.
- Let us add the wired combo element.
- Let us add the wired button element.
- Let us add a wired toggle element.
- Run your app again and you should have a user interface like this:
- If you observe well, you will discover that all the elements are clustered. We can do some inline styling to make it appear well. You can add these styles right after the opening </template> tag:
- Your
my-wire-frame.html
file should contain the following code in all:
- Finally, re-run your app or refresh your page. Your wireframe should appear like this:
- The beauty behind this technology is that the wireframe appears like a hand drawn sketch and it is also responsive i.e you can navigate through it as if you were on your originally designed web page.
Next, look forward to a tutorial on building web applications with Polymer.js and Bootstrap.
I hope you found this tutorial useful. Feel free to drop any feedback in the comment section. You will be very much appreciated. Happy coding!