Download the new Spine theme

I’ve just updated the Spine theme to use Foundation 4.

You can download it by clicking the button below

Download Spine 2

View Demo

The big change is that everything can be customized with Sass. Foundation now uses mixins for everything from grids to buttons.
It also means less unnecessary classes and divs.

I also added a contact form template.

The menus are a bit special: the primary location uses the Foundation top bar, which is the most flexible, allows for 3 levels of dropdowns…

The secondary menu uses the Foundation sections menu, which replaces the navbar menu.

This requires you to wrap the top level menu items with a custom menu link item with a # URL, so basically it’s good for sites that has different sections. It supports one level of dropdowns.

 

I always welcome feedback, so if you find a bug, let me know.

the-guard-movie-photo-01

Using Live Reload with Phpstorm remote project

I recently set up an old machine to run a LAMP stack on Ubuntu for my WordPress development.
As mentioned before, I use Phpstorm for development with xdebug. This works fine for remote debugging, so I can set up my local dev sites on my Ubuntu machine and still develop on my more powerful Windows 8 PC.

One thing I couldn’t figure out was how to get Live Edit to work with remote projects. This is a feature of the Phpstorm IDE which works a lot like Live Reload by adding an extension to Chrome and monitoring file changes. Unfortunately, it doesn’t seem to be supported for remote projects.
I finally found a workaround to this issue and not having to refresh my browser window every time I make a Sass change is a great productivity boost.

First, here’s my config.rb file, which is inpsired by Chris Coyier’s in that it moves the style.css after compilation.
Mine copies it to my local WordPress theme root and then moves it to the remote server via a mapped drive.

On my local machine, I installed Ruby and Sass/Compass gems and just ‘compass watch’ with the command line tool. I used to use Fire.app but found out it didn’t find all compilation errors.
So, when I save a Sass file, it compiles and moves the style.css to the required locations.

On my Ubuntu machine, to which I connect with Teamviewer (I installed the desktop version of Ubuntu because it’s easier for me to manage), I installed Guard and Guard Livereload and the Chrome LiveReload extension.
https://github.com/guard/guard-livereload
https://github.com/guard/guard

If you need to install Guard LiveReload on Ubuntu, I suggest following the steps described in this issue

https://github.com/guard/guard-livereload/issues/62

namely:
sudo apt-get install rubygems ruby-dev
sudo gem install guard-livereload

I then just changed the Guardfile configuration to watch CSS files and presto, Live reloading!

I suggest checking out this video by Jeffrey Way

how to change the sidebar headings in the Spine theme

I had a question via email asking how to make the sidebar headings smaller, and I thought it was worth posting for everyone who might have the same question. So here’s how.
I think the best way would be to create a child theme and add the following code to the functions.php file

How to create a child theme

You could also possible use CSS, again in a child theme or with the custom CSS Jetpack feature