Responsive Framework

We started developing BU’s Responsive Framework in October of 2013.

I was the original developer to contribute to the Responsive Framework, and while my individual contributions have wound down, I remain in charge of overseeing the development.

It was a very slow, deliberate build based off of a lot of institutional knowledge and working knowledge based on the previous framework, called Flexi. We chose to start building the first child theme while the framework was still in development so different team members could provide real-time and “real-world” feedback.

Three Avenues

The Responsive Framework, or Responsi as we lovingly call it, has three main avenues of usage:

Out-of-the-box Theme

  • Enable-and-go for clients.
  • Options available via the customizer and settings pages.
  • Menu/layout options, color palettes, content/sidebar settings.

Out-of-the-box Theme
+ Custom Design & Config

  • Via custom CSS/Sass
  • This usually involves a designer/frontend dev also setting up the site and configuring options and content deeply.

A Parent Theme Framework

  • We build full-scale child theme with custom design and functionality
  • Customizer options & settings can be set via theme constants so they can’t be changed if the design doesn’t allow for it.

Statistics

(as of Feb 2020)

1936

Sites using the framework directly

75

Custom child themes

22

Contributors to the framework repo

3126

Commits on the framework repo

Built With

  • NPM & Grunt
  • GitHub pull requests require passing Travis CI & Code Climate tests.
  • Visual Regression Testing via BackstopJS.
  • We also have a repo called Responsive Child Starter, which is a starting place for our theme developers.
  • Vanilla JS and jQuery, where appropriate.

Integrations & Customizations

  • Includes many hooks and filters for overrides and customization.
  • Granular, standardized naming conventions, especially around page templates, template parts, and helper functions.
  • Integrates with other BU services and plugins:
    • Goes hand-in-hand with the BU Landing Pages Plugin & BU Banners.
    • BU Branding Plugin, BU Profiles Plugin, BU Slideshow Plugin, Course Feeds Service & Plugin, Calendar Service & Plugin.
    • Gravity Forms, Yoast SEO, YARPP.

More Detail on Features

  • 5 built-in Menu/Branding layouts.
  • 5 built-in font pairings.
  • 5 built-in color palettes.
  • Branding configuration.
  • GitHub Wiki for internal documentation.
  • Separate website for client-facing documentation.

On the Horizon

  • Working on Release 2.0, and open sourcing it.
  • Gutenberg compatibility

Screenshots: Configuration / Backend

Screenshots: Various Homepages of Child Themes