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.