A front-end framework for easy development and integration of accessible and responsive websites and webapps that follow the EPFL graphics charter.

It was designed for all webmasters and webdevelopers at EPFL and does not require any particular knowledge of CSS or JS. The only requirement is a basic knowledge of HTML.

Concepts

Semantic HTML markup

The framework makes full usage of HTML5 semantic tags, and is meant to rely heavily on Microdata for structuring semantic information.

Decoupling data and presentation

Presentation is done via CSS classes only to stay independant from the HTML markup.

This allows a better separation between the content semantics and its styling.

Decoupling presentation and widgets

Widgets are activated through HTML5 data-* attributes, and are independant from the CSS styling.

All their logic and states are reflected in attributes, not CSS classes.

Pure CSS transitions

Since CSS3 transitions are usually faster than JavaScript animations (using jQuery), animations in the framework are only using CSS3 transitions.

They also offer a grafeul fallback to older browsers, since they will simply be ignored.

Vector images

To better accomodate to various screen sizes and resolutions, the framework only uses vector images and icon fonts for its illustrations.

Accessibility at every step

The library is built keeping accessibility in mind. The markup and the widgets are annotated to be fully WAI-ARIA compatible to guarantee easy access to the information to all users.