chrisesler / polymer-starter-kit

Polymer Starter Kit is a boilerplate for web development.

Polymer Starter Kit

Polymer Starter Kit is a boilerplate for web development using Web Components and modern tools.

Keeping up to date with Web Starter Kit, HTML5 Boilerplate, Polymer generator and Gulp generator.

Following The 10 Commandments of Modern Web Application

✨ DEMO ✨

Features

• Clean index.html
• Gulp tasks per file
• Using Polymer Demo element with Polymer Theme based on BEM Methodology
• Sass CSS Preprocessor with Ruby
• PSK need CSS Preprocessor for Variables, Loops, Mixins and other features
• LibSass is a C/C++ port of the Sass engine
  • Replace Ruby Sass with LibSass issue
• SCSS have CSS like syntax
• Check out the styles dir
• Ready to use any template engine
• How to add any template engine for any developers
• Autoprefixer for CSS
• Asset revisioning for CSS, HTML and JS by appending content hash to their filenames
• Compress text files with Pako for avoiding the overhead of on-the-fly compression on server
• PageSpeed Insights for performance tuning
• Built-in preview server with BrowserSync
• Automagically wire-up dependencies installed with Bower
• Vulcanize with Content Security Policy
• web-component-tester support
• Quick deploy to CDN Hosting
• GitHub Pages - more info

Installation

Tools on Ubuntu

# Add Ruby repository
sudo add-apt-repository -y ppa:brightbox/ruby-ng
# Script to install NodeSource repository
curl -sL https://deb.nodesource.com/setup | sudo bash -
# Install Git, Node.js and Ruby
sudo apt-get install -y git nodejs ruby2.2
# Install Bower, Gulp and NPM
sudo npm install -g bower gulp npm
# Install Sass
sudo gem install sass

• Atom is great editor for web development, you can use Atom on Ubuntu script.
• For other OS, you can use Ubuntu VM Image or Google Search 😉

Usage

Fork this repository

Syncing a fork of a repository to keep it up-to-date with the upstream repository.

or

Clone this repository to separate branch psk

git clone https://github.com/StartPolymer/polymer-starter-kit.git <my-repo-name>
cd <my-repo-name>
git branch -m psk
git checkout -b master
git remote rename origin psk
git remote add origin https://github.com/<user>/<my-repo-name>.git
git push -u origin master

How to use Git

Install dependencies

bower install && npm install

Check out the variables

• Gulp variables are in the file gulp/psk-config.js

Serve to local and external URL

http://localhost:9000 and http://<Your IP>:9000

gulp serve

Build and serve the output from the dist build

gulp serve:dist

Build the app

gulp

Build a polymer element

Check out the file structure of Polymer Demo element

gulp build:el

Explain psk- prefix

psk- prefix in file names is for git merging with psk branch without conflicts

Deploy 🎉

Deploy to GitHub Pages

First you need to be sure you have a gh-pages branch. If you don't have one, you can do the following:

git checkout --orphan gh-pages
git rm -rf .
touch README.md
git add README.md
git commit -m "Init gh-pages"
git push --set-upstream origin gh-pages
git checkout master

gulp deploy:gh

Tools

PageSpeed Insights

gulp pagespeed

Extending

Use a recipes for integrating other popular technologies like CoffeeScript. Or this a recipes.

web-component-tester

bower install web-component-tester --save-dev
npm install web-component-tester --save-dev

Contributing 👍

1. Fork it
2. Create your feature branch (git checkout -b my-new-feature)
3. Make your changes
4. Run the tests, adding new ones for your own code if necessary
5. Commit your changes (git commit -am 'Added some feature')
6. Push to the branch (git push origin my-new-feature)
7. Create new Pull Request

MIT License

Copyright (c) 2015 Start Polymer (http://startpolymer.org)