Skip to content
Switch branches/tags

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time

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

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.
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.
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
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

Clone this repository.

git clone /path/to/your/project
git remote remove origin

Install dependencies.

npm 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.

Directory structure

Path Description
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 Components bundles.
gulp Gulp tasks source code.
lib Good place to insert external libraries.
node_modules Npm 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/style-modules Directory for components shared styles.
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) 2019, Rafał Mikołajun All rights reserved.

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



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





No packages published