Configure CircleCI for Go

We’ve settled on a `circle.yml` for Go projects.

Adding Twitter’s Bootstrap CSS to your Rails app

November 10, 2011

Bootstrap in action, as demoed in Luca Pette's article

Updated Feb 2012 for Bootstrap 2.

Twitter’s new CSS toolkit, Bootstrap, is all the rage these days. I explain how to get the CSS, and optionally the mixins and the JavaScript, into your Rails app.

“How do I serve Bootstrap through Rails 3.1’s asset pipeline?”

Just add Ken Collins’s (@metaskill’s) less-rails-bootstrap gem (announced recently on his blog) to your Gemfile:

1	`gem 'less-rails-bootstrap'`

Require it in your app/assets/stylesheets/application.css:

1	`*= require twitter/bootstrap`

Done. You now have Bootstrap 2 working in your Rails app. :-)

By the way: Did you know that Bootstrap is written in LESS, a stylesheet language like SCSS?

“Ugh, I hate LESS. Can I get Bootstrap as plain CSS please?”

That’s OK, not everybody likes LESS. Behind the scenes, less-rails-bootstrap transparently compiles the Bootstrap LESS files into CSS through Rails’s asset pipeline (using the less-rails gem). This means that there is no scary client-side compilation with less.js (like the LESS website advertises). And on the Rails side, you can just carry on using SCSS. In other words, Bootstrap by default acts like any regular CSS library – all the LESS stuff is hidden from you.

“I love LESS. Can I use the Bootstrap mixins in my LESS code?”

Sure you can. Just import the mixins and variables in any stylesheet file ending in .less (like posts.css.less):

@import "twitter/bootstrap/variables";
@import "twitter/bootstrap/mixins";

div.post {
   color: @yellow;  // <-- using variables
   #gradient.vertical(@black, @blue);  // <-- using mixins
}

Warning: Do not get confused about requiring vs importing:

Use = require twitter/bootstrap at least once (typically in application.css) to get all the CSS rules that come with Bootstrap. The files will be processed through Sprockets (Rails’s asset handler), which guards against duplicate inclusion. If you tried to require the mixins or variables, it would have no effect, since Sprockets compiles them separately from your stylesheets.
Add the two @import lines above to every LESS file in which you want to use Bootstrap mixins or variables. As you can verify by inspecting the CSS output, importing them has no effect (i.e. no CSS rules are generated) until you actually use the mixins and variables in your own CSS rules. If you tried to @import the entire “twitter/bootstrap” library, it would show up multiple times in your compiled CSS assets, because Sprockets can’t guard against duplicate inclusion when you use @import.

To summarize, require the entire toolkit, and @import the mixins and variables.

“Can I use Bootstrap’s JavaScript plugins?”

Easy enough. Add this to your application.js:

1	`//= require twitter/bootstrap`

The plugins load through jQuery’s .ready, so be sure to wrap your own code as well:

1
2
3

$(function() {
  // ...
});

“Now how do I get started using Bootstrap in my layouts and views?”

Try adding a button in any view file – it should be rendered pretty:

1	`<input type="button" value="Click me" class="btn primary">`

Or try adding a black navigation bar to your layout:

<div class="navbar navbar-fixed-top">
  <div class="navbar-inner">
    <div class="container">
      <a class="brand" href="/">Whizboo App</a>
      <ul class="nav">
        <li class="active"><a href="/">Home</a></li>
        <li><a href="/about">About</a></li>
      </ul>
      <ul class="nav pull-right">
        <li><a href="/sign_in">Sign In</a></li>
      </ul>
    </div>
  </div>
</div>

Fore more inspiration, check out Luca’s article about using Bootstrap with Rails.

“I want more explanation. / I heard there is a Sass version of Bootstrap.”

Check out ”Twitter Bootstrap, Less, and Sass: Understanding Your Options for Rails 3.1” on RubySource!

[…]

Aliasing resources in Ruby on Rails

June 23, 2009

Earlier today, a friend working on a project asked me how we approached routes on our website. If you take a quick peak at our website, you’ll see that we have URLs like so:

http://planetargon.com/
http://planetargon.com/who-we-are
http://planetargon.com/who-we-are/robby-russell
I couldn’t remember where I came across this before and wasn’t quickly finding it in the Ruby on Rails API, so decided that I’d do a quick write up on it.

When we launched our new site a few months ago, we were working off an existing code base. We have a model named, TeamMember and a corresponding controller. When we decided to come up with new conventions for our URL structure, we opted to ditch the normal Rails conventions and go our own route. What we weren’t sure about was how to alias resources in our routes nicely. After some digging around, we came across the :as option.

So, our route was:

  map.resources :team_members

Which provided us with:

/team_members
/team_members/robby-russell

We simply added :as => 'who-we-are' to our route:

  map.resources :team_members, :as => 'who-we-are'

...and we got exactly what we were looking for in our URLs.


* /who-we-are
* /who-we-are/gary-blessington

If you look at our site, you’ll notice that we did this in a few areas of our application so that we could define our own URL structure that was more friendly for visitors and search engines.

Anyhow, just a quick tip for those who want to change up their URLs with Ruby on Rails.

p.s., if you know where I can find this documented, let me know so that I can provide a URL in this post for others. :-)

[…]

The Ruby Rails Aggregator