Migration Guide

Guides to updating major releases:

---

Certain releases contain major changes to Responsive. These guides cover the major items you'll need to change for each release, should you choose to upgrade.

Foundation (Release # 1.2.0)

• Release notes: https://github.com/bu-ist/responsive-foundation/releases/tag/1.2.0
• Pull request: https://github.com/bu-ist/responsive-foundation/pull/10

This version of Responsive Foundation switches utility classes from CSS classes to SASS placeholders, introduces an improved grid system, improves variable organization and CSS specificity, and takes care of a number of outstanding bugs. This release improves performance, but you should not see significant design changes. Keep an eye on widgets - especially content navigation - as you update to this version.

Before you begin: Update your theme to Responsive 1.2.0

Follow the instructions here, using the version number 1.2.0 in your bower.json file.

Required: Update @extend in your theme to use placeholder classes

Grid classes in theme files

Any grid classes you extended in your theme files (.col-sm-3, .col-xs-1) need to be updated to their new placeholder classes. A quick way to do this is by doing a find and replace in your css_dev folder for each of the items below:

• @extend .col-xs -> @extend %col-xs
• @extend .col-sm -> @extend %col-sm
• @extend .col-md -> @extend %col-md
• @extend .col-lg -> @extend %col-lg

Icon classes in theme files

Icon classes need to be updated as well. This is pretty straightforward - just replace .icon with %icon, like so:

• @extend .icon -> @extend %icon
• @extend .icon-facebook -> @extend %icon-facebook
• @extend .icon-twitter-alt -> @extend %icon-twitter-alt

These are just a few examples - be sure to look for all @extend %icon to make sure you catch all possibilities.

Required: Update @include breakpoint shorthand

The breakpoints mixin now uses the shorthand xs, sm, md, and lg. A quick way to update this is by doing a find and replace in your css_dev folder for each of the items below:

• @include breakpoint(extra_small) -> @include breakpoint(xs)
• @include breakpoint(small) -> @include breakpoint(sm)
• @include breakpoint(medium) -> @include breakpoint(md)
• @include breakpoint(large) -> @include breakpoint(lg)

Required: Update variables shorthand

If you used any of the container or breakpoints variables in your theme (such as $container-S or $S), those will also need to be updated to the new sizing shorthand. A quick way to update this is by doing a find and replace in your css_dev folder for each of the items below:

• $container-S -> $container-SM
• $container-M -> $container-MD
• $container-L -> $container-LG
• $S -> $SM
• $M -> $MD
• $L -> $LG

Required: Update @include clearfix(); in your theme to @extend %clearfix;

A quick way to update this is by doing a find and replace in your css_dev folder for the following item:

• @include clearfix() -> @extend %clearfix

Required: Double check your fonts

If you used BentonComp, it was removed from the framework. Add the fonts to your theme in your fonts partial.

Optional: Remove margin from footer widgets

In this release, footer widgets will calculate their width based on both margin and padding - meaning it's now safe for you to use a background color on footer widgets. But maybe you're just not that into whitespace. Not to worry - it's an easy fix.

Add the following two variables to your variables file (before burf-base) to remove the margin on the footer widgets and adjust the sidebar padding (the values below will give you the same spacing that originally came with the framework, but feel free to tweak to your liking).

$margin-width: 			  					    0;
$sidebar-padding:                          0 0 0 3.46667%;

Optional: Classes for backwards compatibility (Wordpress content)

Did you just read all this and panic because you're using these classes all over your site's content? Well, then, do we have the optional partial for YOU! Feel free to use any and all of these amazing backwards compatibility partials for all your backwards compatibility needs.

This is a completely optional set of partials - you should only use them if you need them because you are using these classes in your content.

Before using these, be sure to take care of any issues with @extend, as these partials will mask those issues - and you'll want to take care of that since it does a lot to clear up your CSS. We'd also recommend grabbing only the rules you need if you're certain you only need one or two (such as in the icons partial). In your style.scss folder, include these files at the top:

// For grid classes, such as .col-sm-3
@import 'burf-back-compat/back-compat-grid';

// For icon classes, such as .icon-facebook
// Highly recommended: grab what you need instead of importing the whole file
@import 'burf-back-compat/back-compat-icons';

// For typography classes, such as .font-jumbo
@import 'burf-back-compat/back-compat-typography';

But wait! There's more!

There are a whole host of other great additions to the framework in this release that don't need your attention right now, including the ability to define your own breakpoints and fancy new placeholders for equal vertical height (YES!). Check out the release notes for the full details!