![\"\"](\"\/marcom-team\/files\/2025\/06\/responsive.png\")
<\/p>\n<\/p>\n
Responsi represents Interactive Design’s product:<\/em><\/p>\n The combination of our front-end codebase Foundation<\/strong>, starter WordPress theme Framework<\/strong>, and custom plugins<\/a>.<\/p>\n This website dev suite is designed to manage, enhance, and address the strategic online business needs of Boston University\u2014including its foundations, schools, colleges, and departments.<\/p>\n Put another way:<\/p>\n Foundation defines the soul<\/em>. Framework makes the body<\/em>. I.D. Product Presentation<\/a> Responsive Foundation<\/strong><\/a> is our front-end<\/span> codebase of SASS<\/a> and JavaScript<\/a> shortcuts and tools constructed with the aim of efficiency, manageability and scalability.<\/span><\/p>\n It underpins our offerings<\/a> as the fuel for<\/span>\u00a0our custom website project<\/a> themes, longform editorial projects<\/a>, and other unique projects<\/a> [with\/without a content management system]. <\/span><\/p>\n The latest update<\/a> arrived in February 2024, while the initial version was released<\/a> 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.<\/em>).<\/p>\n Responsive Foundation Wiki<\/a><\/p>\n Original Documentation for Foundation<\/a><\/p>\n Mixin Library Reference [for Designers]<\/a><\/p>\n <\/p>\n Responsive Framework<\/strong><\/a> 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.<\/p>\n We’ve extended Responsive Framework into successive versions as our “starter” theme<\/a>, which kicks off every Custom Website Project<\/a>‘s implementation phase<\/a>.<\/p>\n The current 3rd starter theme<\/a> was recently updated<\/a> on Feb 6, 2024.<\/span><\/p>\n Starter 3 GitHub [Latest]<\/a><\/p>\n Framework Child Starter 3x [Beta] Demo Site<\/a><\/p>\n Responsive Framework Wiki<\/a><\/p>\n <\/p>\n Responsive Foundation and Framework files are loaded into the Responsive Child Starter<\/a> GitHub repository that’s replicated and unpackaged for every new Custom Website Project<\/a>:<\/p>\n After obtaining a local copy [for one of our projects<\/a>] and unpackaging the repository with For our feature article editorial projects<\/a>, you might also find this with our Static Starter<\/a>:<\/p>\n What Foundation brings<\/strong> is deep within the package’s node modules. Burf stands for B<\/span>oston U<\/span>niversity R<\/span>esponsive F<\/span>oundation.<\/p>\n What Framework brings<\/strong> are the other miscellaneous node modules which help with compiling SASS & JS \u2014 and the PHP<\/a> files [within the package root directory] that help the WordPress theme function<\/em> between the front-end and the admin.<\/p>\n In the Responsive Framework repo: WordPress hooks and functions are segmented throughout folders like 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 Designers can utilize markup inclusions within template parts safely with Action Hooks. (See Crucial Framework Dependencies below.<\/em>)<\/p>\n *If using Responsive Child Starter 2<\/a>, this directory is When any responsive-child-starter-3x<\/a> is loading on a site, JS and CSS files dependency assets are loaded.<\/p>\n This is the general order of assets loaded ( This is the general order of assets loaded following<\/strong> the <\/div><\/p>\n Although founded on SCSS & JavaScript, we encourage using CSS custom properties<\/a> (a.k.a. CSS Variables<\/a>) and Implementing logical properties<\/a> is also crucial for better internationalization<\/a> 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. <\/div>\n<\/div>\n\n Maintaining the latest versions of Responsive Foundation<\/strong> and Responsive Framework<\/strong>\u00a0is essential for all Boston University websites.<\/p>\n These updates are managed according to departmental budget and resource availability.<\/p>\n ID Product Feedback<\/a><\/p>\n <\/p>\n We have a few channels dedicated to product development and updates. Look for them in our Slack organization:<\/p>\n <\/div>\n <\/p>\n An integral dependency of Responsive Framework’s customizer, with header and footer options that control the Boston University logo’s output.<\/p>\n GitHub Repository<\/a> <\/div>\n<\/div>\n\n BU Alerts supports Responsive Framework for displaying campus-wide<\/strong> alerts [mostly safety notices] that feature prominently on all BU Websites and is manually activated by I.D.’s WordPress Devs for testing.<\/p>\n Documentation<\/a><\/p>\n GitHub Repository & Wiki<\/a><\/p>\n Enable BU Alerts<\/a> <\/div>\n<\/div>\n\n Support for adding and editing a site-wide<\/strong> announcement<\/em>.<\/p>\n Documentation<\/a> <\/div>\n<\/div>\n\n A part of Responsive Framework that provides a manageable admin interface for pages.<\/p>\n Feature Page<\/a><\/p>\n Documentation<\/a> <\/div>\n<\/div>\n\n <\/p>\n 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.<\/p>\n It helps designers customize without needing to dive into complex functional code, and it helps free up developer resourcing.<\/p>\n 2019 Presentation<\/a><\/p>\n Github Wiki Information<\/a><\/p>\n Hooks GitHub Repository<\/a><\/p>\n Reference Hooks Demo Site<\/a><\/p>\n Plugin Listing<\/a><\/p>\n We’re in the middle of adopting Gutenberg for Boston University.<\/p>\n We are currently at the Implementation half of Phase 1. Essentially research for block architecture, update to framework and tools to support block development.<\/p>\n Update and\/or build plugins for all existing features for block compatibility.<\/p>\n Retire classic editor, client training, existing site transition planning.<\/p>\n The overall process entails:<\/p>\n Gutenberg<\/a> is WordPress’s modern block-based editor and site-building tool<\/a> that has become the default content creation experience since WordPress 5.0. It’s presently being utilized in a carefully curated manner for our BU Programs, Prepress and Blocks plugins<\/a>.<\/p>\n WordPress Playground<\/a><\/p>\n Gutenberg Plugin Page on WordPress<\/a><\/p>\n Check out the Gutenberg GitHub Repository<\/a><\/p>\n <\/div> <\/div>\n<\/div>\n\n 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\u2014including its foundations, schools, colleges, and departments. Put another way: Foundation defines the soul. Framework makes the body. […]<\/p>\n","protected":false},"author":12906,"featured_media":0,"parent":319,"menu_order":1,"comment_status":"closed","ping_status":"closed","template":"","meta":[],"_links":{"self":[{"href":"https:\/\/sites.bu.edu\/marcom-team\/wp-json\/wp\/v2\/pages\/454"}],"collection":[{"href":"https:\/\/sites.bu.edu\/marcom-team\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/sites.bu.edu\/marcom-team\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/sites.bu.edu\/marcom-team\/wp-json\/wp\/v2\/users\/12906"}],"replies":[{"embeddable":true,"href":"https:\/\/sites.bu.edu\/marcom-team\/wp-json\/wp\/v2\/comments?post=454"}],"version-history":[{"count":50,"href":"https:\/\/sites.bu.edu\/marcom-team\/wp-json\/wp\/v2\/pages\/454\/revisions"}],"predecessor-version":[{"id":4290,"href":"https:\/\/sites.bu.edu\/marcom-team\/wp-json\/wp\/v2\/pages\/454\/revisions\/4290"}],"up":[{"embeddable":true,"href":"https:\/\/sites.bu.edu\/marcom-team\/wp-json\/wp\/v2\/pages\/319"}],"wp:attachment":[{"href":"https:\/\/sites.bu.edu\/marcom-team\/wp-json\/wp\/v2\/media?parent=454"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
\nTogether with our plugins, they make BU’s websites live<\/em>.
\nWe make them sing<\/em> with our strategic design.<\/p><\/blockquote>\n
\n(Request access from Gary Hedrick<\/a>.)<\/em><\/small><\/p>\n
\nWhat Makes Responsi?<\/strong><\/h2>\n
![\"\"](\"\/marcom-team\/files\/2025\/06\/responsive-foundation.png\")
<\/a><\/p>\nResponsive Foundation<\/strong><\/h3>\n
![\"\"](\"\/marcom-team\/files\/2025\/06\/responsive-framework.png\")
<\/a><\/p>\nResponsive <\/strong>Framework<\/h3>\n
For New Designers & Developers<\/h4>
<\/p>\n<\/p>\nFoundation Brings the SASS, Framework Stacks Up the PHP<\/strong><\/h2>\n
npm install<\/code> in your code editor or OS Terminal: you’ll find in the \/node_modules<\/code> directory a *@bostonuniversity<\/code>” folder with these directories of SASS partials from Foundation:<\/p>\n\n
burf-base<\/code><\/strong>: Base SASS styles for $variable<\/code> formatting of common elements like headings, tables, and forms.<\/li>\nburf-theme<\/code><\/strong>: SASS styles tailored for WordPress theme CMS and shortcodes.<\/li>\nburf-customizations<\/code><\/strong>: Styles for I.D. Plugin components<\/a> to adapt to WordPress.<\/li>\n<\/ul>\n\n
burf-tools<\/code><\/strong>: Specialized SASS mixins.<\/li>\n<\/ul>\n\/includes<\/code>, \/template-parts<\/code>, \/page-templates<\/code> \u2014 ultimately being called and executed within functions.php<\/code>.<\/p>\nheader.php<\/code> or footer.php<\/code>] of a webpage.<\/p>\n\/responsive-foundation<\/code>.
\n**As of Responsive Child Starter 3x<\/a>:<\/small> burf-tools<\/strong> was decoupled. <\/small><\/div><\/p>\n<\/p>\nAsset Loading Queue<\/h4>\n
<meta><\/code> sprinkled in) within the <head><\/code> element:<\/p>\n\n
<style><\/code> overrides (if logged in).<\/li>\nstyle.min.css<\/code> file.<\/li>\nbu-branding\/assets\/css\/fonts.css<\/code>.<\/li>\n<footer><\/code> element:<\/p>\n\n
script.min.js<\/code> comes loaded first.<\/li>\n<script><\/code>‘s.<\/li>\n<\/ul>\nA Small Consideration<\/h4>\n
clamp()<\/code><\/a> for performance and simplicity\u2014especially for viewport, typography, padding, margins, and box-sizing \u2014 as we transition towards Gutenberg block editing. Flexbox<\/a> & CSS Grid<\/a> are also viable now for our<\/em> browser support needs.<\/p>\n
\n![\"\"](\"\/marcom-team\/files\/2025\/06\/Screenshot-2025-06-05-at-3.08.39\u202fPM.png\")
<\/h2>\nProduct Development<\/h2>\n
<\/p>\nCatch Up on Slack<\/h3>\n
#id-product-development<\/code><\/p>\n#id-product-updates<\/code><\/p>\n#id-product-prebuilt-themes<\/code><\/p>\nCrucial\u00a0<\/strong>Framework Dependencies<\/h3>\n
BU Branding<\/h4>
<\/p>\n![\"\"](\"\/marcom-team\/files\/2025\/06\/Screenshot-2025-06-05-at-3.11.18\u202fPM.png\")
<\/p>\nBU Alerts<\/h4>
<\/p>\nBU Announcements<\/h4>
<\/p>\n![\"\"](\"\/marcom-team\/files\/2025\/06\/Screenshot-2025-06-05-at-3.15.48\u202fPM.png\")
<\/p>\nBU Navigation<\/h4>
<\/p>\n![\"\"](\"\/marcom-team\/files\/2025\/06\/screenshot-1-636x448-1.png\")
<\/p>\nAction Hooks<\/h4>\n
![\"\"](\"\/marcom-team\/files\/2025\/06\/Screenshot-2025-06-05-at-3.23.00\u202fPM.png\")
<\/p>\n
\nThe Future<\/strong><\/h2>\n
![\"\"](\"\/marcom-team\/files\/2025\/04\/Screenshot-2024-12-10-at-10.44.56\u202fAM-636x370.png\")
<\/p>\n
\n<\/strong>At a high level, this will all take place in three phases:<\/p>\nPhase 1<\/strong><\/h6>\n
Architecture Research & Prototyping \/ Implementation<\/strong><\/h4>\n
Phase 2<\/strong><\/h6>\n
Update & Build Plugins<\/strong><\/h4>\n
Phase 3<\/strong><\/h6>\n
Wider Adoption & Classic Editor Retirement<\/strong><\/h4>\n
\n
So New Hires Are Familiar\u2026<\/h4>
<\/p>\n<\/p>\n![\"\"](\"\/marcom-team\/files\/2025\/06\/How-to-Use-the-WordPress-Gutenberg-A-Beginners-Guide-to-the-WordPress-Block-Editor-174754617.png\")
<\/p>\nA Word About Gutenberg<\/strong><\/h2>\n
\nNext Section<\/h4>\n
Our Offerings<\/a><\/h2>\n","protected":false},"excerpt":{"rendered":"