More
Getting Started with Gumby Framework

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

avril 17, 2014 5 comments Lire la suite
Utiliser Gumby Framework sur Windows

Utiliser Gumby Framework sur Windows

Pour installer un environnement tout propre et commencer à travailler avec le très très bon environnement Gumby, voici les quelques étapes à respecter :

  • Commencez par installer Ruby depuis la page Ruby installer. Comme conseillé sur le site, je vous invite à installer la version 1.9.3
  • Puis rendez-vous sur la page de nodejs pour l’installer,
  • On continue en installant Git for Windows, pendant l’installation à l’étape « adjusting your PATH environment », cochez la seconde option « Run Git from the Windows Command Prompt« 
  • A présent vous allez cliquer sur le menu démarrer, et tapez « cmd »,
  • cliquez sur « cmd.exe »,
  • dans la nouvelle fenêtre tapez: gem update –system puis patientez
  • tapez à présent gem install compass puis patientez de nouveau
  • maintenant tapez npm install -g claymate et patientez,
  • enfin mettez vous dans le dossier dans lequel vous vous installer une version de Gumby en tapant  cd puis glissez/déposez le chemin de votre dossier depluis l’explorer Windows,
  • tapez claymate install,

et voilà vous pouvez commencer à travailler !

mars 11, 2014 0 comments Lire la suite
Magic Mouse Apple + OS X Maverick

Magic Mouse Apple + OS X Maverick

Si vous aussi vous avez des problèmes de clic et de scrolling avec votre Magic Mouse et votre Mac sous OS X Maverick, voici peut-être un début de solution…

Moi qui croyais trouver dans la Magic mouse, la souris ultime pour accompagner mon MacBook, quelle ne fut pas ma déception en voyant qu’à chaque clic, les pages de mon navigateur, ou l’écran de mon éditeur de texte scrollait un petit peu. Et lorsque je dis un petit peu, c’est vraiment du genre de quelques millimètres mais suffisant au quotidien pour être… borrrinng.

Après quelques recherches sur le web, je suis tombé sur le logiciel Magic Pref qui permet de régler quelle portion de la souris est utilisée pour le scroll. Par défaut c’est tout l’avant de la souris qui peut être utilisé pour cela. Avec ce logiciel vous pouvez définir la zone centrale de la souris et uniquement cette zone. Un peu comme s’il y avait vraiment une molette centrale en quelque sorte. Je ne sais pas si cela va être corrigé dans une prochaine version de l’OS, mais en attendant Magic Pref fait très bien l’affaire.

La page du forum Apple sur laquelle on trouve pleins de gens avec le même soucis.

 

 

mars 10, 2014 0 comments Lire la suite
Saas + Foundation : la méthode qui fonctionne

Saas + Foundation : la méthode qui fonctionne

Hello et bonne année 2014, l’année qui, parait-il, ne rime avec rien.

Si vous vous êtes déjà penché sur Saas, NodeJS, Grunt et ce genre de petites friandises, je pense qu’un grand flou a dû vous étreindre à un moment ou un autre.

En résumé voici ce qui fonctionne le mieux chez moi.

et hop à vous les joies de la compilation Saas avec Foundation ou Bootstrap. En plus cela gère le live reload, n’est pas beau ?

Bon alors là c’est la version ultra light, je vous fait un top complet dans le prochain billet.

tchuuuus

janvier 3, 2014 3 comments Lire la suite
Windows 8 : empêcher le son de baisser au changement d’application

Windows 8 : empêcher le son de baisser au changement d’application

Je ne sais pas qui teste l’ergonomie de Windows 8, mais il y a vraiment des trucs mystérieux. Par exemple aujourd’hui j’ai téléchargé l’application Spotlite qui permet de lire ses Play List Spotify. Ah oui j’oubliais il n’y a pas d’application officielle Spotify sur Windows 8. En même temps, quand on voit la qualité de l’application Windows Phone 8, on se dit que ce n’est peut-être pas une mauvaise chose.

Bref revenons à nos moutons

Un truc marrant lorsque vous lancez une Play List, tant que vous êtes sur l’application, le son joue à un volume correct, mais lorsque vous retournez vaquer à vos occupations (en switchant d’application), pouf le son diminue de 80% !!! En restant poli je dirais : "mais c’est quoi ce bordel". 

Alors bon, pas de problème ça doit être un paramètre de l’application… ah bah non. Alors ça doit se trouver dans les réglages généraux du PC. Dans la version Moderne UI des réglages puisque je joue la musique dans cet environnement… rien du tout.

Bon ok, c’est partie pour la recherche Google

Sérieusement, devoir faire une recherche Google pour ne serait-ce que jouer sa musique correctement, moi ça me troue le ***. Bien sur, pour espérer avoir des réponses concrètes, mieux vaut faire sa requête en anglais. Heureusement je tombe rapidement sur la page Answers.microsoft.Com avec la requête "windows 8 avoid playback to go low". D’ailleurs Microsoft devrait remercier ses messieurs de chez Google de proposer un moteur de recherches efficace.

Juste pour la blague si j’effectue la même requête dans Bing j’obtiens :

image

Sérieusement Microsoft, vos outils ne sont même pas capables d’aider vos utilisateurs ?

Bon allez passons à la solution

Bref si comme moi vous n’arrivez pas à empêcher le son de diminuer lorsque vous quittez Spotlite ou l’application “Music” officielle voici le trick:

  • Mettez-vous sur le bureau, et cliquez en bas à droite sur le petit speaker (avec le bouton droit de la souris):
    image

  • cliquez sur la deuxième entrée du menu (en partant du haut)
    image

  • Allez sur le quatrième onglet (Communications), et sélectionnez la dernière option (ne rien faire) et validez avec ok :
    image

  • à présent vous vous dites que le problème est réglé, naïf que vous êtes… Il vous reste encore à redémarrer le PC. Oui oui, vous avez- bien entendu, redémarrer le PC, vous savez comme au temps de Windows 95…

novembre 16, 2013 6 comments Lire la suite