The

Responsive Future

of MWF

What do we need?

Responsive Design
  • Flexible Grid
  • Media Queries
  • Responsive Media

Support Libraries
  • Browser Normalization
  • Capability Detection
  • HTML5 & CSS3 Polyfills

Rich Interfaces
  • User Interface Elements
  • Javascript Interactivity
  • Server-side Components

Where to Start?

There's a ton of good work already out there...

  • jQuery
  • Modernizr
  • Respond.js
  • Adapt.js
  • Selectivizr
  • Twitter Bootstrap
  • HTML 5 Boilerplate
  • Foundation 3
  • Semantic.gs
  • Golden Grid System
  • FitText.js
  • Lettering.js
  • Adaptive Images
  • jQuery Picture
  • MWF

And so many more...

But how do we make sense of all this?

A Toolkit

Integrated set of packages

Customizable for organizational needs

Extended with UI elements and JS interactivity

Collaboration & federation build directly in

The Basics

  • Build script for CSS, JS and images
  • Support for SASS and Compass
  • jQuery and Twitter Bootstrap
  • Modernizr, Selectivizr and Respond.js
  • Rich library of UI elements
  • Javascript interactivity APIs

Isn't this just Compass with libraries?

Kind of... except more customizable

Going Further

A lot of shared needs across the community

...but also some key differences

Configurability is a requirement

Example

To compress or to polyfill?

Compression (from MWF)

<img src="img.php?img=http%3A%2F%2Fdomain%2Fpath%2Fimg.ext">

Polyfill (from jQuery Picture)

<picture alt="Description">
    <source src="path/img-small.png">
    <source src="path/img-large.ext" media="(min-width:800px)">
    <noscript>
        <img src="path/img-large.ext" alt="Description">
    </noscript>
</picture>

Example

What about another UI framework?

Bootstrap isn't for everyone...

  • Some already using other frameworks
  • Over time, frameworks will come and go

Adapter design pattern

  • Abstraction layer
  • Link between markup entities & framework
  • Switch by changing config variable
WebBlocks.config[:src][:adapter]
      = "bootstrap"

Example

What if I don't want everything?

  • Select which third-party packages to include
  • Turn definition modules on or off as needed
  • Modularize changes through extensions

All managed through build script configuration

WebBlocks.config[:src][:modules]    = ['base','entity/header','entity/nav',...]
WebBlocks.config[:src][:extensions] = ['ucla','ucla-org',...]
WebBlocks.config[:build][:packages] = [:bootstrap,:jquery,:modernizr,:respond,...]

Federated Development

Core
Organization
Organization
Unit
Unit
Unit
Unit

Each level can:

  • Inherit from levels above
  • Extend/overide definitions from above
  • Contribute back up the tree

Example

Campus Workflow

Campus central IT unit:

  • Forks core version and makes campus-specific changes
  • Hosts the campus version of the toolkit

Another unit on campus either:

  • Uses campus hosted version as-is
  • Forks campus version and makes unit-specific changes

Where are we now?

Architecture mostly complete

Defining markup prototypes

Implementing UI & interactivity elements

Planning server-side components

Collaborative group meets biweekly

Roadmap

Initial release under BSD License by end of year

... but you can start using it today!

(Just remember, it's still under active development)

Email ebollens@ucla.edu for access

THANK YOU

Any Questions?