Finally Responsive!

Jul 3, 2014

I feel like I have been neglecting my own site for far too long. It really was time to change the layout of it to match the expectations of recent web layout standards. For a while now, everyone has been talking about responsive design and mobile first. So I figured it was time to apply it here as well.

I have never been a huge fan of Twitter's bootstrap framework. I felt like there is too much that comes with it and all websites ends up looking the same. I see the value of it and what I do like is the attempt to standardise a lot of common user patterns.

Another framework that is often compared to Bootstrap is Foundation. Foundation is a framework that suits myself much better. In some ways it is odd to compare the two since their purposes are somewhat different. Foundation does, just as the name suggests, act as a base from which you are intended to work from while Bootstrap offers a huge array of user patterns and design patterns from the start.

In a Rails application, it is very straight forward to get going with Foundation. All you need to do is the add the following to your Gemfile

gem 'foundation-rails'

And then you run the following command:

$ bundle exec rails g foundation:install

You will most likely get a question of wether you want to override your existing application.html. If this is a completely new project, then you can go ahead and do that. However, if you already have an existing layout then you might not want to lose it right away (even though the design is suppose to be revamped). In that case, press n to keep your existing one. The only thing you need to add to your layout anyway is the following inside the <head> tag:

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

and

<%= javascript_include_tag "vendor/modernizr" %>

I wont go in to detail on exactly how Foundation works, their documentation does that very nicely anyway. But I will give some examples on additions that I think is a good addition to almost any layout. In the example of Rails applications, the previous command I mentioned will have generated a sass file called foundation_and_overrides.scss which is a good place to add any additions you need.

A common thing you need to do in all layouts it to position elements vertically. To provide that functionality in a simple way, I have gotten into the habbit of adding the following set of classes:

/* Pushes the trailing elements down */
.p01 { margin-bottom: 1rem !important; }
.p02 { margin-bottom: 2rem !important; }
.p03 { margin-bottom: 3rem !important; }
...
.p15 { margin-bottom: 15rem !important; }

/* Pushes the current element down */
.t01 { padding-top: 1rem !important; }
.t02 { padding-top: 2rem !important; }
.t03 { padding-top: 3rem !important; }
...
.t15 { padding-top: 15rem !important; }

These classes are not something special for Foundation but what we can do is use the same concept and provide additional functionality to the Responsive way of styling. For example, if we add the following code to our stylesheet:

@media #{$small-up} {
    .small-p01 { margin-bottom: 1rem !important; }
    .small-p02 { margin-bottom: 2rem !important; }
    .small-p03 { margin-bottom: 3rem !important; }
    ...
}

@media #{$medium-up} {
    .medium-p01 { margin-bottom: 1rem !important; }
    .medium-p02 { margin-bottom: 2rem !important; }
    .medium-p03 { margin-bottom: 3rem !important; }
    ...
}

@media #{$large-up} {
    .large-p01 { margin-bottom: 1rem !important; }
    .large-p02 { margin-bottom: 2rem !important; }
    .large-p03 { margin-bottom: 3rem !important; }
    ...
}

Then we could write the following in our views to achieve different margins on the same element, depending on the size of the screen.

 <div class="small-p01 medium-p02 large-p03">Lorem Ipsum</div>

If you resize the browser window on a page that uses this code, then you can see how the element jumps up and down as the width increases and decreases.