CSS HTML And Structured Scripts In Standards

Chassis Logo

About Chassis

Chassis is Web development starter kit, initially created by Rozario Chivers in 2005. It includes everything you will need for a new project, from templates to process documents, in order to work quickly and effectively. Rozario is an advocate of Component Based approaches for Front End Development, speaking at Oxford Geeks Nights on the subject of Re-usable Markup Pattens.

Note: Chassis is currently PHP based as an example only. Chassis is intended for any server side language. PHP is simply used to illustrate the use of components via includes. A good server side Templating system will achieve the same result.

History and Motivation

After developing more than 50 different Web sites from scratch, the need for a clean repeatable HTML, CSS and JavaScript foundation became clear. The first version of Chassis was a simple starter kit, similar to the CSS Systems blogged by Natalie Downe. Chassis was developed to include all the latest Web Standards Practices, Accessibility approaches and Performance techniques, providing a stable foundation to build a site on.

Chassis Mission Statement

A good place to start
A foundation by experienced developers
A common language and shared vision
A framework for streamlining development activities
A way to define and monitor improvement
A path to developing a Software Product Line

Motivation

* Starting points diverge based on developer skills

"Varying level of knowledge and experience applied to solutions"

Individuals sometimes do not share prior experiences or knowledge

"Becoming irreplaceable often means not sharing knowledge"

A common language and a shared vision can be misunderstood

"Common approaches can be lost without communication"

Code can become messy and unstructured without a foundation

"Individuals code following their own preference and experience"

Improvement is not defined or monitored

"A feedback mechanism is not used to assess success or failures"

Later iterations included concepts from Nicole Sullivan's Object Oriented CSS and Web Standards implementations demonstrated in the Yahoo! Design Pattern Library. Chassis eventually matured with layout and Baseline grid support via Baseplate, without the need for extra markup.

Chassis 2.0 now incorporates Boilerplate, for many good reasons.

Architectural Goals

Full HTML5 support for modern browsers if required
A foundation for mobile support using media queries, device detection and orientation changes in JavaScript
A reusable set of Markup and CSS patterns
A glossary of shared vocabulary for designers and developers
Page Context made available to CSS and JavaScript (e.g. site name, page name and section name)
Component Based Development (CBD) to provide a foundation for Service Orientation
Layouts decoupled from Component Styling (adopting Object Oriented CSS approaches)
Web Application View Layer Modelled in framework (to simplify integration task)
CSS support of Layouts, Sub Layouts and Component placement and styling
Object Oriented JavaScript support via namespaces, modules and encapsulation
Loose Coupling of JavaScript components supported via Custom Events
Tooling to increase development productivity
Software Quality maintained with Testing, Linting and Diagnostic tools
Performance analysis to provide metrics for code optimisation

Features

Layouts

Custom Baseline Grid Support (via Less.js and Less PHP)
Layout API (development tool)
Configurable to support any, regularly sized, Design Grid
Less layouts compiled at runtime into CSS files
Less layout baseline settings read and displayed as baseline grid background on pages
Non prescriptive, Less layouts are optional, CSS can be handcrafted if required
The Layout and Component "View Layer" model (maps directly into modern Web Application architectures)
Support for alternate Homepage layouts (via a layout contextual class)
Support for sub layouts or nested layouts

CSS

Less layouts are now compiled into CSS at runtime
CSS namespacing (contextual classes) are used to prevent overriding of styles and to provide extensibility
CSS organised into layouts and components, decoupling layers and promoting the re-use of styles.
Default IE6, 7, 8 and 9 CSS styles for handling browser bugs
Standard fixes for common browser bugs built in (e.g. haslayout and double margin bugs)
no-js CSS class for handling no JavaScript scenarios
Diagnostic CSS, highlighting deprecated tags, inline event handlers and for debugging layouts and components.
Standardised print styles
Mobile Web App support (including Windows Phone 7)

HTML5

Plain Old Semantic HTML (POSH) is used
Dynamic HTML5 manifest supported
Polyglot Markup used in order to support non JavaScript requirements
All markup components uniquely identified via HTML5 data attributes (for unit tests and debugging)
HTML5 data attributes used to provide standardised meta data to JavaScript components

JavaScript

All JavaScript is Progressively Enhanced (caters for JavaScript Off)
Support for JS off (via CSS class context)
Support for Custom Events to de-couple the detail of a component from the important events they generate
Page Context object (populated via JSONP)
Modules
Namespacing
Interfaces (by convention)
Profiling (via Remy Sharp's time.js)
Behavioural Driven Development (BDD) (via Carl Jackson & Davis W. Frank's Jasmine)
Documentation (Java Docs convention)

Front End Performance

CSS Sprites
Short hand properties
Pragmatic use of advanced selectors
Reduced support for IE6, this reduces the need for the older more verbose and less optimal CSS approaches
Scripts at bottom
Short namespaces
Modular encapsulated scripts
Non UI blocking third party scripts
Ajax DOM caching of responses (reducing number of Ajax requests)
Memoization of function calls
Harviewer provides historic viewing of HTTP Archive (HAR) files (HAR files exported from Firefox via Netexport plugin)

Deployment

Packaging and minification (via min PHP - if required)

Accessibility

Skip Links (RNIB tested)
WAI ARIA Landmark Roles (supported by JAWS 10, NVDA 2010.1 and Voice Over in iOS 4)

SEO

Support for HTML and CSS coded Content first (for SEO and Accessibility)
Application of POSH (Plain Old Semantic HTML)
Support of Unobtrusive JavaScript techniques
Support for Microformats (currently indexed by Google)

Open Search

Example OSD.xml to add site search to browser

QA Tools

CSS Linting (code quality check)
CSS debug (for validating Layouts and Components)
QUnit (layout, Component (via data attributes) and JS unit tests - to reduce Web Application integration errors)
Automated UI test generation (via UI Test Bookmarklet)
Debug JS (unit test automation)

Productivity

Chassis Landing page with links to Components and tooling within the framework
Textmate Snippets of Common HTML and JavaScript Components (development tool)
Layout Lister (lists all available layouts via layouts-and-components.php)
Component Lister (lists all available components via layouts-and-components.php
Page Tracker, a handy document for tracking development progress on each Store
Issues Log, a handy document for tracking development issues
To do Log, a handy document for tracking the higher level remaining tasks and back log tasks

Mobile

iPhone and iPad icons and Start up screens
Mobile User Agents are made available in JavaScript
Mobile layouts can be catered for via Media Query examples
iOS device orientation made available to JavaScript and CSS
Accessibility supported through WAI ARIA Landmark Roles
Offline Access can be supported via dynamic manifest PHP script

Experimental

Baseline Grid Layout creator (prototype layout creation tool - generates Less files)

Provide feedback

Saved searches

Use saved searches to filter your results more quickly