by Flo Preynat

I have finally taken the time to give Yeoman a go. “Finally” as it had been on my to do list for a while but the current projects and some deserved vacation had kept me away from it.

For those who don’t know, Yeoman is a collection of tools and best practices helping designers and developers in their webapp development process.

First of all, let me point out that Yeoman is made by awesome folks (among those feature the likes of Paul Irish and Addy Osmani), and is basically made of three tools:

  • Yo for web application scaffolding which utilizes scaffolding templates refered to as generators
  • Grunt for building, previewing, and testing
  • Bower for dependency management

Yeoman Install

Making sure that your system does include Node, and Git, open your terminal and run the following commands to install yeoman

npm install -g yo
npm install -g generator-webapp

If all went well, you should be able to see a version number when running:

yo --version

Twitter Bootstrap install

Right, we are ready to start using Yeoman and reduce dramatically our css framework installation time.
In the terminal, simply type:

yo (refrain from adding biatch behind)

Yeoman install

Choose to Run the webapp generator. Yeoman will state that it uses HTML5 Boilerplate, jQuery and Modernizr out of the box, and it will ask you to answer a few questions on your webapp install.

I usually go with the following:

[?] Would you like to include Twitter Bootstrap for Sass? Yes
[?] Would you like to include RequireJS (for AMD support)? No
[?] Would you like to use autoprefixer for your CSS? No

Open your project in Sublime text, you will see that in just a few yeoman commands, you already have quite a few things going on.

A nice project structure to start with a dedicated app folder, some components (in app/bower_components) including by default jquery and modernizr, and the requested twitter bootstrap.

Yeoman file structure

Now comes the beauty of it all. In your terminal, type the following command:

grunt server

Yeoman local web server

And voila. You don’t even have to use mamp and create a local web server, Yeoman will do it for you with its grunt component.
Go ahead and make some changes to your index file. Upon Save, the browser will be updated without having to install/trun on Livereload, or use Codekit.

Note that you will get a conflict if you have a Livereload package installed in your Sublime Text. Therefore use your package control to uninstall it if you do.

Right, so in no time, we have a Sass-ready twitter bootstrap-based website running, how good was that?!

Package management with Bower

The other beauty of Yeoman is how easy installing and uninstalling any component has become.

Look for the .git of your choice by running a search:

bower search

…will show you all components, while:

bower search angular

…will show you all angular-related gits.

Uninstalling is as easy, and since we want to install foundation and get rid of twitter bootstrap, let’s uninstall bootstrap now.

Simply run:

bower uninstall sass-bootstrap

In a tick, you will have your wish granted, and your file structure updated, bootstrap having disappeared from the app/bower_components folder.

If you run grunt server again, you will get an error and your project won’t compile.

To see what the issue is, run:

grunt server --force

Project compiles with errors, and you can see that your scss is still referencing some twitter bootstrap files (since removed).
Clear your scss file and also remove the bootstrap js files at the bottom of your index.html.

Foundation install

Likewise let’s install Zurb’s CSS framework, by running:

bower install foundation

A foundation folder has now made its way into your bower components.

Go to the Foundation templates and copy one of the html template and paste into the body of your index.html.

Once saved, you’ll get an un-styled foundation template on screen. Reference the foundation style by incorporating its scss to your main.scss.
There might be a better way to do it, but I usually go with:

@import "../bower_components/foundation/scss/foundation";
@import "compass"; // you can aslo throw your compass import in there

Boom! Sass-ready Compass-ready Foundation framework installed.

Yeoman Foundation install

Build time

Ready for production? Let’s build. Ctrl+C in your terminal to stop the local server. and run:

grunt

This is when Gruntfile.js does its magic and builds a new dist folder with all production files in it, ignoring all the unneccessary files (such as the git or the scss files).

To run the dist folder with grunt, type:

grunt server:dist

This time, you’ll end up with a similar-looking project, but if you look under the hood, and view source, you’ll see a website ready for production, with properly-cached and minified css/js files.

You’ve got to love the simplicity of Yeoman!

Drop a line in the comments if you’re a Yeoman fan, and know more tips and tricks on the subject.

Update Aug 26th 2013

Since I wrote this post, Addy Osmani has released an awesome video on the future of Yeoman. Check it out to see what’s cooking for us Yeoman users. Also note that a stable Yeoman 1.0 has just been released.

