Exploring Ghost Part 1: Figuring the theme out

If Ghost is going to end up being a viable platform for me to run my website with, I'm going to have to tweak it quite a bit to get the style and feel that I want. I had already been prepared to start learning how to build something by scratch, so learning how to put together my own theme should be a great stepping stone. After all, it would only require things I already know; html, css, and javascript.

Still, I probably spent a good half of my day today just trying to get a foothold on where to begin. I started trying to understand the default Casper theme, reading up on Handlebars expressions and learning what I needed to do.

The general theme I'm going for is based on a tumblr theme idea I (super shittily) mocked up last year.

tumblr mock

I found working with the Casper theme was too frustrating since there is so much already put into the theme.

I then tried to look for a "blank slate" theme with just the bare minimum and found Ghost-Blank. This was informative, but I still needed a bit more of a baseline to figure out where to change things.

I settled for using the theme Scrawl as a baseline. There's a lot I like about the theme and figured I could reconstruct how she built the theme step by step in my own blank project to eventually get somewhere.

Anyways, this is where I am
Shitty website

It looks like nothing, but that's mostly a matter of further styling. I've just been trying to get the hierarchy structure and shape correct. The banner, menu and sidebar are all fixed, so as you scroll the "posts" will scroll into the banner. The sidebar will house the Logo, description, social media buttons, and a twitter feed.

Title font will be Kankin, a free font I'm using for my channel.

Something really interesting I learned in CSS today: stylesheet calculations. See, the width of this page scales with your webpage. It'll always be 90% the width of your browser size. That really screwed up the post alignment when I introduced the sidebar. But then I learned you can say 90% width, and then subtract a set amount of pixels!

width: -webkit-calc(90% - 200px);

Definitely going to be using this a lot in the future.

Kyle

Kyle

I do tactile research—It's a touchy subject. Psych/Neuro grad student and creator of LittleGadget, a channel about Science and Videogames.

Read More