Skip to content
A material theme for Jekyll built with Polymer
HTML JavaScript CSS Ruby
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
app
tasks
.bowerrc
.gitignore
.jshintignore
Gemfile
Gemfile.lock
README.md
_config.yml
bower.json
gulpfile.js
license.md
package.json
robots.txt

README.md

DEMO

A Jekyll theme built with Google's Polymer library and following the material design specifications. (Currently, this uses Polymer 1.x, but I have plans to update to 2.x.)

There are a few custom web components included designed to match Material design.

I created this theme because I couldn't figure out how to set up a Jekyll project to play nicely with Polymer, and because I didn't find any Jekyll blog themes available that used Polymer or followed Google's material design specifications.

Features

  • Full-text search with simple-jekyll-search
  • Paginated home page
  • Support for featured post images (appear on cards in previews)
  • Threaded comments with Disqus
  • Google Analytics integration
  • One-command deployment to Github Pages
  • Tagged posts with archive by tag
  • Authorship with Gravatar icons

Installation instructions

(Instructions are based off of those for the Polymer Starter Kit.)

  • Clone this repository or download it as a .zip file and unzip.
  • Install jekyll (and any other Ruby gems) with bundle install. (Prerequisite: must have Ruby installed; in Ubuntu/Debian, use sudo apt-get install ruby-dev. You may also have to install bundler with gem install bundler.)
  • From the project root folder, run npm install -g gulp bower && npm install && bower install. (See the old Polymer Starter Kit installation instructions for more details or troubleshooting.)

Structure

  • app/: All Jekyll content is here. (This is where all the editing happens)
    • bower_components: Content installed via bower ends up here
    • elements/: Custom web components using Polymer
    • images/: User images
    • media/: Other user content (PDFs, videos, etc.) for final product
    • scripts/: Javascript files
    • styles/: Custom CSS
    • _data/authors.yml: List of authors for posts and pages
  • dist/: Built output from Gulp. (Use to publish static content)
  • node_modules: Content installed via npm goes here

Deployment

Serve/watch

gulp serve: Starts a jekyll serve process on the default port (4000 or whatever is specified in _config.yml).

gulp serve --port 6666: Start serving on port 6666

gulp serve:dist: Build as below, and serve the result from the dist/ directory. (Useful for testing changes to the gulpfile. Currently does not work with a Jekyll baseurl configured.)

Build and vulcanize

gulp: Builds the files with jekyll, vulcanizes, minimizes, and puts the result in the dist/ directory. (This can be slow.)

Deploy

gulp deploy-gh-pages: Deploy the current build to the gh-pages branch of your repository.

gulp build-deploy-gh-pages: Rebuild and then deploy. (Equivalent to gulp && gulp deploy-gh-pages)

Future Improvements:

  • Improve gulp build
    • Minimize JS, CSS, HTML
  • Search
    • Escape toggles search show
    • arrow keys/tab moves focus on search results
    • better animation for search bar leaving/entering
  • Navigation drawer
    • Change hover effect on drawer items (see Google Music)
    • Make selected/active items in drawer colored
  • Page transition animations
  • Give option of setting card-colorbar color
  • Add ripple effect to nav drawer menu items
  • Pagination:
    • Maybe replace with actual buttons
    • hover effects like buttons?
    • Handle if it gets too wide for screen? (limit number of page links)
  • Tags
    • Allow filtering by tag (have list of all tags)
  • Add material box or lightbox for images
  • Add 'source' option for YAML frontmatter
  • increase spacing between list items
  • Fix things like header-panel to utilize updates to polymer paper elements

Known issues

  • JS and HTML aren't minimized
  • Too much space on cards between end of excerpt and read more button

License

MIT License

You can’t perform that action at this time.