Polymer Boilerplate provides everything, you need, to start a new website project in a minute.
Table of contents:
- What's included by default
- How to create a new project
- How to build my project
- Run and tests
- Directory structure
- Custom libraries builders
- 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
build/bundled/fragments/app.html it's size
167 kB (45.9 gzipped).
|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).
|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
|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|
bundle/style.css it's size
23 kB (4.7 gzipped).
|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
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
npm install bower install
How to build my project
gulpfile.js placed all necessary tasks.
To build full project run command:
Below is a list with all available 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
|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
|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/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
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: