Verse

Verse is a flexible and modern Tumblr theme: rich in customizable features with a clean focused design.

Key features

• Free and open-source code
• Responsive design
• Group blog support
• Integration with Tumblr customize panel: custom fonts, colours and header image
• Customizable sidebar and blog footer

Install Verse

Demo blog

Install on Tumblr Themes

Modify Verse

To make changes to the theme's HTML, click the 'Edit HTML' button in the customize menu after installing the theme.

Build Verse

The following documentation is designed for developers interested in building Verse from code contained in this repo.

Verse uses:

• JavaScript to initialise jQuery plugins (FitVids.JS and jQuery PhotosetGrid)
• HTML with Tumblr's templating language
• SCSS, a CSS pre-processor
• CSS when referencing variables from Tumblr's templating language

The tools used to build Verse are:

• Bower to manage JavaScript dependencies
• Grunt to process the HTML, SCSS, CSS and JavaScript
• Git for version control

To build Verse from the code contained in this Github repository, make sure you have Bower, Grunt and Git installed, then run the following steps in Terminal in order to install the themes dependencies and build a local copy:

$ git clone https://github.com/rohanchandra/verse-theme.git
$ npm install
$ bower install
$ grunt inline

Editing code

Make changes to Verse's code by changing files in the 'src' folder.

Directories in the 'src' folder correspond to the type of code stored:

• src/styles: SCSS and CSS
• src/js: JavaScript
• src/includes: partial HTML files

The bulk of the theme's HTML is kept in theme.html.

After making changes, run the Grunt build processes which add CSS, JS, and HTML partials into a single HTML file.

Builds in Grunt

Development builds

grunt inline

Development builds make use of inline CSS and JavaScript to allow for quick testing of the theme.

After making changes to either the JavaScript, HTML or CSS, run grunt inline in Terminal to create a development build of the theme.

To test your theme after running grunt inline:

1. Open the build folder
2. Open theme.html in a text editor
3. Paste the HTML into the customize menu of your testing blog
4. Save all changes

Distribution builds

grunt dist

Once you are satisfied with all changes to your JavaScript, HTML and CSS and have tested all changes running grunt inline, make a distribution build that links to the CSS and JS externally rather than placing them inline.

Step one: Upload verse.min.js and dist.min.css to Tumblr:

Step two: Change the staticCSS and staticJS variables in package.json to the asset URLs from Tumblr:

{
  "name": "Verse",
  "version": "2.0.0",
  "staticCSS": "http://static.tumblr.com/981y23h/7lwnnt197/dist.min.css",
  "staticJS": "http://static.tumblr.com/ns3mt1d/RKEnk0ivm/theme.min.js",

Step three: Run grunt dist to build the Tumblr theme HTML with the external CSS and external JavaScript links

Issues

Please open an issue on Github or send an email to the email address listed on the Tumblr Themes page for Verse.