So you want to make a ghost theme? Introducing casperStarter & ghostSheet

There comes a time in every developer's life, when fiddling with anything that has a /themes folder, where you feel the urge to create your own theme. It's only logical.

It's all very exciting and new but, sometimes the first steps are not very clear and you feel like you are hacking your way through things. It's not that those steps are complicated (ghost is the opposite of complicated), you simply may just not have a global view of the theming process yet.

Inspired by that (and by the undeniable urge to create my own ghost theme!), I've created a couple of themes for a couple of personal blogs and documented it. I actually went a bit beyond that and decided to make something that will assist me in future theming processes, and may also assist you. More on this ahead.

The big question: New or semi-new theme?

Unfortunately, this is probably one of those questions you can only answer once you've been through both processes. I have, and I still don't have a straight answer. It totally depends on personal preference and the complexity of what you are trying to achieve.

Lets keep in mind that Ghost has a very specific purpose and set of tools, which means that even if you are going all out on your theme, chances are, most of the specific things are plain HTML, CSS & Javascript. In Wordpress for example, a theme can have an incredible amount of intertwined plugins and features that will take days to build from scratch.

The dilema: Existing theme

Choosing an existing theme may speed up the process if you find something very similar to what you want, and it turns out you only need to change some CSS and tweak some pages. Otherwise you may be looking at more time hacking through it than it would take you building a new one.

In ghost the similarities either fall on structure (side menu, one column, two column, etc), or add-ons (social media, comments, search etc). If you find a theme that has both, go for it! If you don't I'd chose to find a theme with the correct structure. Most of the things you want to hook up to Ghost are simple copy/paste code snippets, with minimal configuration needed.

There is one catch when using an existing ghost theme, and that's the way it's written and it's structure. If it doesn't fit something I agree on, I get cranky through the whole process. Take casper, the default ghost theme. I love it, I mean, I really really love it! But to me, it's not shipped with a maintainable, scalable, reusable, sexy code structure. So I went all out and began to make my very on casper theme starter, to build upon on.

Introducing casperStarter! This is my way of reusing casper as a base theme for other themes. Just cause I love it so much.
It is a Grunt + Less + Modulated + Scaleable version of the casper theme. I turned the existing CSS into LESS and divided it up into separated files. That way, I can choose which parts to use, change or delete, without having to run through a single file with 2k+ CSS lines.

Features

  • Follows Ghost theme best practices
  • It has the base file structure and style of Casper
  • User LESS instead of CSS
  • It has modernizr.js included
  • It has normalize.css added the right way
  • It has bower included
  • It features code minification & concatenation
  • It has jslint built in the development

Installation

In the command-line, navigate to your themes folder:

$ cd content/themes

Pull the repo:

$ git clone https://github.com/Cloudoki/casperStarter

Install dependencies:

$ npm install
$ bower install

Run the watcher:

$ grunt watcher

As of now, any changes you make to the JS or LESS files, will be built into a staging folder. Where you should include those files from. You can customize the separated .less files or add custom overwrites in the casperStarter.less file.

Build the final version

To build the final files, do a:

$ grunt release

And it will process, concatenate and generate the final .css and .js files for you to use, inside a /dist/ folder.

The dilema: New theme

A new theme is always exciting to build! If you already have a design somewhere, or a very specific idea of what you want and can't find anywhere else, creating a new theme is the way to go.

Like said earlier, I'm really a big fan of scaleable and maintainable development structures so, for me, creating a theme from scratch is more than setting up a few empty files and folders. I need a base to built on. That's why I created a very basic, semi-empty (just some basic html & files), clean theme sheet with the usual grunt and less goodies, called ghostSheet.

GhostSheet has only the essential files and folders needed to be successfully installed on Ghost, plus header and footer partials just (because it's pretty).
It follows Ghost theme best practices, and outside the box it has some cool features like code minification, jslint, etc. It's built to work with .less styling, hover, one can easily update this to work with .sass for example, or any Grunt task you can think of.
I had to refrain myself and not go too crazy, or it would become increasingly harder to make it work with anything, and that's the whole purpose of a clean sheet.

Features

  • Follows Ghost theme best practices
  • It has all the essential files to install a ghost theme
  • User LESS instead of CSS
  • It has modernizr.js included
  • It has normalize.css added the right way
  • It has bower included
  • It features code minification
  • It has jslint built in the development

Installation

The installation and logic are pretty much the same as the previous theme.
In the command-line, navigate to your themes folder:

$ cd content/themes

Pull the repo:

$ git clone https://github.com/Cloudoki/ghostSheet

Install dependencies:

$ npm install
$ bower install

Run the watcher:

$ grunt watcher

Build the final version

To build the final files, do a:

$ grunt release

And it will generate the final .css and .js files for you to use, inside a /dist/ folder.

comments powered by Disqus