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)

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.

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

grunt 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.

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.

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.

The post Speed up your CSS framework install with Yeoman appeared first on shoogle designs' blog.