An Evolving Web

A Growing Audience

First we had desktop browsers

then we had mobile browsers

and now we've tablets and more

How do we deliver to every platform?

Tackling Mobile

Native apps
iOS SDK, Android SDK, etc.

Mobile web apps
jQuery Mobile, Sencha Touch, MWF, etc.

Hybrid apps
PhoneGap, Appcelerator, etc.

Are these the right approach?

Do we need a separate experience for mobile?

How do we tackle tablets and other devices?

How about a single site to handle all?

Responsive Web Design

What is Responsive Web Design?

Website transforms to fit the user's needs and capabilities

Browser Size

Viewing Context

Bandwidth

Pixel Density

Battery Life

Three Components

Media queries

Responsive media

Flexible grid

Mobile First

Mobile First

Benefits

One Experience

Future Proof

Handrolling Responsive

Difficult problems to solve:

Images

Tables

Navigation

Layouts

Existing frameworks, components, and libraries
solve these problems

Framework Paralysis

5+ responsive frameworks

10+ responsive grid systems

20+ responsive image solutions

7+ responsive table solutions

We don't need a new framework

We need to integrate

WebBlocks Responsive Toolkit

Where do we start?

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

Extend, don't recreate

Define a clear, standards-based set of semantics

Take advantage of existing tools where viable

Build additional functionality as needed

WebBlocks is a Toolkit

Pick and choose among supported packages

Select modules of semantic elements

Add branding and other extensions

Configure build variables and settings

Add your own custom sources

And compile!

How does this work?

CSS is compiled with SASS, Compass and modular pipeline

Javascript and images are optimized and assembled

Once compiled, WebBlocks assets are static

No server-side logic needed

Just CSS, Javascript and images

Cutting down the complexity

When all this flexibility isn't needed...

Point your CSS and Javascript at a hosted version
or download and deploy directly in your app

And when it is...

Use the online build tools
or configure and run the compiler
or integrate it into an existing build process

But what's in the framework?

Getting Started with WebBlocks

Extending WebBlocks

Customize Your Build

Set colors, breakpoints and more through SASS variables

WebBlocks includes over 200 configurable variables

$color-branding-primary: #2288bb;
$color-branding-secondary: #ffb300;
$color-branding-tertiary: #8237ff;
$color-mood-info: #00a5e5;
$color-mood-success: #00ff87;
$color-mood-warning: #ffe800;
$color-mood-danger: #b73434;
$color-mood-error: #b73434;
$color-mood-required: #b73434;
$color-mood-important: #ff00a5;
$color-mood-highlight: #ff00a5;
$color-mood-error: #a00;
$color-mood-danger: #a00;

http://ucla.github.io/WebBlocks/doc/#API/Variables

Modularize with Extensions

Package up variables and custom CSS

Good for branding and feature extending

WebBlocks.config[:src][:extensions] << 'ucla'

Extensions can be mixed and matched

WebBlocks.config[:src][:extensions] << 'ucla'
WebBlocks.config[:src][:extensions] << 'flat-ui'

Extensions for Federation

WebBlocks.config[:src][:extensions] << 'ucla'
WebBlocks.config[:src][:extensions] << 'ucla-itservices'

http://ucla.github.io/WebBlocks/doc/#Configuration/Compiler/Components

http://ucla.github.io/WebBlocks/doc/#Recipe/Integration/Fork

App-specific Sources

When extensions aren't enough, add app-specific sources

override SASS variables
add and override CSS definitions
add Javascript, images and other assets

http://ucla.github.io/WebBlocks/doc/#Recipe/Integration/Use

And you can integrate the compiler into your build process

http://ucla.github.io/WebBlocks/doc/#Recipe/Integration/Submodule

Reducing Switching Costs

Switching frameworks can be an expensive ordeal

Adapters bind WebBlocks with another framework

Zero switching costs for supported frameworks

WebBlocks.config[:src][:adapter] = 'bootstrap'

http://ucla.github.io/WebBlocks/doc/#Configuration/Compiler/Components

http://ucla.github.io/WebBlocks/doc/#Core/Architecture/Adapter

Leveraging Modularity

An extensive framework means a large footprint

All semantic elements are broken down into modules

Define a build with only specific modules

WebBlocks.config[:src][:modules] = []
WebBlocks.config[:src][:modules] << 'base'
WebBlocks.config[:src][:modules] << 'compatibility'
WebBlocks.config[:src][:modules] << 'entity/button'
WebBlocks.config[:src][:modules] << 'entity/form'
WebBlocks.config[:src][:modules] << 'entity/message'

http://ucla.github.io/WebBlocks/doc/#API/Modules

http://ucla.github.io/WebBlocks/doc/#Configuration/Compiler/Components

http://ucla.github.io/WebBlocks/doc/#Core/Architecture/Module

Where Are We Now?

WebBlocks 1.0

Production release on June 21, 2013

Download and build from sources:
https://github.com/ucla/WebBlocks

Or pull a compiled version:
https://github.com/ucla/WebBlocks/releases

WebBlocks Build Server

Tool for remotely building custom jobs
such as from the documentation's builder GUI

Available for download:
https://github.com/ucla/WebBlocks-build-server

UCLA will soon be deploying a publicly available instance

WebBlocks CMS Integrations

Integration pattern

Theme with integrated WebBlocks build process
Configuration plugin that calls out to build server
Views / content types using WebBlocks semantics

First integrated theme in Drupal

Comprehensive connector for Plone in progress

Model can be applied to any app that follows this pattern

WebBlocks 1.1 and 2.0

Scoping and development of additional UI semantics

Improvements on existing UI elements

New Javascript interactivity features

Additional configuration options

Expanded package library

Refactored internals

Collaboration

Repository
https://github.com/ucla/WebBlocks

Documentation
http://ucla.github.io/WebBlocks/doc

Issue Tracker
https://github.com/ucla/WebBlocks/issues

Live Support
irc.freenode.net #WebBlocks

Mailing List
http://lists.ucla.edu/cgi-bin/mailman/listinfo/webblocks