Responsi

Responsi represents Interactive Design’s product:

The combination of our front-end codebase Foundation, starter WordPress theme Framework, and custom plugins.

This website dev suite is designed to manage, enhance, and address the strategic online business needs of Boston University—including its foundations, schools, colleges, and departments.

Put another way:

Foundation defines the soul. Framework makes the body.
Together with our plugins, they make BU’s websites live.
We make them sing with our strategic design.

I.D. Product Presentation

(Request access from Gary Hedrick.)

What Makes Responsi?

Responsive Foundation

Responsive Foundation is our front-end codebase of SASS and JavaScript shortcuts and tools constructed with the aim of efficiency, manageability and scalability.

It underpins our offerings as the fuel for our custom website project themes, longform editorial projects, and other unique projects [with/without a content management system].

The latest update arrived in February 2024, while the initial version was released back on December 12, 2014. Alongside Responsive Framework, it’ll be revised and evolved as we expand Gutenberg into our offerings (See “A Word About Gutenberg” below.).

Responsive Foundation Wiki

Original Documentation for Foundation

Mixin Library Reference [for Designers]

Responsive Framework

Responsive Framework fuses Responsive Foundation with WordPress’s architecture to make BU’s websites structurally consistent, visually flexible, and content manageable. Developed with BU IS&T’s collaboration: it was BU’s initial step into responsive, accessible web design around 2013.

We’ve extended Responsive Framework into successive versions as our “starter” theme, which kicks off every Custom Website Project‘s implementation phase.

The current 3rd starter theme was recently updated on Feb 6, 2024.

Starter 3 GitHub [Latest]

Framework Child Starter 3x [Beta] Demo Site

Responsive Framework Wiki

For New Designers & Developers

Foundation Brings the SASS, Framework Stacks Up the PHP

Responsive Foundation and Framework files are loaded into the Responsive Child Starter GitHub repository that’s replicated and unpackaged for every new Custom Website Project:

After obtaining a local copy [for one of our projects] and unpackaging the repository with npm install in your code editor or OS Terminal: you’ll find in the /node_modules directory a *@bostonuniversity” folder with these directories of SASS partials from Foundation:

burf-base: Base SASS styles for $variable formatting of common elements like headings, tables, and forms.
burf-theme: SASS styles tailored for WordPress theme CMS and shortcodes.
burf-customizations: Styles for I.D. Plugin components to adapt to WordPress.

For our feature article editorial projects, you might also find this with our Static Starter:

**burf-tools: Specialized SASS mixins.

What Foundation brings is deep within the package’s node modules. Burf stands for Boston University Responsive Foundation.

What Framework brings are the other miscellaneous node modules which help with compiling SASS & JS — and the PHP files [within the package root directory] that help the WordPress theme function between the front-end and the admin.

In the Responsive Framework repo: WordPress hooks and functions are segmented throughout folders like /includes, /template-parts, /page-templates — ultimately being called and executed within functions.php.

A lot of our plugins will have their own directories[containing exceptions] that are included by an assisting developer when a project theme requires customizations(i.e.: A second button to be added in BU Banner’s, or revised, generated image sizes for a certain breakpoint.). Also included are miscellaneous PHP files for different segments[i.e.: the header.php or footer.php] of a webpage.

Designers can utilize markup inclusions within template parts safely with Action Hooks. (See Crucial Framework Dependencies below.)

*If using Responsive Child Starter 2, this directory is /responsive-foundation.
**As of Responsive Child Starter 3x: burf-tools was decoupled.

Asset Loading Queue

When any responsive-child-starter-3x is loading on a site, JS and CSS files dependency assets are loaded.

This is the general order of assets loaded (<meta> sprinkled in) within the <head> element:

Analytics tracking JavaScript files to measure interactions and performance.
A few WordPress admin CSS files and <style> overrides (if logged in).
Any activated WP Plugin’s (most of which are ours).
The custom theme’s minified style.min.css file.
BU’s brand logo font[Whitney]: bu-branding/assets/css/fonts.css.
jQuery files.
Modernizer.css file.
Additional tracking, WP admin CSS overrides.

This is the general order of assets loaded following the <footer> element:

The custom theme’s minified script.min.js comes loaded first.
Interspersed WP Plugin, security, and other JavaScript files and <script>‘s.

A Small Consideration

Although founded on SCSS & JavaScript, we encourage using CSS custom properties (a.k.a. CSS Variables) and clamp() for performance and simplicity—especially for viewport, typography, padding, margins, and box-sizing — as we transition towards Gutenberg block editing. Flexbox & CSS Grid are also viable now for our browser support needs.

Implementing logical properties is also crucial for better internationalization as not everyone reads left-to-right or even top-to-bottom. Our designs need to adapt as a result. We owe it to our prospective students.

Product Development

Maintaining the latest versions of Responsive Foundation and Responsive Framework is essential for all Boston University websites.

These updates are managed according to departmental budget and resource availability.

ID Product Feedback

Catch Up on Slack

We have a few channels dedicated to product development and updates. Look for them in our Slack organization:

#id-product-development

#id-product-updates

#id-product-prebuilt-themes

Crucial Framework Dependencies

BU Branding

BU Alerts

BU Announcements

BU Navigation

Action Hooks

A special structural collection of PHP files for adding extra markup before or after different parts of Responsive Child Starter 3x’s theme template parts.

It helps designers customize without needing to dive into complex functional code, and it helps free up developer resourcing.

2019 Presentation

Github Wiki Information

Hooks GitHub Repository

Reference Hooks Demo Site

The Future

We’re in the middle of adopting Gutenberg for Boston University.

We are currently at the Implementation half of Phase 1.
At a high level, this will all take place in three phases:

Phase 1

Architecture Research & Prototyping / Implementation

Essentially research for block architecture, update to framework and tools to support block development.

Phase 2

Update & Build Plugins

Update and/or build plugins for all existing features for block compatibility.

Phase 3

Wider Adoption & Classic Editor Retirement

Retire classic editor, client training, existing site transition planning.

The overall process entails:

Developing a unified block architecture.
Creating a new plugin starter repository.
Introducing a consolidated NPM package for BU Base styling.
Updating existing block components.
Building a Gutenberg training site.
Updating the BU Blocks plugin.
Testing the new child starter theme.