The Ruby on Rails Tutorial, now with Twitter's Bootstrap

http://news.railstutorial.org/ruby-on-rails-tutorial-now-with-twitters-boot

by mhartl • 14 years ago

271 55 14 years ago

news.railstutorial.org

instakill2• 14 years ago

Woohoo. Great timing. Just started re-doing this to learn 3.2. Do you inject bootstrap into the app or use Seyhunak's twitter-bootstrap-rails gem?

mhartl7• 14 years ago

The book uses the excellent bootstrap-sass gem. I have personal assurances from the gem's author (tmcdonald) that he will keep it up-to-date with the latest changes in Bootstrap.

ImprovedSilence• 14 years ago

Just out of curiosity, where in the tutorial do you start including bootstrap material? I'm currently in the middle of chapter 4, and am planning to hammer out as much of the rest I can this weekend.

tmcdonald2• 14 years ago

It's using my bootstrap-sass gem. [1]

[1] https://github.com/thomas-mcdonald/bootstrap-sass

mikey_p• 14 years ago

I've been wanting to use Bootstrap with some other CSS syntaxes for awhile, and I was wondering how you manage the conversion from less to scss and stay up to date with the latest Bootstrap changes?

aculver2• 14 years ago

Thanks Thomas! Used your gem in a project recently when we migrated an older app from a Theme Forest layout to Twitter Bootstrap. It wasn't immediately obvious which gem was the best, since it looks like a few people set out to do the same thing, but yours was the only one that was up-to-date and easy to install. We've also been getting great mileage from rails_admin, which uses your gem as well. Thanks for doing this and sticking with it!

jschuur• 14 years ago

Also worth checking out, the free part of Railscast's Bootstrap Rails screencast two episoder: http://railscasts.com/episodes/328-twitter-bootstrap-basics

starfox• 14 years ago

This is why I stick with Rails; for the mindshare. There are many reasons to be critical of Rails, but the bottom line is that other people generously contribute work like this on a regular basis, making me instantly more valuable to employers or clients.

tikhonj• 14 years ago

This is a good point, and it's one of the main reasons I prefer open source in general: this is true for almost all fairly active open source projects. However, I'm not sure how this differentiates Rails from some of the other popular web frameworks.

lunaru• 14 years ago

Rails is now pretty old (in tech years) and one reason for active participation and contribution to the community is that the Rails team continues promote forward movement in the framework. So Rails is also always new.

A lot of the stuff people moan about (e.g. lack of backwards compatibility and constant breaking changes) is also what keeps it fresh. It's not hard to introduce new best practices because the old ones are continually tossed out. This can't be said for a lot of open source projects that value stability over change. (For some projects, stability is rightfully more important).

apgwoz3• 14 years ago

"Due to popular demand,"

Wait? What??

purephase2• 14 years ago

The previous thread on the new version of this tutorial had a few commenters (and votes) on updating it to use Bootstrap.

apgwoz3• 14 years ago

fair enough, but I still question why a tutorial needs to be rewritten to make use of a different CSS framework. Are there that many people forking this tutorial that they want something cleaner to work with? I just don't get it.

mhartl7• 14 years ago

I've added a link to the relevant HN discussion. Also, lots of people on Twitter asked for a Bootstrap version.

danso2• 14 years ago

Interested in the rationale to choose bootstrap-sass over bootstrap-less. I chose the latter, though can't say I know enough about the divide to feel strongly one way or the other. It works well enough.

mhartl7• 14 years ago

There were several reasons for choosing bootstrap-sass. For one, lots of readers recommended it. Moreover, in an introductory tutorial, I wanted to stay as close to the default asset pipeline as possible, which meant erring on the side of Sass. I also personally have a lot more experience with Sass (although, to be fair, LESS is very similar). Finally, the author of the bootstrap-sass gem (Thomas McDonald) got in touch with me and assured me that he plans to keep it up-to-date as Bootstrap itself changes.

breckinloggins2• 14 years ago

http://wrangl.com/sass-v-less

Particularly: sass == Ruby. less == JavaScript.

I'm not saying that's good or bad, but it's probably "why".

danso2• 14 years ago

