Responsive Design

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:

www.initializr.com

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.

Advertisements
Tagged , ,

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: