Getting Started with Gumby Framework

Article en anglais, la traduction arrive :)

1. Setup the Ruby NodeJs environment

If you are interested in give it a shot, here is a step by step in order to make it work on a Windows PC:

  • First you need to have Ruby installed on your machine: http://dl.bintray.com/oneclick/rubyinstaller/rubyinstaller-1.9.3-p545.exe?direct
  • Then you will need to install NodeJS: http://nodejs.org
  • Then install Git for Windows http://msysgit.github.io. While you are prompt for it select Run Git from the Windows Command Prompt

Everything else works in a command prompt:

  • So clic on “start” icon and search for cmd.exe and launch it,
  • As it is a ruby environment we will have to install a few things:
    • copy paste gem update –system and press enter & wait
    • copy/paste gem install compass and press enter & wait
    • copy/paste npm install -g claymate and press enter & wait

 2. Install Gumby Framework

Now if you wish to install a New Gumby instance:

  • create a folder where it will be downloaded. In your command prompt windows type cd (stand for change directory)
  • From your Windows Explorer folder drag & drop the directory to the command prompt window and press enter.

copy paste

You should end up with something like that:

cmd

Now type claymate install and it will download all the recquired files.

3. Compile SCSS Files

Gumby is based on SCSS files that need to be compiled. The only file you need to edit for the css to work is custom.css.

In order to compile it automatically you can use Compass watch command. So considering you are still in your website folder in the command prompt just type

Compass watch. You should see the windows below:

compass

As you can see it says « compass is polling for changes« . That means every time you edit your scss file, Compass will detect it and generate the correct CSS file.

 

4. Working with Gumby/Claymate

Gumby is built with components, that can extend features. List here: http://gumbyframework.com/docs/extensions/

In order to tell Gumby to use them and minify files, you will need to tell him which components you want, in a gumby.json. The file will stand at your website root folder. If this file is not present yet, just create one and copy/paste:

{
« build »: {
« gumbyPath »: bower_components/gumby« ,
« modules« : [« retina« , « toggleswitch« , « validation« ],
« buildSourceMap »: true
}
}

Here is a real file from a previous project :

{

« build »: {
« gumbyPath »: «  »,
« outPath »: « js »,
« modules »: [
« gumby.fixed.js »,
« gumby.navbar.js »,
« gumby.toggleswitch.js »,
« gumby.tabs.js »,
« jquery.validation.js »
],
« addons »: [
« bower_components/gumby-parallax/gumby.parallax.js »,
« bower_components/gumby-images/gumby.images.js »,
« bower_components/masonry/masonry.pkgd.min.js »,
« bower_components/imagesloaded/imagesloaded.js »,
« js/lightbox.js »,
« bower_components/lazyload/build/lazyload.min.js »,
« bower_components/owlcarousel/owl-carousel/owl.carousel.min.js »

],
« files »: [],
« buildSourceMap »: false,
« quiet »: false
}
}

So the part “modules” is used to load extra features from Gumby Framework.

The part “addons” is used to load custom scripts such as jquery plug-in for example.

Gumby team is using a script c