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.

You should end up with something like that:

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:

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 called Claymate. It is something like Grunt (http://gruntjs.com) which let you automatise tasks : minification, concatenation etc.

When you edit this file, for example by adding a new plug-in, you will have to run the command “claymate build” in order to minify everything.

Use Bower To install new components

Bower (http://bower.io) is a package management tool that let you install plug-in really easily.
Bower let you download (and update) scripts without having to go to each website / github page, download & extract…

So for example if you wanted to add the Owl carousel plug-in to your website you just need to type in your command prompt bower install owlcarousel. This will download all the plug-in directly in your root folder in a /bower_components/ folder.

If you already have a plug-in install and you want to update it simply type bower update owlcarousel

Since you added a new plug-in you want to tell Gumby about it. So go back to your gumby.json file and add an extra line to the addons part :

« bower_components/owlcarousel/owl-carousel/owl.carousel.min.js »

Save it and go back to your command prompt windows and run claymate build once more.
This will add your extra plug-in to the Gumby’s core and minify everything.

This way you don’t have to call extra script in your header. Everything will by minify in gumby.min.js

More information

Gumby

everything you need to know in order to start working with Gumby: http://gumbyframework.com/docs/

Nodejs

Javascript webserver: http://nodejs.org

Bower Package management

Browse all available plug-ins: http://bower.io/search/