The Ruby on Rails Tutorial, now with Twitter's Bootstrap(news.railstutorial.org)
news.railstutorial.org
The Ruby on Rails Tutorial, now with Twitter's Bootstrap
http://news.railstutorial.org/ruby-on-rails-tutorial-now-with-twitters-boot
57 comments
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.
Great point mechanical_fish, that really sums up the reality of Bootstrap I think.
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.
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.
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.
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.
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/
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/
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.
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... ).
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.
Thank you very much for using it.
I had my share of frustrations installing RoR on Linux so I am glad my tutorial is helping others.
[deleted]
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!
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...
[0] http://ankisrs.net/docs/FrequentlyAskedQuestions.html#_how_c...
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.
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.
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).
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).
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.
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.
Also worth checking out, the free part of Railscast's Bootstrap Rails screencast two episoder: http://railscasts.com/episodes/328-twitter-bootstrap-basics
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.
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?
It's using my bootstrap-sass gem. [1]
[1]: https://github.com/thomas-mcdonald/bootstrap-sass
[1]: https://github.com/thomas-mcdonald/bootstrap-sass
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!
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?
In general I wait until the new version is merged into master, and I use GitHub's compare view to see all the changes between the latest version and the previous one, which I keep open on one screen and go through each file updating the bits that have changed. For the Javascripts I just copy the whole folder over, since I don't fiddle with those.
The main exception to this was for 2.0, which had a separate branch for a while so that people could still use bootstrap-sass while updating their application to the new syntax. When 2.0 was merged into master, since it had been under such heavy development I reconverted the entire codebase.
There are a few quirks with the conversion from Less to SCSS, but these tend to be few and far between, and are usually down to me missing a variable somewhere. The main one is the use of namespaced mixins[1]. SCSS doesn't support this, so I have to prefix/suffix the namespace to each mixin within the namespace. Aside from that, and method names/variable notation, there (appears to be, can't speak authoritatively since I haven't really used Less) little difference between the two.
[1]: http://lesscss.org/#-namespaces
The main exception to this was for 2.0, which had a separate branch for a while so that people could still use bootstrap-sass while updating their application to the new syntax. When 2.0 was merged into master, since it had been under such heavy development I reconverted the entire codebase.
There are a few quirks with the conversion from Less to SCSS, but these tend to be few and far between, and are usually down to me missing a variable somewhere. The main one is the use of namespaced mixins[1]. SCSS doesn't support this, so I have to prefix/suffix the namespace to each mixin within the namespace. Aside from that, and method names/variable notation, there (appears to be, can't speak authoritatively since I haven't really used Less) little difference between the two.
[1]: http://lesscss.org/#-namespaces
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.
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.
The Bootstrap material starts in Chapter 5 (http://ruby.railstutorial.org/chapters/filling-in-the-layout...).
This is awesome! Thanks for providing such a valuable resources to Rails newbies!
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.
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.
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".
Particularly: sass == Ruby. less == JavaScript.
I'm not saying that's good or bad, but it's probably "why".
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 (?)
The asset pipeline introduced in Rails 3.1 includes Sass by default, which means nothing to configure if you use bootstrap-sass.
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.
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.
Very glad to see this! Bootstrap saves us a lot of time.
Can anyone recommend a similar tutorial covering one of the python web frameworks? (i.e. complete ecosystem - git, testing, deployment)
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.
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!
This tutorial is amazing, and even more amazing now. Thanks Michael.
I have to reinvent myself, newer, better and with bootstrap, twitter of course
This is a great resource.
[deleted]
designers are obsolete.
"Due to popular demand,"
Wait? What??
Wait? What??
The previous thread on the new version of this tutorial had a few commenters (and votes) on updating it to use Bootstrap.
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.
The full "rewrite" took less than two weeks, and much of that was redoing screenshots and mockups (easy, dull work).
The motivation for the change was to please readers. Happy readers make for a happy author. Among other things, happy readers buy ebooks and screencasts. For a free online book, the Rails Tutorial makes a surprising amount of money. I'd like to keep that record going with the 2nd edition.
The motivation for the change was to please readers. Happy readers make for a happy author. Among other things, happy readers buy ebooks and screencasts. For a free online book, the Rails Tutorial makes a surprising amount of money. I'd like to keep that record going with the 2nd edition.
I think I misunderstood this whole thing! The tutorial was rewritten to make use of bootstrap instead of blueprint. Not the rails tutorial site was rewritten to be designed using bootstrap. It all makes sense now.
I think the term re-written is a bit over-the-top. I've gone through to chapter 10 of the tutorial, and the focus is largely on rails/ruby.
Blueprint did not factor a great deal in the original version and, honestly, Bootstrap is probably more relevant at this point.
Blueprint did not factor a great deal in the original version and, honestly, Bootstrap is probably more relevant at this point.
I've added a link to the relevant HN discussion. Also, lots of people on Twitter asked for a Bootstrap version.
This makes me want to cry
Elaborate? I'd love to know why. Is it because you're against bootstrap, or you don't like the entire tutorial, or...?
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.