Polymer Boilerplate provides everything, you need, to start a new website project in a minute.
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.


Polymer Boilerplate

Polymer Boilerplate provides everything, you need, to start a new website project in a minute.

Table of contents:


  • Web Components ready. You can create custom reusable HTML elements with Polymer Library.
  • Ready for writing code in ES6+ and ECMAScript modules.
  • Provides tools to build scripts, styles and Web Components.
  • Tools to tests provided by Polymer.
  • You can runs a local web server.

What's included by default

fragments/app.html as build/bundled/fragments/app.html it's size 167 kB (45.9 gzipped).

Component Description
Polymer Library Unlock the Power of Web Components.
app-drawer app-drawer is a navigation drawer that can slide in from the left or right.
paper-progress A Material Design progress.
paper-icon-button A Material Design icon button.

bundle/core.min.js it's size 50.6 kB (13.9 gzipped).

Library Description
Babel helpers Collection of helper functions used by Babel transforms.
WC es5-adapter According to the spec, Custom Elements must be ES6 classes.
WCReady Simple function to listen to the WebComponentsReady event.
Model Persistence Library intended for data persistence using HTTP or Storage API.
Element View It's view layer to HTMLElement, that responsible for Event Handling.
ObjectModel Object models validate nested object properties against a definition tree. You may consider them as definitions of classes with advanced validation options.
axios Promise based HTTP client for the browser and node.js

style/index.scss as bundle/style.css it's size 23 kB (4.7 gzipped).

Feature Description
Material Design Color The colour palette, based on Google's Material Design, for use in your project.
Normalize and reset styles Normalized stylesheets, which you can adjust with Sass variables and mixins.
Bootstrap 4 Grid Use our powerful mobile-first flexbox grid to build layouts of all shapes and sizes thanks to a twelve column system, five default responsive tiers, Sass variables and mixins, and dozens of predefined classes.

How to create a new project

Install Polymer CLI.

npm install -g bower
npm install -g polymer-cli

Install gulp.

npm install -g gulp-cli

Clone this repository.

git clone https://github.com/mikoweb/polymer-boilerplate.git /path/to/your/project
git remote remove origin

Install dependencies.

npm install
bower install

How to build my project

Inside gulpfile.js placed all necessary tasks.

To build full project run command:

gulp dist

Below is a list with all available tasks.

gulp tasks

Run and tests

All information is available in the Polymer Docs.



Below is a three most used commands.

polymer serve
polymer test
polymer test -p

Directory structure

Path Description
bower_components Packages used by Polymer and Web Components.
build Folder used by Polymer Bundler, here you will find built file for HTML import. Always use it on production.
bundle Bundled scripts and stylesheets.
fragments Put files that will be importing by link[rel=import].
gulp Gulp tasks source code.
lib Good place to insert external libraries.
node_modules Npm or Yarn packages.
pages Here put HTML files.
src/elements Here put your Web Components, reserved for Custom Elements.
src/blocks Similar to src/elements but it's for large/layout/nested elements like <app-layout>.
src/app/index.js Main file of your JavaScript application.
src/app Put scripts and use ECMAScript imports.
static Reserved for static files like images, fonts.
style Reserved for Sass/CSS source code.
test Reserved for test source code.
globals.default.json Contains a list of global variables included by bundle/core.min.js. Required by rollup.js bundler.


Copyright (c) 2017, Rafał Mikołajun All rights reserved.

This project is under the BSD 3-clause license. See the complete license in the file: