Tumblr template using SASS, Compass, Gulp, and Bower.
I'm taking a too-themed-for-what-i-need theme (with an extremely nice production pipeline), merging it with a starter theme.
I'll try to save that as a branch, if I remember, for someone else to use, since this is kind of a pain in the ass.
I assume you have installed node & npm (node package manager):
npm install -g bower # bower required
gem install compass # compass requiredNote When installing compass, be sure it's on your global path. I had to symlink mine.
git clone https://github.com/shadesoflight/tumblr-template-sass
cd tumblr-template-sass
npm install
bower install
gulp styles
gulp scripts
gulp html --clipboardGulp will build the theme and put it on your clipboard to paste into your blog
note, if the HTML task does not start, please restart the process
All assets are compiled into the build directory in the root of the cloned repository.
A concatenated dist/theme.tumblr file is created, which contains the code to paste into your theme editor.
To have this file copied onto your clipboard automatically, use gulp --clipboard
A fully functional bare-bones Tumblr theme that works out of the box. Style it to your needs. The goal of the project was to remove uncessary code easing the development process.
Bower
bower install tumblr-boilerplateGit
git clone https://github.com/davesantos/tumblr-boilerplate.gitDownload
- Choose an installation method.
- Modify
tumblr.htmlwith your favorite code editor. - Publish it by going to https://www.tumblr.com/customize
- Click Edit HTML on the left column.
- Copy & paste your customized code then click Save.
- HTML5 tags
- Normalize.css from cdnjs
- Supports all post types
- Theme options from global appeareance
- Localization strings
Theme does not support
- Comment System (Disqus)
- Group Blogs
- Notes
- Srcset Attribute
(Intentionally not included to remain flexible in the various uses for a theme.)
Tumblr will auto-inject code (such as Open Graph Protocol, Twitter Cards & javascript) into the final result for your page. This is out of the theme developers' control. Running it through a HTML Validator or Page Speed may spit out warnings & errors.
(Tumblr injects <!DOCTYPE html>, twice!)
Open Graph Protocol
If you choose not to include this in your <head>, Tumblr will auto-generate it against your will! Isn't that great!?
<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# blog: http://ogp.me/ns/blog#">
And this:
<meta property="og:site_name" content="{Title}">
<meta property="og:url" content="{BlogURL}">
<meta property="og:image" content="{PortraitURL-128}">
<meta property="og:type" content="tumblr-feed:tumblelog">