This is a quick post to show how you can mointor and compile your web app CSS file using COMPASS packaged with Gumby2. Automatically update your main css file whenever you change ANY of your SASS stylesheets. Nice.

Gumby 2 is built on Sass and relies heavily on the power of Compass… Gumby comes with a compiled gumby.css file which you can include and then continue to write CSS in the regular way, however there are a few dependencies you’ll need to install before you can utilise Sass and Compass and unleash the true power of Gumby 2.

Download Gumby2 Gumby2 Demo

1. Setup Gumby2

Run from localhost:8080 or such server – update css/gumby.css @import for google font – add http:// instead of // (change back if you deploy so it caters for https:// a nd such). If you run from file:// raw html then chrome will block any XHR requests

2. Install SASS & COMPASS

See Gumby2 SASS Installation Guide.

3. Install modular scale

Modular Scale is a Gumby2 dependency – It’s used for typography.

git bash install modular-scale

gumby2-1

4. Compile and Monitor

You can manually build the css file by typing this:

$ compass compile

gumby2-2

If you want compass to automatically build your css file whenever you make changes type this:

$ compass watch

gumby2-3

Made a change to the custom styles… and voila!

It’s instantly compiled the new CSS file on the fly just like we normally do.

Note: You don’t need to type compile every time you can just start with watch and it will pickup any changes since last save.

gumby2-5

Done! :)

Some Errors Encountered During Setup?

an error occured! (gumby2 modular scale error)

run the install again…

gumby2-6

Error again… oops I’m missing the config.rb! https://raw.github.com/GumbyFramework/Gumby/master/config.rb

gumby2-7

Success! :)

Sam Deering is a Front-end Web Developer who specialises in JavaScript & jQuery. Sam is driven and passionate about sharing his knowledge to educate others.

Free Guide:

How to Choose the Right Charting Library for Your Application

How do you make sure that the charting library you choose has everything you need? Sign up to receive this detailed guide from FusionCharts, which explores all the factors you need to consider before making the decision.


No Reader comments

Learn JavaScript for free!
Free course: Introduction to JavaScript

Yours when you take up a free 14-day SitePoint Premium trial.