Using Buster – A Static Site Generator for Ghost

Buster is a static site generator for Ghost made by Akshit Khurana. It is used to generate static HTML + CSS from your local Ghost install, this is perfect for using Ghost on shared hosting (no need for Node.js!).

In this short tutorial I’ll be going through the steps on how to install and use Buster. I used a mac to install Buster, but the steps should be fairly similar on Linux or Windows since the install process + usage is done though the command line.

Requirements

Ghost installed locally on your computer
– Python
– Terminal

Install pip

Buster is written in Python. In order to install Buster, you will need pip which is a Python package manager. Follow their official install guide to get pip installed on your computer.

Check if your computer has pip installed by running this command in the terminal:

pip --version

Install Homebrew

Buster requires wget, this can be installed through Homebrew which is a package manager for Mac. Follow their official install guide to get Homebrew on your computer.

Check if your computer has Homebrew installed by running this command in the terminal:

brew --version

Read more »

Installing Package Control for Sublime Text 3 Beta (OS X)

Sublime Text 3

I’ve been recently playing around with the recent beta release of Sublime Text 3 and I wanted to install the popular & super useful Sublime Package Control by Wil Bond.

Right now the only viable option to install the Sublime Package Control is via Git in the Terminal. I’m a Terminal newbie on Mac OS X, so it took a while to figure out how to install it properly.

I wrote a quick guide to installing Sublime Package Control for Sublime Text 3 on the Mac, hopefully this helps other OS X users!

Requirements
– Sublime Text 3 Beta
– Mac OS X 10.8
– Terminal

1. Install Git on your Mac, I used Git for OS X. At the time of writing, the latest version is 1.8.3.2.

2. Open the Terminal and Sublime Text 3 Beta.

3. In Sublime Text 3, go to Preferences > Browse Packages. This will open up the Packages folder in a new Finder window. Keep this window open!

Finder Window

Read more »

Pushy – Off-Canvas Navigation

Pushy - Off-Canvas Navigation
I’ve recently been working on a project that required an off-canvas navigation menu. This type of navigation is frequently used in smartphone & tablet apps, such as Facebook, Foursquare and YouTube.

While building my off-canvas navigation menu I stumbled upon Medium’s excellent implementation, the animation was smooth on desktop & mobile devices and the experience felt very snappy.

I determined that my off-canvas navigation menu must have:

– Smooth menu movement using hardware acceleration.
– Smooth transitions using CSS3.
– Clicking on a menu link must close the menu.
– The menu MUST close when you click anywhere on the site.
– No horizontal scrollbars when menu is open.
IE 7 support (sigh).
– Use jQuery
– Responsive

I’ve open sourced this project and named it Pushy because it pushes your content (to the right) when the menu is open. Pushy uses CSS transforms & transitions on modern browsers and a jQuery animation fallback for IE 7-9. The only two dependencies Pushy requires is jQuery & Modernizr.

You can download this project on Github and free to let me know if you use Pushy in one of your websites.

To give a better idea of how Pushy works, check out this live demo.