Ghost Themes
SimpleChat.Support - Open Source Live Chat App
Ghost theming with Zurb Foundation and SCSS
words - read.

Ghost theming with Zurb Foundation and SCSS

Zurb Foundation is a well known Front-end framework so there is no need to introduce it to you. If you want to know more about it just go to the Foundation website
Foundation uses SASS as a CSS preprocessor (with SCSS syntax). I want to show you how we can start to work with it in our Ghost themes projects. The whole article will be based on a free and ready to use theme which is called 'ABC' and you can download it here: ABC Ghost Theme

This isn't a detailed theming tutorial. I want to focus on a particular topic which is Scss workflow with Foundation framework. But if you need to learn the basics you’ll surely find something on the Internet. There is also detailed documentation here: I'll try to write some basics tutorials here later. However, you can just download the theme and use it like it will be described here later.

Here I assume that you know what a preprocessor is and what the Sass language is. If not, I strongly recommend you become familiar with this site:

Ok, lets start from folder and file structure.

As you can see in the ABC theme we have the 'scss' folder under the 'assets' folder. You can go and watch it here: This is our Foundation Scss config. What do we have there? All Foundation core files are located in the 'foundation' folder. We don't need to modify it. It would be better not to for future updates. All scss files here are partials which means that they all will be imported into the main style.scss file. Remember that an underscore in the name of a file means that it is a partial and won't be compiled as is. You can open and see how the main style.scss file looks: We have some imports here first. We need to import 'normalize.css' styles and foundation settings. There is also file with other theme settings which can also override the foundation settings. It is called _theme-settings.scss. Remember that when we use the @import statement we don't need to write the full file name but just 'theme-settings' string. Here are all the imported Foundation core components as well. You can of course delete the ones you won't be using. It will make the final .css file lighter. Also in style.scss there are other theme styles just below the imports. You can add yours there.
And this is how it is organised in the ABC theme. You can do this differently, just remember to attach all Foundation core files or at least the mandatory ones like grid and those you want to use.
So to sum this up, there is one main file called 'style.scss' which will be compiled into one file called 'style.css' in the end. All other files are just partials which are imported in 'style.scss' This is just because you may want to delete the unused parts of Foundation framework etc., so it won’t be part of the 'style.css'.

Ok, I know how it looks, but how does it work? How do I get my ready to use 'style.css' file?

As you probably know when you run your local instance of Ghost in default there isn't any task which will compile your .scss files into .css ones (for now). We need to do this by ourselves. You can of course run your app (CodeKit, Prepros or Mixture etc) or even go to your 'assets' folder and run scss --watch scss:css in the command line. (with sass gem installed). But this is some additional work to do and the Ruby version of Sass is really slow.

So, how does ABC achieve it?

In ABC you are able to run only one-word commands to achieve Sass compiling and watching for changes. And you don't need to do any additional work.
We have used Grunt task and Node based Sass compilation. To use it just go to ABC theme folder and run (sudo) npm install then run grunt. From now on, all your changes in the .scss files will be compiled into .css files. You can check how it looks like here: As you can see there is Sass config section. You can set up the output style of your final .css file, sourcemaps for Sass and of course file names with paths. For more information check out grunt-sass task:

This is how it is done in the ABC Ghost theme which you can download for free and use as a starting point to your own Ghost themes projects based on Zurb Foundation for Sites and Sass workflow. If you like the ABC theme don't forget to star it on GitHub :)

Check out my other premium Ghost themes on ThemeForest: pxThemes portfolio


comments powered by Disqus