My wife, daughter and I visited a friend/coworker over the weekend. We had a wonderful time getting to hang out with him and his wife, letting our nine month old roam their 1850’s plush carpeted farmhouse, and exploring the ancient basement, home to a toad, cobwebs, and chiseled stone walls.
But the day would not have been complete without my friend and I sitting down and coding some Ruby on Rails.
As he and I discussed the apps we’d been working on, I showed him a little about the Rails asset pipeline (will post about this in the future), while he showed me how he’d used a nifty css/javascript framework to set up responsive design for his site.
Now, responsive design is something I’d not been looking forward to integrating into my site. Although I have an excellent understanding of css and javascript/jquery, it doesn’t mean I’m fantastic at making it all look and work correctly, especially when it comes to making the site responsive to myriad of different screen sizes a developer has to worry about in this era of smartphones and tablets. So when my friend led me to the following site, I was both excited, and relieved:
If you haven’t tried initializr, you should check it out. You simply need to download and copy the boilerplate css/javascript, add it to your Rails project’s app/assets/css and app/assets/javascripts folders respectively, and make sure your view is loading the css and javascripts from the assets.
One easy way to do this is to add the following code within the <head> tag of view or layout:
<%=stylesheet_link_tag"application"%> <%=javascript_include_tag"application"
This will pull in all the javascript and css you have in your app/assets/css and /javascript folders for use in your view or layout. So after you have access to the css, simply add the appropriate classes to your container divs, navs, ect…, according to the css you downloaded from initializr, and watch the magic happen.
Another very popular CSS/JavaScript/HTML5 front-end framework you can utilize to help pretty up your site and make it responsive is the Twitter Bootstrap. Make sure to give it a try too as you research different ways to style your rails app. Also, feel free to comment and add links to on any other styling frameworks you use.
The Ruby Railroad 