Core Architecture

in MWF's Responsive Future

Why a New Framework?

A number of tools already exist...

  • Grid layout systems Semantic.gs, Golden Grid System, Foldy960
  • Collections of UI element Bootstrap, Foundation, Skeleton, Amazium
  • Javascript libraries Modernizr, Selectivizr, Respond.js

Why Not Extend An Existing Framework?

  • We need more UI components
  • Framework may be deprecated or superseded
  • MWF community won't decide on a single framework
  • Each one does some things right, other things wrong
  • Many tools and techniques, but which ones to use?

Web Blocks

A framework-agnostic toolkit that integrates best practice responsive tools and techniques.

What Does It Include?

  • Basic responsive framework Fluid grid, responsive media
  • Base UI elements Headers, buttons, forms
  • Rich, interactive responsive UI components Image galleries, calendars, modal dialogs

And More!

  • Responsive images On-the-fly compression, image substitution
  • Responsive videos
  • CSS/JS minification

Modular Architecture

  • Enable/disable individual modules Don't need responsive video? Disable it!
  • Swap out the underlying framework Prefer Foundation over Bootstrap? Use it!
  • Support for integrating third-party components Don't reinvent the wheel; integrate the best spokes

Building Web Blocks

A platform-independent build process geared for both content providers and service providers

What Gets Assembled?

  • SASS (.scss) → Minified Core CSS → Minified IE CSS
  • JavaScript (.js) → Minified Core JS → Minified IE JS → Minified JS Scripts
  • Images, fonts and other assets

SASS?

A CSS preprocessor...

  • Includes
  • Functions
  • Nesting
  • Extensibility

How About Compass?

Compass extends SASS with:

  • CSS and JS builder
  • Reusable CSS patterns and mixins
  • Typography and sprites

But it still isn't quite enough

Beyond SASS & Compass

Neither support our modularity goals:

  • Definition modules
  • Adapters
  • Extensions

Need to flexibly assemble our assets:

  • Assets defined within an application
  • While using framework definitions and adapters

Web Blocks Builder

A modular, extensible assembler and compiler
for the framework

What Can The Builder Do?

  • Load only the Web Blocks definitions you want
  • Load a set of framework adapters
  • Load organization-specific extensions
  • Compile with the application's source files
  • Build into an application's assets directory

Demo

ECTA's PHP Framework

Defining the Toolkit's Elements

Bootstrap

<ul class="breadcrumb">
    <li><a href="#">Home</a><span class="divider">/</span></li>
    <li class="active"><a href="#">About</a></li>
</ul>

Foundation

<ul class="breadcrumbs">
    <li><a href="#">Home</a></li>
    <li class="current"><a href="#">About</a></li>
</ul>

Web Blocks

<nav class="breadcrumb">
    <ol>
        <li><a href="#">Home</a><span class="divider">/</span></li>
        <li class="active"><a href="#">About</a></li>
    </ol>
</nav>

Defining Our Own Semantics

  • Allows for modular framework adapters
  • Can use existing framework, plus Web Blocks features
  • We borrow from the frameworks... Use Bootstrap's table styles
  • ...but also extend them Add the .highlight option to table rows
  • Some elements don't exist in other frameworks Masthead element

Creating An Element

  1. Research: Current usages, specifications blockquote popular convention vs. specification
  2. Define: Formal definition, prototype, examples
  3. Develop: Basic styling, adapters

Demo: Defining Table

  1. Research
  2. Define
  3. Develop

Going Further

Server-side components and other libraries

Capabilities & Polyfills

  • HTML 5 Polyfills Modernizr
  • CSS 3 Polyfills Selectivizr, Respond.js
  • Server-side Capability Exposure Device Telemetry Stack

Responsive Media

Multiple components depending on use case

  • Dynamic Compression MWF Image Compressor and Adaptive Images
  • Image Substitution
  • Anticipatory "polyfills" jQuery Picture

Also looking at responsive audio/video options

Asset Optimization

WebBlocks builder minifies assets

Content providers may want to minify additional assets

  • CSS & JS Minification
  • CSS Optimization

Supported on-the-fly like MWF

Target-Trigger Engine

Everyone wants rich interactivity, but...

  • Javascript isn't friendly to content editors
  • Hard to program for compatibility

How about a CSS-based solution?

<div class="expandable example">
    <h2>Expandable Target</h2>
    <p>This div will expand when Trigger is pressed</p>
</div>

<a href="#" class="trigger t-example">Trigger</a>

And Much More

in the planning stages

Consuming the Framework

Building for flexibility and collaboration...

  • Full, compiled version
  • Customized build
  • Organization-hosted fork
  • Individual fork

Easy to define extensions and contribute modules

Institutional Deployment

Federated and forkable...

  • Link to a hosted instance (federated)
  • Deploy a copy of framework assets
  • Fork and tweak further as needed

Modularity makes it easy to pull from upstream

Collaborative Efforts

The codebase itself...

  • Git repository hosted on GitHub
  • Open-source release at the end of year
  • Organizations can fork and customize the framework

Collaborative efforts...

  • Issue tracker and wiki on GitHub
  • Listserv and biweekly meetings

THANK YOU

Any Questions?