Sure, I guess that simplifies things from the tutorial-user's standpoint...I had just wondered about the state of the sass maintainer keeping up with bootstrap updates. Though I'm sure bootstrap changes come infrequently enough that that's not a huge burden (?)

aculver2• 14 years ago

The asset pipeline introduced in Rails 3.1 includes Sass by default, which means nothing to configure if you use bootstrap-sass.

rasur• 14 years ago

Less works well if you're using an architecture that will run node.js, since the recommended way generally seems to be: "change code in .less files, process with some node based javascript processor".

Don't misunderstand - It's not impossible to use less with other non-node.js based systems, but it is a massive PITA. There's a handy gem "less-rails-bootstrap" which wraps twitters bootstrap files and integrates with the Rails asset pipeline, but again, you should avoid this if you're not running on an up-to-date Intel system, since it has a dependency on "therubyracer" gem (which is V8 for ruby).

I have been using SimpLESS a little bit in the recent past, but it does choke on some of the bootstrap less files, and I haven't had the time to fork and rebuild it with a more up to date less library.

I think if I was coming to bootstrap now rather than a few weeks ago, I'd have chosen the sassified version rather than less, but fortunately I have an intel system to abuse, so all is not completely lost.

jenius• 14 years ago

This makes me want to cry

breckinloggins2• 14 years ago

Elaborate? I'd love to know why. Is it because you're against bootstrap, or you don't like the entire tutorial, or...?

hallnoates• 14 years ago

Very glad to see this! Bootstrap saves us a lot of time.

alexanderberman• 14 years ago

This is awesome! Thanks for providing such a valuable resources to Rails newbies!

gcao• 14 years ago

I think Rails 3 has laid a good foundation to build next generation of web applications, or back end of web apps. With introduction of Asset Pipeline and built-in support of CoffeeScript/Sass etc, it is a lot easier to develop in Rails than before. The performance is still not ideal though.

joedev• 14 years ago

Developers moaning about Bootstrap have fallen into the common trap of seeing apps through developers' eyes.

Please consider that: 1. Almost no one in the world has heard of Bootstrap. Though it's captured our mindshare as developers, most of our users will not know nor care if the app is Bootstrap or not. 2. The vast majority of web apps still will not be Bootstrap apps.

Basically none of the general public will say "Hey, this is a Bootstrap'ed application, I'm not using it." They just do not know nor care what Bootstrap is. If it looks professional and works as they expect, they will be happy. If they're happy, I'm happy.

mechanical_fish• 14 years ago

The moans are a useful sign of ripeness. So few things are great and tenacious enough to both earn and endure the moans of fashionable early adopters.

rjsamson• 14 years ago

Great point mechanical_fish, that really sums up the reality of Bootstrap I think.

EzGraphs• 14 years ago

Agreed - I am a dev and a bit sick of seeing Bootstrap splashed across quickly designed sites. That said, I demoed a site I built using Bootstrap recently to some business users and was complimented on my design ability.

leoedin• 14 years ago

I regularly read HN, and I like to think I'm generally aware of web development stuff, and I hadn't even heard of Bootstrap until the for/against argument blew up on HN over the last few days.

If I haven't heard of it, none of my friends have. Out of the hundreds of people I know, I'd imagine possibly one of them has heard of Bootstrap.

Unless your startup target is web developers, nobody will have any clue what you're using as your UI kit, but they'll be pleased when things are where they normally are.

instakill2• 14 years ago

This is true. How many people use JQuery UI? Millions. How many regular folk complain that widgets looks similar? None. In fact they appreciate the standardization because there's less cognitive workload for them.

msluyter• 14 years ago

I think this tutorial is a treasure. It's a great introduction to the entire rails ecosystem, including TDD, git, heroku, and the like. I went through the 3.0 version a while ago, but so slowly (as in, a chapter every couple of weeks) that I forgot a lot of it. To those like myself, working through this in your off hours, I recommend keeping Anki (or equivalent) open and adding notes as you go.

mirceagoia2• 14 years ago

I am proud to say it mentions my Ruby on Rails installation guide for Ubuntu and Mint here: http://ruby.railstutorial.org/ruby-on-rails-tutorial-book?ve... (the guide itself is here http://www.mirceagoia.com/2011/11/ruby-on-rails-installation... ).

