Skip to content Skip to navigation

Overriding Open Framework Styles: Responsive styling

In this post, I continue my series on how to override Open Framework's default styles to get a more custom look-and-feel on your site. Last time we looked at how to override our block styles, sidebar menus, and region styles. Today I'm going to share how to test for and override responsive styles on your site.

Before we dive in, make sure you are familiar with the steps we took in using Firebug (or Chrome dev tools) and CSS Injector. Here's another post I wrote that introduces CSS Injector and Firebug in more detail.

Understanding Responsive CSS

So, what do I mean by responsive? Responsive means that your design adjusts to work in all screen sizes, big or small. The Open Framework theme by default has responsive styles built in, so when we are overriding styles in Open Framework, we have to also remember to check and override the responsive styles.

Styles become "responsive" when they are placed inside of a media query. A media query looks like this:

@media (max-width: 1199px) {
   ... your CSS here ...
}

What this is saying is this specific chunk of CSS (inside the media query) will be loaded ONLY when the screen size is 1199px wide or smaller. This means you can set a default style, like a page background color for example, outside of the media query, and then override that style for a particular screen width, or breakpoint as we call it. Here's an example where the body background color changes once the screen size is 1199px or smaller:

body {
   background: blue;
}

@media (max-width: 1199px) {
   body {
      background: purple;
   }
}

You can write your media queries in a number of ways (max-width, min-width, etc.), but what we will want to do is match the way that media queries are written in Open Framework so that we seamlessly override those styles.

Open Framework's Media Queries

Open Framework several media queries that we will want to be able to use when we're overriding styles. The Open Framework user guide documents those media queries, but I will also paste them here for reference:

/* Wider than desktop */
@media (min-width: 1200px) { ... }

/* Landscape phone to desktop */
@media (max-width: 1199px) { ... }

/* Landscape phone to landscape tablet */
@media (max-width: 979px) { ... }

/* Small desktop */
@media (min-width: 980px) and (max-width: 1199px) { ... }

/* Portrait tablet to landscape tablet */
@media (min-width: 768px) and (max-width: 979px) { ... }

/* Landscape phone to portrait tablet */
@media (max-width: 767px) { ... }

/* Landscape phones and smaller */
@media (max-width: 480px) { ... }

Let's take a look at a real-world example of how these are helpful to us.

Overriding OFW Responsive Menu Styles

When last we left our website example, it looked like this:

Example site - wider screen

Now, if I shrink the width of my browser a bit, we see a couple things change:

Example site - smaller screen

What we notice is the that the menu has collapsed into a "hamburger" button (as some call it), and our sidebar blocks now are stacking side-by-side above our content. Now, the sidebar blocks stacking in this way is to be expected based on the way that Open Framework regions and blocks behave (learn more on the Open Framework user guide). But the menu we will want to override so that the button matches our custom styles.

Here's what the responsive menu looks like when it's expanded:

Expanded responsive menu

Some things we will want to change are the "hamburger" button styles, and the styles of the links themselves. Let's look at how we can do that.

Overriding the menu "hamburger"

By inspecting the menu button, we see that there are a whole bunch of styles coming from Bootstrap that we will want to override:

Bootstrap menu button styles

So, let's write some CSS! To do this, we first need to know at what breakpoint we should place our styles (i.e. inside which media query). Now, I'll just tell you, since it's a fixed point where the menu collapses, that we will want to use the max-width: 767px breakpoint. So here are some styles to get our button to fit in a little more into our design.

/* Overriding responsive menu styles */
@media (max-width: 767px) {
   .navbar .btn-navbar {
      background: #333333;
      border-color: #333333;
      background-image: none;
      -moz-box-shadow: none;
      -webkit-box-shadow: none;
      box-shadow: none;
      -moz-text-shadow: none;
      -webkit-text-shadow: none;
      text-shadow: none;
   }
   .navbar .btn-navbar .icon-bar {
      -moz-box-shadow: none;
      -webkit-box-shadow: none;
      box-shadow: none;
   }
   .navbar .btn-navbar:hover, .navbar .btn-navbar:focus, .navbar .btn-navbar:active, .navbar .btn-navbar.active, .navbar .btn-navbar.disabled, .navbar .btn-navbar[disabled] {
      background: #A41EB3;
   }
}

In the first part of this CSS I am removing the box-shadow and text-shadow and replacing the background and border color. I also remove the box-shadow from the icon-bars (those little lines inside the button). Then the last part of the CSS defines a different background color in the hover state. Here's what our button looks like now (default and on hover):

New button styles

Overriding the menu links and container

Now to take this a little further, we might want to style the links to look a bit different in mobile, or give this whole menu a background color so it's clear that the links and the menu button go together. Here's what some CSS for this would look like:

@media (max-width: 767px) {
   .navbar-inner {
      background: #E4EEF5;
      border: 1px solid #C2E0F2;
      -moz-border-radius: 0;
      -webkit-border-radius: 0;
      border-radius: 0;
   }
   .navbar .nav > li > a {
      -moz-border-radius: 0;
      -webkit-border-radius: 0;
      border-radius: 0;
   }
}

In the first declaration, I am adding a blue background and border to the navbar, and removing the border-radius (rounded corners) put there by default in Bootstrap. In the second declaration, all I am doing is removing the rounded corners on the links, but you could go further and add new styles for how these links look on mobile if you like. Here's what our menu looks like now:

new responsive menu styles

Going Further

To play around with styling other elements of your page responsively, slowly shrink the width of your browser and see what changes. Inspect using Firebug to see any changes in the CSS happening at different breakpoints, then start adding your own CSS inside of a media query to override styles for different screen widths. Places you might want to look to override styles for smaller screen sizes might be:

  • Your site title and logo
  • Your main menu
  • The search box
  • Sidebar navigation
  • Specific micro-layouts you've made (for example, postcard layouts)
  • Tables (you can make your tables responsive by stacking your <td> elements within a row for mobile

To conclude

I hope this series has been helpful for you in getting a custom look-and-feel on your website. You can go a lot further in overriding the default CSS in Open Framework just by using your Firebug inspector tool and tweaking things one at a time. If you have a design you're proud of and want to share, please leave a link in the comments.

Categories: