General: Framework Overview

Trott edited this page Jan 31, 2012 · 6 revisions
Clone this wiki locally

Head Entities

In order to implement the Mobile Web Framework on a page, one must include two entities in the <head>, namely the CSS Handler and the JS Handler. In their respective documentation, both of these handlers support optional parameters for added functionality.

<link rel="stylesheet" href="http://{MOBILE_DOMAIN}/assets/css.php" type="text/css">
<script type="text/javascript" src="http://{MOBILE_DOMAIN}/assets/js.php"></script>

While these both appear to be PHP files, they identify themselves with the proper text/css and text/javascript content-type header attributes and, for all intensive purposes, are CSS and Javascript files, simply dynamic in nature so that they can serve assets geared towards the particular device accessing the page.

In addition to these attributes, it is highly recommended that content providers also include a meta[name=viewport] tag on all pages with the following form. This entity provides a uniform browsing experience across all mobile devices that accept it in terms of screen scaling. More information available in the General Mobile Markup section.

<meta name="viewport" content="height=device-height,width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">

CSS Entities

The framework currently provides a set of HTML entities that can be included in the body of framework-based pages. The framework is constantly working to expand the number and functionality of these entities based on community feedback into desired entities not yet provided.

Framework-wide Elements

Framework-wide elements are those that are recommended or required on all pages.

Main Content Elements

Several elements present general content on a given page:

Active development is also currently occurring on the following entities for MWF 1.3:

Other Elements

The framework also provides several general classes that can target definitions at only particular classification levels, as well as body telemetry classes that allow even more fine-grained targeting of definitions at particular operating systems, browsers and browser engines.

Javascript Libraries

The framework provides a rich API of Javascript functionality intended to provide information about a given device. Some of this telemetry is passed back to the server to provide device targeting, while other aspects are intended directly for consumption by content providers:

The framework also includes several Javascript libraries that can be included through the JS Handler:


The framework also includes specialized scripts that content providers can include (beyond the basic handlers) that serve distinct roles from other framework functionality: