More
Getting Started with Gumby Framework

Getting Started with Gumby Framework

avril 17, 2014 9:49 5 comments

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 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/

5 Comments

  • j’aime cet article.
    ce sont des bonnes idées .
    merci pour le partage .

  • Merci pour cette sélection d’articles très intéressant, ça va bien m’aider à mon travail .
    Très bien expliqué.Merci pour le partage de cet article.

  • I’m impressed, I must say. Seldom do I encounter a blog
    that’s both equally educative and interesting, and let me tell you, you’ve
    hit the nail on the head. The issue is an issue that not enough
    people are speaking intelligently about. I am very happy I stumbled across
    this in my search for something concerning this.

  • Setra

    Article très intéressant, avec de bonnes idées. J’espère les exploiter à fond bientôt.

  • I would like to thank you for the efforts you’ve put
    in penning this site. I’m hoping to see the same high-grade blog posts by
    you in the future as well. In fact, your creative writing abilities
    has motivated me to get my own blog now ;)

Leave a reply