Derby.js – Integrating Twitter Bootstrap into your Application

As I’ve mentioned in a previous post, I’m a big fan of Twitter Bootstrap.

Lately I’ve been playing been with JavaScript and Derby. I want to integrate bootstrap with the POC site I’m building, and the creators of Derby have already figured out a way to do this.

Step 1: Add a dependency to the derby-ui-boot package, which is a Derby component library based on Twitter Bootstrap.

{ 
....
  "dependencies": {
    "derby": "*",
    "derby-ui-boot": "*",
    "express": "3.0.0beta4",
    "gzippo": ">=0.1.7" 
  },
....
} 

Step 2: Update your project with the downloaded ui-boot code

This is as simple as running
npm update
in your project folder, which will read package.json, and download any missing dependencies (like the derby-ui-boot entry you just added).

Step 3: Add the derby-ui-boot component to your project.

At the top of your application JavaScript (for me, this is the file located at /lib/app/index.js), after your var derby = require("derby"); line, add the following line of code to your file:

var derby = require("derby");
derby.use(require('derby-ui-boot'));

Step 4: Profit!

That should be it for you. When you load your application up, the default twitter bootstrap css and js should have loaded. To correctly style your application, you’ll have to follow the guidelines laid out here and here.

Why use Twitter Bootstrap?

I’m a huge fan of Twitter Bootstrap, the simple and flexible CSS, HTML, and JavaScript user interface framework.

And what’s not to like? Out of the box, you’ll get:

  1. Cross-Platform Support
  2. IE 7 to IPhone and everything in between (sorry IE6)

  3. 12-Column Grid
  4. A good grid system takes most of the pain out of laying out your site. Getting labels, inputs, and other pieces of your ui to layout consistently and gracefully across different browsers at different resolutions can be one of the most painful parts of web development. Save yourself the work of trying to figure this stuff out on your own. The twitter kids have it under control.

  5. Responsive design
  6. One of my favorite parts. If you use the css/html correctly, as the size of your browser changes (you can see this just by resizing the browser on your desktop), the layout adapts to display the information in a consistent manner as the screen size drops. Want to hide a left nav bar if your site is viewed on a tablet? No problem. Want to hide the menu bar at the top of your site if viewed on a phone? Too easy.

  7. Baked In Best Practices
  8. Basically, if you want to get anything out of Bootstrap, you’ll have to adhere to their best practices. Following someone’s best practices is better than just hacking away at your CSS.

  9. jQuery Plugins
  10. Great interactive components, built on everyone’s favorite JS framework, that look and interactive fantastically with the rest of Bootstrap.

  11. LESS Infrastructure
  12. I am a huge proponent of LESS/SASS/Stylus etc. If you’ve never used these type of CSS frameworks, they allow you to do all sort of great software developy things with your CSS. Like set variables in one place for all the colors and sizes used by your app. Or re-use common styles in multiple places without copy and paste. Or only display certain styles if certain conditions are met.

So what are you waiting for? Check out some of the docs here and here to get started.

jQuery UI Bug – 1.8.16, buttonset() method

I love to find bugs in good software!

Came across a little jQuery UI bug today. It’s only for one browser, but it always excited to be able to create an easy-to-replicate bug.

The bug is small – it deals with the buttonset() method. The buttons, instead of having the rounded corners on the outside, have the rounded corners on the inside. Not exactly critical, but it definitely made the UI I was working on look strange.

If you have Chrome, and are dealing with jQuery 1.6.3 and jQuery UI 1.8.16, check out the bug here:

http://jsfiddle.net/AJbff/14/