Working With Gumby Claymate and Laravel

Another day, another project, another prototype to work with. If you are like me, you are probably sick of looking at Bootstrap every day for year. Things were only made worse with Bootstrap 3's seemingly design by committee feel of css selectors. So, if you are like me, you may have made the jump to Gumby CSS. If so, then you are in luck when it comes to working with customized versions of the framework using SASS.

Gumby was already awesome to work with as it was built by Digital Surgeons as a great way to rapidly create sites. And the trick is that all of their sites look unique and beautiful (far from the Bootstrap cookie cutter mess that is far too common). So Gumby is developed to give you the freedom to customize it while keeping some of the most expressive HTML I've seen to date.

Being writting in SASS and leveraging Compass, Gumby took a bit to get used to and setup for modification. Luckily, now, Digital Surgeons has gone in and helped us out even more by creating Claymate. Claymate allows you to scaffold up a Compass ready Gumby project in seconds. While this is great for building client-side apps, there was a bit of customization I had to do to get it playing nice with my folder structure in Laravel.

Moving Files

By default, claymate throws everything into your current working directory. This is a bit tricky when you want to follow the structure of a serverside framework. Some might tell you to just run claymate within your public directory, but it's not right to have all those assets running amok on your publicly accessible site. So, luckily, we can move around some folders and directories.

Let's first start by moving the sass directory to assets/sass. Then move our css, img, fonts, and js directories into public/.

Updating Config Files

Since we've moved things around a bit, Claymate and Compass both need some configuration to be able to find all of our files. Let's start with config.rb to configure Compass. For the configuration options css_dir and images_dir update these to public/css and public/img. Then update your sass_dir to assets/sass.

Now let's move on to our gumby.json file which handles concatinating and building our javascripts for gumby. Update the outpath to public/js.

Moving your bower files - optional

I have a convention of moving my bower components to lib/bower instead of bower_components. To do this, we will have to create a .bowerrc and a bower.json file. Our .bowerrc should a bit like this

{
  "directory": "lib/bower"
}

And our bower.json file will look like this (fill in your own project name of course).

{
  "name": "Project Name",
  "version": "0.0.1",
  "dependencies": {
    "gumby": "~2.5"
  }
}

Now running bower install will pull down gumby into lib/bower and you can delete your bower_components directory.

You will have to update your gumby.json and the gumbyPath option to be lib/bower/gumby. And in your config.rb you have to update the extensions_dir to lib/bower/gumby/sass/extensions

Updating SASS references

Since we moved our SASS files, you will have to do a few changes in your assets/sass/gumby.scss (you can name this anything you want by the way!). Wherever there is a reference to ../bower_components you have change this to ../../bower_components (change this to ../../lib/bower if you moved your bower directory).

Now if we run gumby build and compass compile we will be all set up to working with GumbyCSS in Laravel with Claymate and Compass doing what they do best!