Grain Bootstrap Theme

Static sites are a handy way to get some of the benefits of a CMS (templating, content processing, etc.) without the headache of installing, configuring, and updating a CMS like Wordpress. Grain is a powerful and easy to use static site generator written by the folks at SysGears. Grain itself is written in Groovy and it supports source pages in several different formats, including HTML, Markdown, and AsciiDoctor (which this page is written in). Grain also watches the file system for changes and will regenerate pages you update so there’s no need to stop and restart a server when you’re developing your site.

This theme for Grain will download and setup SASS processing for Twitter Bootstrap so you can get a jump start on building your site with Bootstrap’s styling.

Installation

First, download the theme code from Github. The easiest way is probably to download the source zip from https://github.com/craigatk/grain-theme-bootstrap/archive/master.zip

Once you have the theme, you’ll need to install the Bower dependency manager if you don’t have it already. This theme uses Bower to download Bootstrap and its SASS source files.

Once you have Bower installed, run this command from the command line to download Bootstrap

bower install

By using Bower to download Bootstrap you can easily upgrade Bootstrap when a new version comes out. You don’t have to wait on me to update the Bootstrap version, simply change the version numbers listed in the bower.json file and re-run bower install.

Customizing Bootstrap

This theme uses the SASS port of Bootstrap instead of the generated CSS, so you can easily customize Bootstrap by setting any of Bootstrap’s many built-in variables. The variables are listed on this page in the Bootstrap docs, just note that the variable names on that page are for LESS, so use $ instead of @ for SASS.

For example, to reduce the padding in a jumbotron, set this variable in /theme/sass/main.scss

 $jumbotron-padding: 20px;

 @import "vendor/bootstrap/bootstrap";

And be sure to put your variable definitions before the import statement that imports the Bootstrap SASS files.

Developing your site

The project uses Gradle and the Gradle wrapper to build your static site, so you don’t have to download and install Gralde. You can just run gradlew commands to use the Gradle wrapper and have it automatically download and use the correct version of Gradle for you.

To have Grain automatically regenerate pages as you change them, run

./gradlew preview

Generating your site for deployment

We’ll use the Gradle wrapper to generate the site’s deployment files as well, so run this command:

./gradlew generate

The generate command writes the site’s output files to the target directory.

Contributing

I welcome contributions to this theme! To contribute, file an issue on Github or fork the code on Github and submit a pull request.