Also note the new one-step install, generator-webapp now taking care of the install of yo/grunt/bower for you.

My name is Flo Preynat and I am the freelance webdesigner and developer behind shoogle designs. I live in France and specialize in responsive web design. Give me a shoogle or get in touch with me on twitter.

Most Recent Posts

Special Recent Posts

Sip: a color picker refreshingly simple indeed

Sip: a color picker refreshingly simple indeed

July 10th, 2014

I've just discovered Sip, a color picker app for Mac users. "Just discovered" since it's been around[...]

Perch – the CMS that does not pollute your web design workflow

Perch - the CMS that does not pollute your web design workflow

July 7th, 2014

I have recently finished a project based on Perch, the clever 'little' CMS created by edgeofmyseat.c[...]

Responsive video code snippet

Responsive video code snippet

June 29th, 2014

More of a reminder than a pure detailed blogpost, this code snippet will be my go-to resource when I[...]

Project Naphta: a nifty extension to play with text embedded in images

Project Naphta: a nifty extension to play with text embedded in images

June 9th, 2014

We've all been there. You want to select a good chunk of text on a website, only to realise you can'[...]

Free photos for your web design projects

Free photos for your web design projects

June 4th, 2014

Nothing beats using a real professional photographer when working on a cool project. You can be the[...]

Comments

  1. I’ve heard a lot about Yeoman, but I’ve never actually put it to the test. Super informative post though- thanks for sharing! Definitely will be looking more into it now and probably trying it out for myself.

  2. I still need to pick up Yeoman and have a play, after reading lots of recent posts that rave about it.

  3. Subash says:

    Very nice post. Yeomoan is very good at what it does.

  4. Bob says:

    After spending most of my sunday learning Yeoman, my conclusion is that it is an overhyped, tangled mess.

    To create a simple project you have to learn at least three tools: yo, bower and grunt. You also have to install node. And you have to learn npm. So that’s five tools already.

    For the setup in the above article, we also have to have compass installed. And when something goes wrong with that, we should probably learn compass, which is poorly documented. And when finally get the foundation sass files, the directory is full of unneccessary clutter. Oh yeah, adding compass makes it six tools.

    I guess that if someone is making really complicated apps with complicated dependencies, then it might be worth spending hours learning the ins and outs of yeoman/bower/grunt. But I don’t see how that toolkit could possibly save time over using wget and bash.

    I guess I might take another look at yeoman sometime. Maybe the next time I feel like being overwhelmed and confused by complicated cruft despite needing a simple outcome.

  5. Hi Bob,

    It must suit some people’s workflow, looking at its growing popularity. Don’t dismiss it from day one.

    Yeoman is a collection of tools by essence, and there are a few dependencies (node, npm), but remembering a few simple commands to get a project going can’t be compared to “learning a language” such as html, css or javascript.

    Sass and Compass fit perfectly in my personal development workflow. This tutorial is, I guess, responding to MY workflow needs, but I’m sure you can make great use of Yeoman, and more importantly the way YOU want.

    Thanks for you comment,
    Flo

  6. skube says:

    Merci Flo! This was a great post.

    I, like Bob, am finding the learning curve a bit much – especially since I have never really worked in the terminal or with abstractions such as Sass. There have been more than a few days of frustrations and errors but I’m still plugging away and posts like these help immensely.

    It would be great if you could do more with other examples :)

  7. sb says:

    bower install foundation failed today. Maybe because version 5 just released?

  8. Serge says:

    Good post. Thanks for that. I’m trying Yeoman right now. My configuration includes Bower, Bootstrap and Sass (without Compass). The thing is that Sass compiler is not working for me. I’ve tried adding one watch setting to Gruntfile.js:

    sass: {
    files: [‘/styles/{,*/}*.{scss,sass}’],
    tasks: [‘sass’]
    },

    No luck. Do you happen to know that needs to be done to run sass compiler?

    Thanks heaps!

    • Hi Serge,

      i dont have the full pic here (as in error message nor a view of the full gruntfile.js), but should you not tell it where to put the css after stating ‘take all the scss and sass files’? Does it go into the same folder as a css by default? This I don’t know.

      Check my grunt boilerplate, it might be of help…

      cheers mate.
      flo

  9. hello there, I found your article very useful, I’m learnin yeoman, I’m trying to include a custom css for one of my views, how could i do that? thanks in advance.