Mr. Doc Theme Starter Kit

A responsive starter kit for Mr. Doc themes.

This starter kit is based on mrdoc-theme-cayman.

Requirements

• Ruby
• Ruby Sass
• Gulp
• Bower

Usage

Create a bower file using bower init and add the following dependencies using bower i --save:

• prism - for syntax highlighting
• bootstrap-sass - for labels and other components

Of course, you are not limited to using bootstrap or sass and are free to use whatever frontend framework you like.

Build

# Build the theme for production
gulp build

Develop

# Build and watch the theme for development
gulp

Customizations

By default, a Sass version of Bootstrap and a custom Sass file is used for the starter kit. Also, the starter kit is using gulp as its build system and it should be easy enough to see and understand that gulp is doing most of the hard work including minification.

Publish

Create a package with mr-doc-theme as the keyword and add the following dev dependencies:

npm i --save-dev gulp gulp-shell gulp-connect gulp-ruby-sass gulp-clipboard gulp-uglify gulp-uglifycss lodash

Once you have created the package, you are free to customize the template under template/. You may also edit the gulp file if you add more dependencies through bower.

Just make sure that your assets are placed under assets/ and that you edit the template to add those assets.

As far as the asset's paths are concerned, the relative path is taken care for you by Mr. Doc. You will only need to add target.relative.path to the asset's path as shown below.

Example:

script(src=target.relative.path + 'js/...')

link(rel='stylesheet', href=target.relative.path + 'css/...')

When all is set and done, take a screenshot of your theme, add it to your readme using Google Drive to host your image, and publish the theme!

License

This project is licensed under Creative Commons Attribution 4.0 International.