6 ms·
The Ruby on Rails Tutorial, now with Twitter's Bootstrap
- instakill 15y agoWoohoo. 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?
- mhartl 15y agoThe 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 15y agoJust 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.
- mhartl 15y agoThe Bootstrap material starts in Chapter 5 (http://ruby.railstutorial.org/chapters/filling-in-the-layout?version=3.2#top http://ruby.railstutorial.org/chapters/filling-in-the-layout...).
- tmcdonald 15y agoIt's using my bootstrap-sass gem. [1] [1]: https://github.com/thomas-mcdonald/bootstrap-sass https://github.com/thomas-mcdonald/bootstrap-sass
- mikey_p 15y agoI'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?
- tmcdonald 15y agoIn 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 http://lesscss.org/#-namespaces
- aculver 15y agoThanks 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 15y agoAlso worth checking out, the free part of Railscast's Bootstrap Rails screencast two episoder: http://railscasts.com/episodes/328-twitter-bootstrap-basics http://railscasts.com/episodes/328-twitter-bootstrap-basics
- starfox 15y agoThis 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 15y agoThis 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 15y agoRails 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).
- apgwoz 15y ago"Due to popular demand," Wait? What??
- purephase 15y agoThe previous thread on the new version of this tutorial had a few commenters (and votes) on updating it to use Bootstrap.
- apgwoz 15y agofair 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.
- purephase 15y agoI 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.
- mhartl 15y agoThe 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.
- apgwoz 15y agoI 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.
- danso 15y agoInterested 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.
- mhartl 15y agoThere 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.
- breckinloggins 15y agohttp://wrangl.com/sass-v-less 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".
- danso 15y agoSure, 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 (?)
- aculver 15y agoThe asset pipeline introduced in Rails 3.1 includes Sass by default, which means nothing to configure if you use bootstrap-sass.
- rasur 15y agoLess 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.
- deleted 15y ago[deleted]
- jenius 15y agoThis makes me want to cry
- breckinloggins 15y agoElaborate? I'd love to know why. Is it because you're against bootstrap, or you don't like the entire tutorial, or...?
- hallnoates 15y agoVery glad to see this! Bootstrap saves us a lot of time.
- alexanderberman 15y agoThis is awesome! Thanks for providing such a valuable resources to Rails newbies!
- gcao 15y agoI 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 15y agoDevelopers 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 15y agoThe 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 15y agoGreat point mechanical_fish, that really sums up the reality of Bootstrap I think.
- EzGraphs 15y agoAgreed - 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 15y agoI 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.
- instakill 15y ago
- msluyter 15y agoI 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.
- mirceagoia 15y agoI 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?version=3.2 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-ubuntu-linux-mint/ http://www.mirceagoia.com/2011/11/ruby-on-rails-installation... ).
- deleted 15y ago[deleted]
- darksaga 15y agoI 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.
- mirceagoia 15y agoThank 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.
- Ecio78 15y agoI 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!
- RobertLysik 15y agoI'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 15y agoDo you have any estimation on when this latest version will be available in print?
- mhartl 15y agoThe 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 15y agoWhen 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 15y agoI have to reinvent myself, newer, better and with bootstrap, twitter of course
- steinbrenner 15y agodesigners are obsolete.
- DanielKehoe 15y agoMichael 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/ http://railsapps.github.com/
- freditup 15y agoI 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.
- webmanoffesto 15y agoThis is a great resource.
- geoffroy 15y agoThis tutorial is amazing, and even more amazing now. Thanks Michael.
- F_J_H 15y agoCan anyone recommend a similar tutorial covering one of the python web frameworks? (i.e. complete ecosystem - git, testing, deployment)