Bootstrap Tumblr Theme
Install this theme on your Tumblr using this link: http://www.tumblr.com/theme/34547
I'll be sure to keep the theme up-to-date with the most recent code. Install it to automatically keep up with future developments.
Overview
What: A Tumblr theme built on top of Twitter's Bootstrap framework (v2.x), with Font Awesome icons.
Why: To minimize the effort required to maintain consistent designs on both a Bootstrap-based web app and its blog.
How: Borrowed the overall structure from the awesome Royal Ribbon theme, and rebuilt it using Bootstrap markup and styles.
Details
This theme provides a very basic and barebones framework within which to apply your own styles. Typically this involves linking to your web app's existing stylesheet, then applying further custom CSS to polish off the integration with Tumblr.
By default this theme uses Bootstrap's responsive styles, so it should look sexy across devices and form factors. This is optionally disabled via Tumblr's appearance options.
Of course the devil is in the details, so be sure to tweak for your needs.
Usage
This theme can be installed via Tumblr's theme gallery: http://www.tumblr.com/theme/34547
Take a look at the available configuration variables, particularly the Application Stylesheet which lets you pull in any of your existing Bootstrap styles.
Tweaks and modifications to the markup can be made as follows:
http://www.tumblr.com/customize/<your-blog>
- Click
Edit HTML
- Tweak to your satisfaction using familiar Bootstrap styles and structure
- Save and start posting!
Configuration Variables
Background - Background image.
Sharing Buttons - Tweet button (optional via @account & post-tweet follow recommendation), Facebook Like button.
Disqus Shortname - Adds Disqus-powered comments to each post permalink page.
Application Stylesheet - Drop in your application stylesheet URL here to instruct Tumblr to assimilate your application styling. Hopefully it "just works". Failing that, you can either drop in some Custom CSS or customize the theme markup directly.
Show Description On Index - Optionally hide the hero unit (blog description) on the index page.
Use Responsive Styles - Determines whether or not the styles used for the theme adapt to different screen sizes & formats.
Link Logo To Application - Should the logo (top left, in the nav) link to your Application URL?
Application URL - If "Link Logo To Application" is enabled, your blog logo links to this URL.
Roadmap
- looking for feedback and bug reports, please complain, fork and contribute!)
Blogs Using Bootstrap Tumblr Theme
- Namevine Blog
- Mike Jarema's Blog
- The Unscatter.com Blog
- Neil Merton's Personal Site
- Everything in the Sky
- Sam The Cobra's Blog
- GelaSkins Blog
- Joshua Morrison Photography
- Fourist
- Edman Goodrich's Blog
- EmbedTree Blog
- FilePicker Blog
- Alex Seville's Blog
- AppSocially's Blog
- Bootswatch Blog
- GetHyper.com
- Ben Bowler's Blog
- Jim Mueller's Blog
- ICodeLike.Me
- /dev/nfc
- Nick Roseboro's Blog
- Distrify Blog
- Vash Blog
- ... your site? fork and submit a pull request with your site listed here
License & Notes
The MIT License - Copyright (c) 2012 Mike Jarema