darksaga• 14 years ago

I actually used it when I was getting going with Rails. Trying to install rails on Windows was a nightmare. Your tutorial was so easy to follow and was invaluable right after I had switched over to Mint from Mandriva.

Ecio78• 14 years ago

I agree, I had the same problem: I started reading it some months ago but not with the right attitude to do everything, complete it etc.. and then I stopped (not because of lacks in the tutorial but because of me). Now i'm attending Coursera's Saas Class and I'm sort of forced to do stuff in order to complete homeworks (so i started using git, registered on github and heroku etc..) I think that after the course I'll come back to this new version of the tutorial, Thanks Michael!

eddie_the_head• 14 years ago

And if you do keep notes in Anki, please publish and share[0] them so that others can use them to study from.

[0] http://ankisrs.net/docs/FrequentlyAskedQuestions.html#_how_c...

RobertLysik• 14 years ago

I'm glad I saw this, I had to clear my cached pages to see that Blueprint was swapped out in Chapter 5 for Bootstrap. Now this will give me another chance to play with Git :) This was already a brilliant tutorial, but this has made it even better since I was looking for an opportunity to experiment with the Bootstrap framework, thanks!

JM212• 14 years ago

Do you have any estimation on when this latest version will be available in print?

mhartl7• 14 years ago

The print edition is typically available 4-6 months after the final files are submitted to the publisher. Yes, that seems like a long time to me, too.

kcima• 14 years ago

When I tutor beginners in Rails, I always make them walk through this tutorial first. Step by step. Without using copy & paste.

I really like tutoring and I am more than happy to help folks who want to build the next big thing.

However, first I make people write down their idea, set it aside, and forget about it. I tell them not to try to adapt this tutorial to their own idea, but just follow it to the letter and build the example application. It doesn't take that long.

Before anything, you need to know what you need to know. This tutorial has been and continues to be a great way to learn much of what you need to know... then you can go build the next big thing.

desireco42• 14 years ago

I have to reinvent myself, newer, better and with bootstrap, twitter of course

steinbrenner• 14 years ago

designers are obsolete.

DanielKehoe• 14 years ago

Michael Hartl's book stands out because he keeps it current, a challenge given fast-evolving Rails development practices.

Last year I set out to create a set of example apps to bridge the gap between Michael Hartl's excellent tutorial and the piecemeal advice found on experts' blogs and Stack Overflow. The example apps are accompanied by tutorials (walkthroughs, really, not as thorough or informative as Hartl's book) and show how to set up a Rails app with authentication libraries (either Devise or OmniAuth), RSpec, Cucumber, and popular options such as MongoDB or Haml. Each has a companion application template that serves to generate a starter app. Like Michael Hartl, my contributors and I have seen increasing interest in Twitter Bootstrap and recently updated the app templates to offer a choice of front-end frameworks, including Zurb Foundation and Twitter Bootstrap (either Less or Sass versions). It seems Twitter Bootstrap for the front end is catching on -- fast -- for the same reasons Rails has succeeded on the back end: convention over configuration and a well-crafted implementation of commonly-used functionality.

Here are the RailsApps example apps, now with Twitter Bootstrap: http://railsapps.github.com/

freditup2• 14 years ago

I just finished this tutorial yesterday actually. I personally don't care so much about the web design aspect as much as the RoR logic and techniques. Are there any major things in the new version in that department that I should be aware of? Edit: I loved the tutorial by the way - thank you so much for putting the time and effort in to writing it.

mhartl7• 14 years ago

Nope, the logic is just the same. So many people requested Bootstrap that I determined the market demand warranted the extra effort. But given your situation and goals, it sounds like there's no need for you to re-do the tutorial.

freditup2• 14 years ago

Thanks! Keep up the great work!

webmanoffesto• 14 years ago

This is a great resource.

geoffroy• 14 years ago

This tutorial is amazing, and even more amazing now. Thanks Michael.

F_J_H• 14 years ago

Can anyone recommend a similar tutorial covering one of the python web frameworks? (i.e. complete ecosystem - git, testing, deployment)

The Ruby on Rails Tutorial, now with Twitter's Bootstrap

Related Stories