Web Content Accessibility Guidelines (WCAG) 2.0

All websites using the framework need to target a Level A compliance. Level AA should be reached whenever possible.

WAI-ARIA

Content is annotated using WAI-ARIA roles and states and properties. All widgets are WAI-ARIA compatible.

Access keys

All modern browsers support access keys to make keyboard-only navigation easier. To activate the access keys, they all need some modifier keys combination. Below is the list of theses combinations by browser and platform:

Browser Access Key modifier keys
Browser	Platform	Modifier keys
Chrome	Windows/Linux	`Alt`
Chrome	Mac	`Ctrl` + `Opt`
Firefox	Windows/Linux	`Alt` + `Shift`
Firefox	Mac	`Ctrl` + `Opt`
Internet Explorer	Windows	`Alt`
Safari	Mac	`Ctrl` + `Opt`
Safari	Windows	`Alt`
Opera	All	`Shift` + `Esc`

The EPFL websites use an access key system derived from the UK Government Access Key Systems:

EPFL's Access Key Systems
Shortcut	Target
C	Skip to content
N	Skip to main navigation
T	Back to the top of the page
0	Go the the accessibility page
1	Go to the Homepage of the site
2	Go to the News page (if any)
3	Go to the sitemap
4	Focus the search field
5	Go to the FAQ page (if any)
6	Go to the Help page (if any)
7	Complaints procedure and feedback (if any)
8	Terms and conditions (if any)
9	Contact the website team (mailto link or link to a contact form)

Installation

First choose one of the page templates as starting point.

Then make sure to include the auto-updating header into your html head:

http://static.epfl.ch/latest/includes/head.html

or include the optimized auto-updating head links, head scripts and footer scripts into your html head/foot for optimal performances:

http://static.epfl.ch/latest/includes/head-links.html
http://static.epfl.ch/latest/includes/head-scripts.html
http://static.epfl.ch/latest/includes/foot-scripts.html

As most templating languages do not support including content from a remote server, including the files usually comes down to:

Creating a cron job that retrieves the remote files and creates a local copy on your server every day, via wget for insance.
Including the local copy into your application templates.

Optimized head/foot files

For better performances it is recommended to separate the CSS and JS loading.

Include the CSS using the head links into your <head> tag.

http://static.epfl.ch/latest/includes/head-links.html

Add your custom CSS just after and before the scripts for optimal performances.

Include the head scripts before the closing of your </head> tag.

http://static.epfl.ch/latest/includes/head-scripts.html

And include the scripts before the closing of your </body> tag.

http://static.epfl.ch/latest/includes/foot-scripts.html

http://static.epfl.ch/latest/includes/foot-scripts-notracking.html

if you do not want Google Analytics tracking on your site.

HTML head template versions ready for inclusions in custom templates
Version	File name
EPFL	head-links.html
CDH	head-links-cdh.html
CDM	head-links-cdm.html
ENAC	head-links-enac.html
IC	head-links-ic.html
INTER	head-links-inter.html
SB	head-links-sb.html
STI	head-links-sti.html
SV	head-links-sv.html
Associations	head-links-associations.html
Neutral	head-links-neutral.html

All-in-one head files

The simplest way to use the framework is to use the all-in-one head files versions:

HTML head template versions ready for inclusions in custom templates
Version	File name
EPFL	head.html
CDH	head-cdh.html
CDM	head-cdm.html
ENAC	head-enac.html
IC	head-ic.html
INTER	head-inter.html
SB	head-sb.html
STI	head-sti.html
SV	head-sv.html
Associations	head-associations.html
Neutral	head-neutral.html

Just include these into your html <head> tag.

If for some reason the latest version is not compatible with your system, specific versions can be accessed via:

http://static.epfl.ch/vX.Y.Z/includes/head.html

Put the file head-links.html, head-script.html, foot-scripts.html together.


  <head>
   <title>Website name </title>
    <meta charset="utf-8" />
    <link rel="import" href="//static.epfl.ch/latest/includes/head-links.html">
    <link rel="import" href="//static.epfl.ch/latest/includes/head-scripts.html">
  </head>
  <body>
    <div id="page" class="site site-wrapper" itemscope itemtype="http://schema.org/WebPage">
     <header id="epfl-header" class="site-header epfl" role="banner" aria-label="Global EPFL banner" data-ajax-header="https://static.epfl.ch/latest/includes/epfl-header.en.html"></header>
    </div>
   <link rel="import" href="//static.epfl.ch/latest/includes/foot-scripts.html">
  </body>

Finally make sure your template includes a fallback global header that will dynamically load the full header:


  <header id="epfl-header" class="site-header epfl" role="banner" aria-label="Global EPFL banner" data-ajax-header="https://static.epfl.ch/latest/includes/epfl-header.en.html">
    ...
  </header>

The header version that will be loaded is specified by the data-ajax-header attribute, and can be one of:

Global head template versions ready for inclusions in templates
Version	File name
Header with full search form	epfl-header.en.html
Header with no local site search	epfl-header-no-localsearch.en.html

If you chose the cron job approach described above for your CSS and JS, you'll also have to load the header via a cron job and update the data-ajax-header to point to your local copy. Otherwise you may end up with different versions that might not work properly together.

You can then further customize the search URLs and parameters as follows:

Local search

Add the following script at the end of your template:

// Overwrite local site search
require(["epfl-jquery"], function($){
  require(["search"], function(s){
    $("#epfl-header").epfl_search("update", {engines:{site:{url: "search.html", param: "q", ac: false}}});
  });
});

site is the name of the engine that handles the local site search
url is the url where the search form will be submitted
param is the name of the parameter containing the search query
ac: false means that the default auto-complete is disabled

Global search

Add the following script at the end of your template:

// Overwrite global EPFL sites search
require(["epfl-jquery"], function($){
  require(["search"], function(s){
    $("#epfl-header").epfl_search("update", {engines:{epfl:{url: "search.html", param: "q", ac: false}}});
  });
});

epfl is the name of the engine that handles the global sites search
url is the url where the search form will be submitted
param is the name of the parameter containing the search query
ac: false means that the default auto-complete is disabled

Custom Scripts

Load a custom jQuery plugin

At the end of your page, before the </body> tag, load the desired plugins as:

<script>
require(["epfl-jquery", "../relative/path/to/jquery-plugin.js", "/absolute/path/to/jquery-plugin.js"], function($) {

  // jQuery is available as $ with the plugins included
  $(".my-class").myPlugin();

});
</script>

If your plugin is not AMD compatible, you may need to load it as:

<script>
require(["epfl-jquery"], function($) {

  // jQuery is available as $ with the plugins included
  $.getScript("../relative/path/to/jquery-plugin.js", function(){
    $(".my-class").myPlugin();
  });

});
</script>

If you used epfl-jquery-notracking.js instead of epfl-jquery.js, or if you included footer-scripts-notracking.html instead of footer-scripts, you will need to call require with epfl-jquery-notracking instead of epfl-jquery.

Load datatables script

In the <head> of the page import:

<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.6/css/jquery.dataTables.css">

<script>

    require(["epfl-jquery", "//cdn.datatables.net/1.10.6/js/jquery.dataTables.js"], function($) {
        "use strict";

        require(["datatables"], function() {
              $(function() {
                $('#example').dataTable( {
                    "order": [[ 3, "desc" ]]
                } );
              });
        })
    });
</script>

Load a jQuery plug-in different from epfl-jquery

<script>

require(['epfl-jquery'], function($){
    //disable epfl-jquery
    requirejs.undef('jquery');
    //jQuery new variable
    require(['http://code.jquery.com/jquery-1.11.2.min.js'], function(){
        console.log($.fn.jquery, jQuery.fn.jquery);
    });
});

</script>

Load a custom script

Define your scripts as AMD modules:

define("script1", ["epfl-jquery"] , function ($) {

  // jQuery is available as $

  var _foo = function(){
    ...
  };

  var _bar = function(){
    ...
  };

  return {
    foo: _foo,
    bar: _bar,
  };
});

define("script2", ["epfl-jquery"] , function ($) {

  // jQuery is available as $

  var _baz = function(){
    ...
  };

  var _qux = function(){
    ...
  };

  return {
    baz: _baz,
    qux: _qux,
  };
});

At the end of your page, before the </body> tag, load the desired scripts as:

<script>
require(["epfl-jquery", "../relative/path/to/custom/script1.js", "/absolute/path/to/custom/script2.js"], function($, s1, s2) {

  // jQuery is available as $

  // script1 is available as s1
  s1.foo()
  s1.bar()

  // script2 is available as s2
  s2.baz()
  s2.qux()

});
</script>

Analytics

If you use the default scripts, you will have Google Universal Analytics tracking included.

To collect the data on your account, just use the following code:

<script>
require(["epfl-jquery", "analytics"], function($, ga) {

  ga("create", "UA-000000-01", "auto");
  ga("set", "anonymizeIp", true); 
  ga("send", "pageview");

});
</script>

Remember to replace UA-000000-01 with your tracking identifier.

You can find more information in the Google Universal Analytics documentation.

Browser support

The framework is expected to work in all modern web browsers. Basically:

Browser support for the framework
Browser	Supported versions
Chrome	43 42
Firefox	38 37
Safari	8 7
Internet Explorer	11 10
Tablette	Ipad Air 2
Iphone	iPhone 6/iPhone 5

3rd-party libraries

The framework uses various 3rd-party libraries, some are packaged inside the scripts, others are lazy-loaded from a CDN for better performances.

Packaged libraries

These libraries are included in the framework and constitute some of its building blocks.

3rd-party libraries packaged in the front-end framework
Library	Version	Role
jQuery	1.11.3	Base JavaScript library for DOM traversal and manipulation, event handling and ajax requests
TouchSwipe	1.6.12	A jQuery plugin that adds support for touch events on mobile devices
jQuery Autocomplete	1.2.24	A jQuery plugin that adds asynchronous auto-complete to search forms
Normalize.css	3.0.3	CSS normalization of default browser styles
html5shiv	3.7.3	HTML5 sectioning elements support for legacy Internet Explorer
Respond.js	1.4.2	CSS3 media queries polyfill for browsers that do not support it
RequireJS	2.1.20	JavaScript file and module loader
zeptojs	1.1.6	JavaScript library for modern browsers

CDN libraries

These plugin libraries are lazy-loaded on demand from cdnjs for better performances.

3rd-party libraries lazy-loaded by the front-end framework
Library	Version	Role
highlight.js	8.0	Syntax highlighting for the Web
MathJax	2.3	JavaScript display engine for mathematics (LaTeX, MathML & AsciiMath)
marked	0.3.1	A markdown parser and compiler

Changelog

v0.28.0 - 2018.08.28

Remove search filters
Remove autocomplete

v0.27.5 - 2018.08.22

Fix search 'This website'
Fix links in header

v0.27.4 - 2018.07.18

Add EPFL Middle East Section in header
Fix sub section in changelog

v0.27.3 - 2018.07.02

Fix server name in templates and includes
Update dev dependencies

v0.27.2 - 2018.06.11

Remove timestamp in ajax request for header
Fix link in header
Fix ajax cors
Clean readme

v0.27.1 - 2018.04.04

Improve README
Disable package-lock.json
Fix logo size with mobile

v0.27.0 - 2018.04.03

Improve svg fallback
Fix autocomplete position
Fix bfdocs path
Fix dependencies
Fix color of logo (color too dark in previous)
Fix inline style in header
Copy the archive during the deployment to download project

v0.26.1 - 2017.11.21

Fix resolution of html lang attribute
Fix html of headers (remove extra tag ul & strong)
Fix related links
Fix grunt-contrib-coffee version

v0.26.0 - 2017.10.18

Set cookie (from Cookie Consent) on localhost and external domain
Remove protocols in header

v0.25.0 - 2017.10.11

Add science and society link in header
Add Travis-CI testing
Fix image visual.jpg
Fix scoped style in documentation
Fix HTML tag in documentation
Fix typo in README.md
Clean Google Analytics example (with anonymization)
Remove injection of CSS in Cookie Consent

v0.24.0 - 2017.08.29

Add cookie policy banner
Update package grunt-w3c-html-validation
Fix unclosed element b
Remove HTTP in css
Remove HTTP in docs
Remove useless example Thumbnail Box (not in doc)
Remove tag on grunt bump

v0.23.1 - 2017.06.13

Show complete news title
Update copyright date
Fix some unit tests

v0.23.0 - 2017.03.20

add ip anonymization in analytics
specifies automatic cookie domain configuration

v0.22.12 - 2016.04.27

change dimensions EPFL Logo
Update link in EPFL banner

v0.22.9 - 2016.04.14

New logo EPFL

v0.22.8 - 2016.03.18

How to integrate the EPFL banner in a site
Change "Help" link in EPFL banner
Examples: Standard Popup Image & Popup Image for downloading
Update library documentation

v0.22.6 - 2016.08.01

Slideshow delay to 7 sec
Adding horizontal bar for Portal layout

v0.22.2 - 2015.10.30

Image section to help users
Creation Thumbnail Box
Add mail button

v0.22.0 - 2015.10.12

Final Integration of vertical navigation in horizontal navigation for mobile device
Carousel Slideshow with custom controls
Carousel With custom controls and cycleItems=True
Authorisation https in search bar

v0.21.3 - 2015.09.03

First Integration of vertical navigation in horizontal navigation for mobile device

v0.20.3 - 2015.06.22

General

feat - Organigramme add hashed-bg class to create hashed backgrounds
feat - auto-add code examples in the doc
fix - search form in the doc to use the new form-input-group logic
feat - improve mainnav/epflnav/search loading to avoid jumping/flickering

v0.20.2 - 2015.06.18

General

feat - style select inputs in IE9+
fix vertical alignment on form input group
fix remove border on auto truncate

v0.20.1 - 2015.06.16

General

suppression warning in people section

v0.20.0 - 2015.06.15

General

Generic search form for actu et memento section
Improving People for enac faculty
Bug left menu on a first level faculty page
Bug logo EPFL cut in Firefox

v0.19.1 - 2015.06.06

General

Update bandeau with last content
Red title in bandeau
Suppression soulignement bandeau

v0.19.0 - 2015.06.04

General

Adding responsive-embeds for video
Refactoring people on 4 columns
Bug checkbox & radio buttons on mobile
Bug au-truncate for memento & alignement code source with html
Alignement code source with html for actu

v0.18.0 - 2015.05.20

General

Refactoring people on 1/2 columns
Adding actu 4 images vertical/horizontal
Elimination zoom effet layout/boxes size:l/xl/xxl
Bug au-truncate for memento

v0.17.0 - 2015.05.12

General

Adding study plan
Adding people on 1/2 columns

v0.16.0 - 2015.05.04

General

Creation memento calendar
Improving memento box for mobile in sub-pages
Improving actu box in sub-pages
Adding datatables compatibility in doc
Fix adding .btn-multiline-list for buttons on more lines
Fix truncate removes all text on small devices

v0.15.0 - 2015.04.17

Homepage

Add icon-home and social widgets
Improving memento box for mobile
Improving actu box
Adding horizontal bar
Adding separation white lines between boxes in tablette/mobile mode

v0.14.0 - 2014.11.09

Styles

Add possibility to disable font size increase in big screens using .site-no-sizeadjust
Fix select dropdown icon position on firefox

v0.13.4 - 2014.11.01

General

Add new icon and update message styles accordingly
Fix search form
Keyboard navigation on menubar sub-items
Fix input fields not working in some browsers

Styles

Fix icons vertical alignment

v0.13.3 - 2014.09.03

General

Fix custom search and its documentation
Fix various labels in search form for better clarity and rendering

Styles

Try fixing icon font problem reports by moving the start codepoint
Fix letter spacing on global navigation items and paddings on panels
Fix search and global nav buttons highlight color
Fix top margin on global header
Adjust height for media visuals on mobile devices

Documentation

Fix styleguide not including css/js/jpg files from the theme

v0.13.2 - 2014.07.15

General

Add charset and description meta tags to the templates and doc
Add favicon.ico path to templates and doc

Styles

Fix banner image size
Adjust icon line height
Adjust mainav color on mobile devices

Scripts

Remove tabindex when leaving accessibility link targets to avoid mouse focus
Fix auto-truncate (ellipsis)

Documentation

Accessibility improvements
Fix incorrect tab numbering
Update human.txt
Update visual image
Add auto-truncate example

v0.13.1 - 2014.07.09

Scripts

Fix JS loading issues on IE7

Styles

Adjust vertical alignment on icons
Fix themed headgins color

Documentation

Fix some typos
Update git repository link

v0.13.0 - 2014.07.03

General

Add support for pagination navigation
Add support for plain icon buttons
Add various rel attributes to links for better SEO

Styles

Improve support for un-styled lists
Fix media element height when not in list
Do not speak out presentation only element on screen readers

Scripts

Improve tree widget accessibility
Fix scripts not loading when missing require call in the footer

Documentation

Add Google Analytics documentation
Update custom scripts documentation

v0.12.1 - 2014.06.25

Documentation

Fix website name template example
Add documentation for add new icons

Styles

Add 'more' icon and fixed some others

v0.12.0 - 2014.06.25

General

Fix some accessibility issues
Follow 1st child link when mainnav link is just a toggle
Add test suite

Styles

Adjust media list margins
Add missing neutral CSS theme
Fix vertical alignment on buttons
Add media banner (media-banner)
Add support for disabled buttons (btn-disabled) and menu items (menu-item-disabled)
Add support for disabled and active toolbar items (toolbar-item-disabled, toolbar-item-active)
Add support for nested tabs
Small adjustments

Scripts

Fix JS trim error on IE, switch to jQuery's trim instead
Fix no-tracking libraries still including google analytics code
Fix basic destroy procedure, and validate toggle and tooltip destruction
Ignore events on disabled widgets
Various fixes

Documentation

Add jQuery module documentation
Add media banner examples
Update buttons, menubar and toolbar examples
Fix links to file includes
Add example of collapse working with mouseenter/mouseleave event

v0.11.0 – 2014.06.06

Scripts

Fix JS errors on older browsers (IE<9)
Fix no-tracking JS loading

Styles

Fix some XS styles do not overwrite S styles
Add s-grid to overwrite default grid on tablets
Add in-line icons

Documentation

Fix templates path
Update templates to use the s-grid
Various fixes to the templates
Update search and sitemap pages
Document custom scripts/plugins usage
Add changelog to the doc

v0.10.2 – 2014.06.04

Scripts

Add no-tracking version of the foot scripts
Fix respondjs CDN loading
Fix broken header links toggles

Styles

Fix z-index and width of notifications
Fix border on links not having the same color as the text
Add more space around links on small devices
Fix word break in code blocks

Documentation

Fix some typos and links to the templates

v0.10.1 – 2014.05.28

General

Do not add heading anchors on secondary headings

Scripts

Remove tracking lib from the notracking scripts
Add missing notracking scripts
Various performance optimizations

Styles

Adjust tooltip pointer border size

Documentation

Fix background colors being all gray
Fix 3rd-party library version not showing
Various performance optimizations

v0.10.0 – 2014.05.27

General

Move the documentation to the production server : bootstrap.epfl.ch
Static files are served by static.epfl.ch
Open project blog for news and maintenance announcements : bootstrap blog
Open project wiki for developer documentation : bootstrap wiki
Open git repository to the public: bootstrap git

Scripts

Enable GoogleAnalytics by default
Add no-tracking variants of the libraries
Fix jQuery noConflict mode and dependency with touch library

Styles

Fix the grid cells for small devices
Fix tooltip pointer position
Fix heading anchors positioning
Add styling for figure/figcaption
Add highlighting of social media links
Add some default styling for when JS is disabled
Add link to all results in auto-complete
Add panel-cell versions of panels for easier inclusion in grid cells
Update stroked tables styles
Adjust margin and spacing on in-line buttons, headings, media elements and table captions
Fix full-width cells not taking 100% width
Update print styles
Limit text area width to content width

Documentation

Update installation procedure and page templates
Update to include modules and widget structures as well as more examples.
Add link to JS documentation
Updated page structure documentation
Place the page header in the correct place instead of the page content
Fix link to templates folder
Add documentation for panel-cell
Update 3rd-party libraries documentation and add version numbers
Open navigation tree to show current page
Load header from the static server

Templates

Update the global homepage template
Update localnav structure to match themainnav`
Fix images sizes
Add EPFL header includes without the local search
Add minimal template examples

v0.9.0 – 2014.05.09

First public beta

Page Structure

The pages have the following structure:

.a11y: the accessibility quick navigation links
.site: the site wrapper
- #epfl-header.epfl.site-header: the global EPFL header
  - .logo: the EPFL logo
  - .epflnav: the global navigation links wrapper
    - #epfl-navigation: the global navigation links
  - .search: the search wrapper
    - #search: the search section
      - #search-form: the search form
- #header.site-header: the site header
  - .site-title: the site title
  - .bcnav: the breadcrumb navigation
  - .lang: the language selector
  - .mainnav: the main/horizontal navigation wrapper
    - #main-navigation: the main/horizontal navigation
  - #tools.tools: the tools bar
- #content.site-content.page: the actual page
  - .page-header: the page header
    - .page-title: the page title
  - .page-content: the page content
  - .page-footer: the page footer
  - #sidebar.sidebar: the side bar
    - .localnav: the secondary/vertical navigation wrapper
      - #secondary-navigation: the secondary/vertical navigation
- #footer.site-footer: the site footer
  - .login: the login link

Grid

The framework is based on a 12-columns grid for easier scaffolding. Each major block/row in the grid is defined using the g-row class. Individual divisions inside a block/row are then defined using the g-span-* classes.

Grid horizontal classes

Cell width

The width of a cell in the grid is defined using the following classes:

g-span-col1

g-span-col11

g-span-col2

g-span-col10

g-span-col3

g-span-col9

g-span-col4

g-span-col8

g-span-col5

g-span-col7

g-span-col6

g-span-col7

g-span-col5

g-span-col8

g-span-col4

g-span-col9

g-span-col3

g-span-col10

g-span-col2

g-span-col11

g-span-col1

g-span-col12

Cell horizontal offset

If for some reason, a cell needs to be offset from its original horizontal position, you can use:

n/a

g-offset-col1

g-offset-col2

g-offset-col3

g-offset-col4

g-offset-col5

g-offset-col6

g-offset-col7

g-offset-col8

g-offset-col9

g-offset-col10

g-offset-col11

Convenience classes

Some additional classes have been added for easier structuring. They respectively allow to create cells that span 1/12, 1/6, 1/4, 1/3, 1/2, 2/3, 3/4, 5/6, 11/12 or the full width of a row:
g-span-1_12, g-span-1_6, g-span-1_4, g-span-1_3, g-span-1_2, g-span-2_3, g-span-3_4, g-span-5_6, g-span-11_12 and g-span-1_1.

The same has been done for the cell offset g-offset-….

There is also a g-fill-cell class to have an element take up all the cell space.

Grid vertical classes

Cell height

The height of a cell in the grid can be fixed using the following classes:

g-span-row1

g-span-row2

g-span-row3

g-span-row4

g-span-row5

Cell vertical offset

If for some reason, a cell needs to be offset from its original vertical position, you can use:

n/a

g-offset-row1

g-offset-row2

g-offset-row3

g-offset-row4

Nested grids

Grids can easily be nested to offer infinite scaffolding possibilities.

g-span-1_2

g-span-1_3

g-span-2_3

g-span-1_2

g-span-3_4

g-span-1_4

Overwrite grid in tablet layout

All grid-span-… and grid-offset-… classes also exist in a grid-span-s-… and grid-offset-s-… version to overwrite the layout for tablets (s-layout).
See homepage-faculty.en.html and homepage-global.html for an example.

Fixed vs fluid layout

By default the width of the layout is constrained by the .site element, but it can be set to fluid by simply adding the site-fluid class to it.

Font size adjustments

By default, the grid will adapt to larger screens and increase the font-size for easier reading when the space allows it. This feature can be disabled by adding the site-no-sizeadjust class to the .site element.

Visibility

The visibility of individual elements can be adjusted for each screen sizes.

Hiding

Hidden

Using the hidden class, the element is hidden from the users and the screen readers. There are also size-specific equivalents of this class to only hide elements at specific sizes:

hidden

hidden-xxs

hidden-xs

hidden-s

hidden-m

hidden-l

hidden-xl

hidden-xxl

Using the visuallyhidden class, the element is hidden from the users only, but still be visible to screen readers. There are also size-specific equivalents of this class to only hide the elements at specific sizes:

visuallyhidden

visuallyhidden-xxs

visuallyhidden-xs

visuallyhidden-s

visuallyhidden-m

visuallyhidden-l

visuallyhidden-xl

visuallyhidden-xxl

Hidden from screen readers

If you add the role="presentation" attribute on an element, it will be ignored by screen readers but still shown to normal users.

Visible

Elements that have been hidden by default can be made visible at specific sizes using the following classes:

visible-xxs

visible-xs

visible-s

visible-m

visible-l

visible-xl

visible-xxl

The same goes for visuallyhidden elements:

visible-xxs

visible-xs

visible-s

visible-m

visible-l

visible-xl

visible-xxl

Colors

Base

Main color system
Primary font color
Secondary font color
Primary border color
Secondary border color
1st neutral color
2nd neutral color
3rd neutral color
4th neutral color

Information

Color codes are also used to convey some information, such as operation state, problem severity, etc. Various references exist for this, such as:

The EPFL framework is based on these references and defines the following color codes:

Information color codes
State	Danger	Caution	Non-safe	Safe	Neutral
Error	Error	Warning	Info	Success	Message
Severity	Critical	High	Low	Normal	Medium
Operation	Stop		Start	Continue/Finish	More

Themes

The EPFL framework has the particularity to exist in various themes to better identify the different domains (mainly schools). The color palette is defined by the head includes that will load the corresponding style sheet.

The following table goes over these various colors:

Themes color palette
Name	1st color	2nd color	3rd color	4th color
EPFL
ENAC
SB
STI
IC
SV
CDM
CDH
INTER
Associations

Theme classes

Each theme provides a set of classes to easily access the color palette:

Themes CSS classes
Palette	Foreground class	Background class
Current theme	local-color1	local-bg-color1
	local-color2	local-bg-color2
	local-color3	local-bg-color3
	local-color4	local-bg-color4
Neutral theme	neutral-color1	neutral-bg-color1
	neutral-color2	neutral-bg-color2
	neutral-color3	neutral-bg-color3
	neutral-color4	neutral-bg-color4
Hashed Background		hashed-bg

If you wish to use the color of another theme in one of the pages, you can use one of the following classes:

Other Themes CSS classes
Theme	Foreground class	Background class
EPFL	epfl-color	epfl-bg-color
EPFL	epfl-color2	epfl-bg-color2
ENAC	enac-color	enac-bg-color
SB	sb-color	sb-bg-color
STI	sti-color	sti-bg-color
IC	ic-color	ic-bg-color
SV	sv-color	sv-bg-color
CDM	cdm-color	cdm-bg-color
CDH	cdh-color	cdh-bg-color
INTER	inter-color	inter-bg-color
Associations	associations-color	associations-bg-color

Typography

Fonts

Main fonts of the front-end framework
Type	Font Styles	Usage
Primary content	Arial, Helvetica, Verdana, sans-serif	generic content
Secondary content	Georgia, 'Times New Roman', Times, serif	button-links, toolbar headers, …
Headings	"Arial Black", Arial, Helvetica, Verdana, sans-serif	content headings
Title	Impact, "Arial Black", Arial, sans-serif	site title, panel titles, sidebar headings, external content headings, …
Code	Monaco, Courier, "Lucida console", "Consolas", monospace	Code samples
Icons	epfl-symbols	Icons to illustrate an action

Headings

Level 1 Heading

Level 2 Heading

Level 3 Heading

Level 4 Heading

Level 5 Heading

Level 6 Heading

Common content

In Pellentesque Faucibus Vestibulum. Nulla At Nulla Justo

Odio. Proin quis tortor orci. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget in metus. In pellentesque faucibus vestibulum. Nulla at nulla justo, eget luctus tortor. Nulla facilisi. Duis aliquet egestas purus in blandit. Curabitur.

Themed content

In Pellentesque Faucibus Vestibulum. Nulla At Nulla Justo

Code blocks

A sample Java code block:

public class HelloWorld {
  public static void main(String[] args) {
    System.out.println("Hello, World");
  }
}

Images

To add images to your content, you need to add the following code:

The image will be displayed at its original size by default, as below:

You can also specify the size of the image, using the width and height attributes:

Bootstrap will take care of resizing the image if its width is larger than the content area, while keeping the aspect ratio intact. So if the content area has a width of 200 pixels, your image will be downsized to 200 pixels. Here is an example:

Positioning images

You can place the image to the left/right of your content using the following .left and .right CSS classes.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Images with a fixed proportion

If you want your image to have a width that is always a percentage of the content area, you can use the following code:

This will make sure your image is 50% of the content area width whether you are viewing the page on a desktop or on a mobile.

Images with a forced size

If you need your image to have a specific size, and you do not want bootstrap to do any resizing, you just need to specify its size using an inline style attribute:

Note that you will need your own CSS overrides if you want to do any resizing on such images.

Showing different images for different screen sizes

By default, when you add an image to your content, bootstrap will just resize it to make sure it is not cropped. But you will still have the same image for each screen size.

This is not always the optimal experience and you might want to serve a different image to mobile users than the one you show to desktop users.

There are several solutions to address this.

Using CSS classes

Bootstrap provides some CSS visibility helper classes that you can leverage for such a use case:

Using the HTML5 picture element

HTML5 provides a new element to address this particular issue. You can use it as follows:

You can read more on this approach in Responsive Images Done Right from the guys at Smashing Magazine, and also in Built-in Browser Support for Responsive Images from the HTML5 Rocks team.

Lists

Ordered lists

Nulla Facilisi. Duis Aliquet Egestas
Nullam In Dui Mauris. Vivamus Hendrerit
1. Donec Congue Lacinia Dui, A Porttitor Lectus
2. Ut In Nulla Enim. Phasellus
3. Vestibulum Ante Ipsum Primis
  1. Nullam In Dui
  2. Praesent Id Metus Massa, Ut Blandit
Lorem Ipsum Dolor Sit
Proin Quis Tortor Orci. Etiam At
Curabitur Vulputate, Ligula Lacinia Scelerisque

Unordered lists

Nulla Facilisi. Duis Aliquet Egestas
Nullam In Dui Mauris. Vivamus Hendrerit
- Donec Congue Lacinia Dui, A Porttitor Lectus
- Ut In Nulla Enim. Phasellus
- Vestibulum Ante Ipsum Primis
  - Nullam In Dui
  - Praesent Id Metus Massa, Ut Blandit
Lorem Ipsum Dolor Sit
Proin Quis Tortor Orci. Etiam At
Curabitur Vulputate, Ligula Lacinia Scelerisque

Definition lists

Proin Quis Tortor Orci

Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor. Ut in nulla.

Donec Congue Lacinia

Proin quis tortor orci. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget in metus. In pellentesque faucibus vestibulum. Nulla at nulla justo, eget luctus tortor. Nulla.

Proin Quis Tortor: In pellentesque faucibus vestibulum. Nulla at nulla justo, eget luctus tortor. Nulla facilisi. Duis aliquet.
Suspendisse Dictum: Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor. Ut in nulla enim. Phasellus molestie.

Lorem Ipsum Dolor

Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare ante, ac egestas est urna sit amet arcu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per.

Unstyled lists

If you need to have a bare list, you can use the list-unstyled class to remove all the default list styles.

Nulla Facilisi. Duis Aliquet Egestas
Nullam In Dui Mauris. Vivamus Hendrerit
- Donec Congue Lacinia Dui, A Porttitor Lectus
- Ut In Nulla Enim. Phasellus
- Vestibulum Ante Ipsum Primis
Lorem Ipsum Dolor Sit
Proin Quis Tortor Orci. Etiam At
Curabitur Vulputate, Ligula Lacinia Scelerisque

Tables

Styled table

To style a table, add the table class to it.

Some table caption
Entry Header 1	Entry Header 2	Entry Header 3	Entry Header 4
Entry First Line 1	Entry First Line 2	Entry First Line 3	Entry First Line 4
Entry Line 1	Entry Line 2	Entry Line 3	Entry Line 4
Entry Last Line 1	Entry Last Line 2	Entry Last Line 3	Entry Last Line 4

Narrow table

By default, tables will take up all the horizontal space available. If you wish to have a narrow table, just add the table-narrow class to it.

Some table caption
Entry Header 1	Entry Header 2	Entry Header 3	Entry Header 4
Entry First Line 1	Entry First Line 2	Entry First Line 3	Entry First Line 4
Entry Line 1	Entry Line 2	Entry Line 3	Entry Line 4
Entry Last Line 1	Entry Last Line 2	Entry Last Line 3	Entry Last Line 4

Smaller table

You can reduce the overall text size in the table to fit in more content by adding the table-small.

Some table caption
Entry Header 1	Entry Header 2	Entry Header 3	Entry Header 4
Entry First Line 1	Entry First Line 2	Entry First Line 3	Entry First Line 4
Entry Line 1	Entry Line 2	Entry Line 3	Entry Line 4
Entry Last Line 1	Entry Last Line 2	Entry Last Line 3	Entry Last Line 4

Stroked table

To emphasize the division between the table rows, you can use the table-stroke class that will add full lines between the table rows.

Some table caption
Entry Header 1	Entry Header 2	Entry Header 3	Entry Header 4
Entry First Line 1	Entry First Line 2	Entry First Line 3	Entry First Line 4
Entry Line 1	Entry Line 2	Entry Line 3	Entry Line 4
Entry Last Line 1	Entry Last Line 2	Entry Last Line 3	Entry Last Line 4

Striped table

To add zebra-stripes to the table, use the table-striped class.

Some table caption
Entry Header 1	Entry Header 2	Entry Header 3	Entry Header 4
Entry First Line 1	Entry First Line 2	Entry First Line 3	Entry First Line 4
Entry Line 1	Entry Line 2	Entry Line 3	Entry Line 4
Entry Last Line 1	Entry Last Line 2	Entry Last Line 3	Entry Last Line 4

Hoverable table

To add a hover effect on the table, use the table-hover class.

Some table caption
Entry Header 1	Entry Header 2	Entry Header 3	Entry Header 4
Entry First Line 1	Entry First Line 2	Entry First Line 3	Entry First Line 4
Entry Line 1	Entry Line 2	Entry Line 3	Entry Line 4
Entry Last Line 1	Entry Last Line 2	Entry Last Line 3	Entry Last Line 4

Responsive table

To make tables scrollable on small devices, wrap it inside an element with the table-container class.

Some table caption
Entry Header 1	Entry Header 2	Entry Header 3	Entry Header 4
Entry First Line 1	Entry First Line 2	Entry First Line 3	Entry First Line 4
Entry Line 1	Entry Line 2	Entry Line 3	Entry Line 4
Entry Last Line 1	Entry Last Line 2	Entry Last Line 3	Entry Last Line 4

Quotes

Block quotes

Adding the <cite> attribute to a <blockquote> (and its <footer>):

You know the golden rule, don’t you boy? Those who have the gold make the rules.

Crazy hunch-backed old guy in Aladdin

A quote from a specification:

A person's name is not the title of a work — even if people call that person a piece of work

HTML5 for Web Developers

An academic-style book citation:

Citations … all include the following: author (or editor, compiler, or translator standing in place of the author), title (and usually subtitle), and date of publication.

The Chicago Manual of Style, 15th Edition (Chicago: University of Chicago Press, 2003), 596

Inline quotes

An academic-style journal citation:

The information capacity of the human motor system in controlling the amplitude of movement, Paul M. Fitts (1954). Journal of Experimental Psychology, volume 47, number 6, June 1954, pp. 381–391

Nested quotations:

Luke continued, And then she called him a scruffy-looking nerf-herder! I think I’ve got a chance! The poor naive fool…

Forms

Styled form

label 1

legend

label 1.1

Choice 1

Choice 2

Choice 3

legend

Choice 1

Choice 2

Choice 3

select

textarea

number

range

color

tel

url

date

time

month

week

datetime-local

Inline form

Vertical form

Horizontal form

Input group

Icons

The icon module makes it easy to illustrate various actions with an icon for easier comprehension.

Default icons

List of in-line icons
CSS class name (to append after `icon-`)	preview
home
arrow-head-top
arrow-head-right
arrow-head-bottom
arrow-head-left
arrow-top
arrow-right
arrow-bottom
arrow-left
arrow-top-left
arrow-top-right
arrow-bottom-right
arrow-bottom-left
arrow-stop-top
arrow-stop-right
arrow-stop-bottom
arrow-stop-left
arrow-line-top
arrow-line-right
arrow-line-bottom
arrow-line-left
arrow-forward
arrow-backward
refresh
out
plus
minus
checkmark
cross
pencil
lock-locked
lock-unlocked
cogwheel
admin
access
info
question
ok
stats
text
magnifier
user
user-profile
group
hierarchy
hierarchy2
print
bulb-off
bulb-on
link
map-pointer
target
share
share-facebook
share-twitter
share-linkedin
share-googleplus
mail
mailinglist
rss
time
message
podcast
download
upload
file
file-pdf
files
area
ruler
menu
more
important

Button icons

List of button icons
CSS class name (to append after `icon-`)	Preview
home_button
arrow-head-top_button
arrow-head-right_button
arrow-head-bottom_button
arrow-head-left_button
arrow-top_button
arrow-right_button
arrow-bottom_button
arrow-left_button
arrow-top-left_button
arrow-top-right_button
arrow-bottom-right_button
arrow-bottom-left_button
arrow-stop-top_button
arrow-stop-right_button
arrow-stop-bottom_button
arrow-stop-left_button
arrow-line-top_button
arrow-line-right_button
arrow-line-bottom_button
arrow-line-left_button
arrow-forward_button
arrow-backward_button
refresh_button
out_button
plus_button
minus_button
checkmark_button
cross_button
pencil_button
lock-locked_button
lock-unlocked_button
cogwheel_button
admin_button
access_button
info_button
question_button
ok_button
stats_button
text_button
magnifier_button
user_button
user-profile_button
group_button
hierarchy_button
hierarchy2_button
print_button
bulb-off_button
bulb-on_button
link_button
map-pointer_button
target_button
share_button
share-facebook_button
share-twitter_button
share-linkedin_button
share-googleplus_button
mail_button
mailinglist_button
rss_button
time_button
message_button
podcast_button
download_button
upload_button
file_button
file-pdf_button
files_button
area_button
ruler_button
menu_button
more_button
important_button

Themed icons

Inline icons

Mauris iaculis porttitor posuere. Praesent id metus massa, ut blandit odio. Proin quis tortor orci. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget in metus. In pellentesque faucibus vestibulum. Nulla at nulla justo, eget luctus tortor. Nulla facilisi. Duis aliquet egestas purus in blandit. Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare ante, ac egestas est urna sit amet arcu.

Bigger icons

Use the .icon-big class.

Mauris iaculis porttitor posuere

Buttons

The btn module allows to create styled buttons. It is especially useful to convey information using colors and icons.

Default buttons

Default Default Disabled
Default Default Disabled

Icon buttons

label label

Operations

Start Continue Abort More
Start Continue Abort More

Data manipulation

Add Edit Remove Options
Add Edit Remove Options

Information notification

Success Info Warning Error Message
Success Info Warning Error Message

Long buttons

If you need buttons that span multiple lines, you can use the .btn-multiline-list class and the following markup:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus luctus urna sed urna ultricies ac tempor dui sagittis. In condimentum facilisis porta.

Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus.

Trigger button

Requires the collapse and menu widgets

Toggle menu

Split button

Requires the collapse and menu widgets

Badges

The badge module is meant to convey secondary information such as the category of a media item, a quantity associated with a list item, etc.

Default badge

label label
label label

Information badges

Error Warning Success Info Neutral
Error Warning Success Info Neutral

Action badges

Create Update Delete More
Create Update Delete More

Messages

The msg module allows to show a message to the user, give feedback on an operation, etc.

The message module structure

msg: the message wrapper
msg-content: the actual content for the panel

Various message types

Neutral

Nulla at nulla justo, eget luctus tortor. Nulla facilisi. Duis aliquet egestas purus in blandit. Curabitur vulputate, ligula lacinia scelerisque tempor, lacus.

Error

Nulla at nulla justo, eget luctus tortor. Nulla facilisi. Duis aliquet egestas purus in blandit. Curabitur vulputate, ligula lacinia scelerisque tempor, lacus.

Warning

Nullam in dui mauris. Vivamus hendrerit arcu sed erat molestie vehicula.

Success

Nulla at nulla justo, eget luctus tortor. Nulla facilisi. Duis aliquet egestas purus in blandit. Curabitur vulputate, ligula lacinia scelerisque tempor, lacus.

Info

Nulla facilisi. Duis aliquet egestas purus in blandit. Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare ante, ac egestas est urna sit amet arcu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed molestie augue sit amet leo consequat posuere. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin vel ante a orci tempus eleifend ut et magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus luctus urna sed urna ultricies ac tempor dui sagittis. In condimentum facilisis.

The nav module allows to create various styles of navigation.

nav: the navigation wrapper
nav-list: the list grouping items having the same depth in the navigation
nav-item: the individual items in the navigation
nav-link: the link inside each nav-item

To get an in-line navigation just add the nav-inline class.

To get a horizontal navigation just add the nav-horizontal class.

To get a vertical navigation just add the nav-vertical class.

Pagination navigation

Use the nav-pagination class on the nav element:

For a horizontal block navigation, just add nav-block to a horizontal navigation, like this:

For a vertical block navigation, just add nav-block to a vertical navigation, like this:

Just add the themed class to the horizontal nav element:

Just add the themed class to the vertical nav element:

Panels

The panel module creates content blocks that stand out of the rest of the content, allowing to highlight important information.

The panel module structure

panel: the panel wrapper
panel-header: the panel header
panel-content: the actual content for the panel
panel-footer: the panel footer

Default panels

Class Aptent Taciti Sociosqu Ad Litora Torquent

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus luctus urna sed urna ultricies ac tempor dui sagittis. In condimentum facilisis porta. Sed.

Themed panels

Class Aptent Taciti Sociosqu Ad Litora Torquent

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus luctus urna sed urna ultricies ac tempor dui sagittis. In condimentum facilisis porta. Sed.

Cell panels

You can also add panels inside cells using the panel-cellclass and mix them with the background color classes to create content mosaics:

Panel 1

Panel 2

Panel 3

Panel 4

Panel 5

Panel 6

Panel 7

Panel 8

Panel buttons

Link title

Media

The media module is meant to present structured data to the user in the form of a list.

It is usually recommended to annotate the structured data with relevant semantic information to optimize search engine indexing. Schema.org provides a list of possible data types that can be used, and we have various examples for Courses, Events, News articles, Persons and Publications.

The media module structure

media-list: a wrapper for media elements displayed as a list (optional)
media: the media element wrapper
media-visual: a visual representation for the media element
media-banner: a banner to put over the visual
media-header: the media header
- media-header-full: disables auto-truncating of the header
media-content: the media content
media-info: secondary information for the media element
- media-info-quiet: a more lightweight version of the media info
media-footer: the media footer

Media list

Tag1

Nulla Facilisi. Duis Aliquet

Nulla Facilisi. Duis —

In condimentum facilisis porta. Sed nec diam eu diam mattis viverra. Nulla fringilla, orci ac euismod semper, magna diam porttitor mauris, quis sollicitudin sapien justo in libero. Vestibulum mollis mauris enim. Morbi euismod magna ac lorem rutrum elementum. Donec.

Tag2

Class Aptent Taciti Sociosqu Ad

Nullam In Dui —

Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget in.

Tag3

Curabitur Vulputate, Ligula Lacinia Scelerisque Tempor, Lacus

Duis Aliquet Egestas —

Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget in metus. In pellentesque faucibus vestibulum. Nulla at nulla justo, eget luctus tortor. Nulla facilisi. Duis aliquet egestas purus in blandit. Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare ante, ac egestas est urna sit amet arcu. Class aptent taciti sociosqu ad litora. Read more about "Curabitur Vulputate, Ligula Lacinia Scelerisque Tempor, Lacus"

Note that you can add the .media-header-expandable class to the header in a list in order to have the full title display when the mouse is hovering on it (instead of only seeing the truncated version).

You can also use .media-list-bordered to wrap the list with a top and bottom border.

Media list (auto-truncated)

Nulla Facilisi. Duis Aliquet

Nulla Facilisi. Duis —

Class Aptent Taciti Sociosqu Ad

Nullam In Dui —

Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget in.

Curabitur Vulputate, Ligula Lacinia Scelerisque Tempor, Lacus

Duis Aliquet Egestas —

Minimal list

Tag1

Nulla Facilisi. Duis Aliquet

Nulla Facilisi. Duis

Tag2

Class Aptent Taciti Sociosqu Ad

Nullam In Dui

Tag3

Curabitur Vulputate, Ligula Lacinia Scelerisque Tempor, Lacus

Duis Aliquet Egestas

Media grid

Tag1

Nulla Facilisi. Duis Aliquet

Nulla Facilisi. Duis

Tag2

Class Aptent Taciti Sociosqu Ad

Nullam In Dui

Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget in.

Tag3

Curabitur Vulputate, Ligula Lacinia Scelerisque Tempor, Lacus

Duis Aliquet Egestas

A media list with the first element emphasized

Nulla Facilisi. Duis Aliquet

01.01.2001

Class Aptent Taciti Sociosqu Ad

02.02.2002

Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget in. Read more about "Curabitur Vulputate, Ligula Lacinia Scelerisque Tempor, Lacus"

Curabitur Vulputate, Ligula Lacinia Scelerisque Tempor

03.03.2003

Nulla Facilisi. Duis Aliquet

01.01.2001

Class Aptent Taciti Sociosqu Ad

02.02.2002

Curabitur Vulputate, Ligula Lacinia Scelerisque Tempor

03.03.2003

Or on a single column:

Nulla Facilisi. Duis Aliquet

01.01.2001

Class Aptent Taciti Sociosqu Ad

02.02.2002

Curabitur Vulputate, Ligula Lacinia Scelerisque Tempor

03.03.2003

Nulla Facilisi. Duis Aliquet

01.01.2001

Class Aptent Taciti Sociosqu Ad

02.02.2002

Curabitur Vulputate, Ligula Lacinia Scelerisque Tempor

03.03.2003

Responsive Embeds

This module allows embedding external content by keeping its aspect ratio while resizing.
Just use the .embed-responsive class, and nest a <iframe>, <video>, <object> or <embed>.
You can also nest a .embed-responsive-item class for other types of elements.

For example, to force a 16:9 aspect ratio, use the .embed-responsive-16by9 class.

All supported aspect ratios

1:1: embed-responsive-1by1
16:9 (1.77:1): embed-responsive-16by9
3:2 (1.50:1): embed-responsive-3by2 and embed-responsive-2by3
4:3 (1.33:1): embed-responsive-4by3 and embed-responsive-3by4
5:4 (1.25:1): embed-responsive-5by4 and embed-responsive-4by5

Collapse

The collapse widget allows to collapse/expand (hide/show) portions of information when the user clicks on its trigger.

Collapse overview

trigger: the collapse trigger, specified as:
- element with data-widget="collapse"
panel: the panel that will be collapsed/expanded, specified as one of:
- the aria-controls attribute with a space-separated list of element ids to toggle
- using data-target option, specified as a jQuery selector relative to the widget, or its parent
- using href attribute, specified as an id reference starting with #
- the second child element of the toggle
- the element that follows the toggle

data-event: what event to respond to (click by default)
data-overlay: whether to show the panel as an overlay
aria-expanded: whether to expand the panel by default (true or false, false by default)

beforeToggle: triggered on the trigger and the panel elements before the toggle happens
afterToggle: triggered on the trigger and the panel elements after the toggle happens

Both events have the following parameters:

toggle: a reference to the trigger element
targets: a reference to the panel elements
status: a boolean indicating whether the targets are visible (true) or hidden (false)
event: the actual event that triggered the toggle

Default collapse

Only label will toggle

Toggle


  <span data-widget="collapse"><!-- toggle label --></span>
  <div><!-- panel content --></div>

Collapse with custom targets

Collapse the content

Click anywhere inside element to toggle

Toggle


  <div data-widget="collapse">
    <span><!-- toggle label --></span>
    <div><!-- panel content --></div>
  </div>

Collapse the link target

Toggle

will not be toggled


  <a href="#myId" data-widget="collapse"><!-- toggle label --></span>
  <div id="myId"><!-- panel content --></div>

Collapse targets specified in the target option

Toggle

will not be toggled

Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus. Mauris iaculis porttitor posuere. Praesent id metus massa, ut blandit odio.

Toggle

will not be toggled


  <span data-widget="collapse" data-target=".myClass"><!-- toggle label --></span>
  <div class="myClass"><!-- panel content --></div>

Collapse targets specified in the controls option

Toggle

will not be toggled


  <span data-widget="collapse" aria-controls="myId"><!-- toggle label --></span>
  <div id="myId"><!-- panel content --></div>

Collapse with overlay

It is also possible to have the toggled panel displayed as an overlay by adding the data-overlay="true" attribute:

Toggle


  <span data-widget="collapse" data-overlay="true"><!-- toggle label --></span>
  <div><!-- panel content --></div>

Collapse on mouseenter/mouseleave

It is also possible to have the collapse reacting on other events, like mouseeneter mouseleave for instance:

Toggle


  <div data-widget="collapse" data-event="mouseenter mouseleave">
    <span><!-- toggle label --></span>
    <p><!-- panel content --></p>
  </div>

The tooltip widget allows showing an information popup when the mouse is moved over its trigger.

trigger: the tooltip trigger, specified as:
- element with data-widget="tooltip"
tooltip: the tooltip content, specified as one of:
- an aria-describedby attribute with a space-separated list of element ids to toggle
- using the content of the data-tooltip option
- using data-target option, specified as a jQuery selector relative to the widget, or its parent
- using href attribute, specified as an id reference starting with #
- the second child element of the toggle
- the element that follows the toggle

data-event: what event to respond to (mouseenter mouseleave by default)
data-overlay: whether to show the tooltip as an overlay

beforeToggle: triggered on the trigger and the tooltip elements before the toggle happens
afterToggle: triggered on the trigger and the tooltip elements after the toggle happens

Both events have the following parameters:

toggle: a reference to the trigger element
targets: a reference to the tooltip elements
status: a boolean indicating whether the targets are visible (true) or hidden (false)
event: the actual event that triggered the toggle


  <!-- trigger element -->
  <span data-widget="tooltip"><!-- trigger label --></span>
  <!-- tooltip element -->
  <div><!-- tooltip content --></div>

Using the data-event option, and specifying a valid jQuery event.


  <!-- trigger element -->
  <span data-widget="tooltip" data-event="click"><!-- trigger label --></span>
  <!-- tooltip element -->
  <div><!-- tooltip content --></div>


  <!-- trigger element -->
  <span data-widget="tooltip" data-event="dblclick"><!-- trigger label --></span>
  <!-- tooltip element -->
  <div><!-- tooltip content --></div>

Via aria-describedby with a list of target ids


  <!-- trigger element -->
  <span data-widget="tooltip" aria-describedby="myId"><!-- trigger label --></span>
  <!-- tooltip element -->
  <div id="myId"><!-- tooltip content --></div>


  <!-- trigger element -->
  <span data-widget="tooltip" data-tooltip="tooltip content"><!-- trigger label --></span>

Via data-target with a css selector to the targets (relative to parent)


  <!-- trigger element -->
  <span data-widget="tooltip" data-target=".myClass"><!-- trigger label --></span>
  <!-- tooltip element -->
  <div class="myClass"><!-- tooltip content --></div>

Via href with reference to element id (single target only)


  <!-- trigger element -->
  <a href="#myId" data-widget="tooltip"><!-- trigger label --></span>
  <!-- tooltip element -->
  <div id="myId"><!-- tooltip content --></div>


  <!-- trigger element -->
  <span data-widget="tooltip" data-overlay="true"><!-- trigger label --></span>
  <!-- tooltip element -->
  <div><!-- tooltip content --></div>

The menu, menubar and toolbar widgets provide various menu types.

menu: the menu element, specified as:
- element with data-widget="menu"
menuitem: the items of the menu, specified as one of:
- elements with role="menuitem"
- using the data-items option, specified as a jQuery selector relative to the widget
- the children elements of the widget

Toggle menu

item 1
- item 1.1
  - item 1.1.1
  - item 1.1.2
  - item 1.1.3
- item 1.2
  - item 1.2.1
  - item 1.2.2
  - item 1.2.3
- item 1.3
  - item 1.3.1
  - item 1.3.2
  - item 1.3.3
item 2
- item 2.1
  - item 2.1.1
  - item 2.1.2
  - item 2.1.3
- item 2.2
  - item 2.2.1
  - item 2.2.2
  - item 2.2.3
- item 2.3
  - item 2.3.1
  - item 2.3.2
  - item 2.3.3
item 3
- item 3.1
  - item 3.1.1
  - item 3.1.2
  - item 3.1.3
- item 3.2
  - item 3.2.1
  - item 3.2.2
  - item 3.2.3
- item 3.3
  - item 3.3.1
  - item 3.3.2
  - item 3.3.3

menu: the menu element, specified as:
- element with data-widget="toolbar"
group: the item groups of the menu, specified as one of:
- elements with role="group"
- using the data-groups option, specified as a jQuery selector relative to the widget
toolbar item: the items of the menu, specified as one of:
- using the data-items option, specified as a jQuery selector relative to the widget
- the children elements of the groups if any
- the children elements of the widget

menu: the menu element, specified as:
- element with data-widget="menubar"
group: the item groups of the menu, specified as one of:
- elements with role="group"
- using the data-groups option, specified as a jQuery selector relative to the widget
menubar item: the items of the menu, specified as one of:
- using the data-items option, specified as a jQuery selector relative to the widget
- the children elements of the groups if any
- the children elements of the widget

Simple menubar example

item 1
- item 1.1
- item 1.2
- item 1.3
- item 1.4
  - item 1.4.1
  - item 1.4.2
  - item 1.4.3
  - item 1.4.4
  - item 1.4.5
- item 1.5
item 2 (disabled)
item 3
- item 3.1
- item 3.2
- item 3.3
- item 3.4
- item 3.5
item 4
item 5

Accordions

Accordions overview

accordions: the accordions widget, specified as:
- element with data-widget="accordions"
tab: the accordion tabs/labels, specified as:
- elements with role="tab"
- using the data-tabs option, specified as a jQuery selector relative to the widget
- even elements if the tabs are on the top
- odd elements if the tabs are on the bottom
panel: the accordion panels, specified as one of:
- elements with role="tabpanel"
- using the data-panels option, specified as a jQuery selector relative to the widget
- odd elements if the tabs are on the top
- even elements if the tabs are on the bottom

data-event: what event to respond to (click by default)
data-position: where the accordion tabs are placed relative to their panels (top or bottom, top by default)

beforeToggle: triggered on the tab and its panel element before the toggle happens
afterToggle: triggered on the tab and its panel element after the toggle happens

Both events have the following parameters:

toggle: a reference to the tab element
targets: a reference to the panel element
status: a boolean indicating whether the targets are visible (true) or hidden (false)
event: the actual event that triggered the toggle

Default accordions (top positioned)

Accordion1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in dui mauris. Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus. Mauris iaculis porttitor posuere. Praesent id metus massa, ut blandit odio. Proin quis tortor orci. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget in metus. In pellentesque faucibus vestibulum. Nulla at nulla justo, eget luctus tortor. Nulla facilisi. Duis aliquet egestas purus in blandit. Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare ante, ac egestas est urna sit amet arcu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed.

Accordion2

Porttitor posuere. Praesent id metus massa, ut blandit odio. Proin quis.

Accordion3

Bottom positioned accordions

Accordion1

Porttitor posuere. Praesent id metus massa, ut blandit odio. Proin quis.

Accordion2

Accordion3

Tabs

Tabs overview

tabs: the tabs widget, specified as:
- element with data-widget="tabs"
tab: the tabs labels, specified as:
- elements with role="tab"
- using the data-tabs option, specified as a jQuery selector relative to the widget
- children of the first child element if the tabs are on the top or left
- children of the second child element if the tabs are at the bottom or on the right
panel: the tab panels, specified as one of:
- elements with role="tabpanel"
- using the data-panels option, specified as a jQuery selector relative to the widget
- children of the second child element if the tabs are on the top or left
- children of the first child element if the tabs are at the bottom or on the right

data-event: what event to respond to (click by default)
data-position: where the tabs are placed relative to the panels (top, left, right or bottom, top by default)

beforeToggle: triggered on the tab and its panel element before the toggle happens
afterToggle: triggered on the tab and its panel element after the toggle happens

Both events have the following parameters:

toggle: a reference to the tab element
targets: a reference to the panel element
status: a boolean indicating whether the targets are visible (true) or hidden (false)
event: the actual event that triggered the toggle

Default tabs (top)

Tab1
Tab2
Tab3

Duis Aliquet Egestas Purus In Blandit. Curabitur Vulputate

Nulla Facilisi. Duis

Porttitor posuere. Praesent id metus massa, ut blandit odio. Proin quis.

Quisque Eget Odio Ac Lectus Vestibulum Faucibus Eget

Left tabs

Tab1
Tab2
Tab3

Duis Aliquet Egestas Purus In Blandit. Curabitur Vulputate

Nulla Facilisi. Duis

Porttitor posuere. Praesent id metus massa, ut blandit odio. Proin quis.

Quisque Eget Odio Ac Lectus Vestibulum Faucibus Eget

Right tabs

Duis Aliquet Egestas Purus In Blandit. Curabitur Vulputate

Nulla Facilisi. Duis

Porttitor posuere. Praesent id metus massa, ut blandit odio. Proin quis.

Quisque Eget Odio Ac Lectus Vestibulum Faucibus Eget

Tab1
Tab2
Tab3

Bottom tabs

Duis Aliquet Egestas Purus In Blandit. Curabitur Vulputate

Nulla Facilisi. Duis

Porttitor posuere. Praesent id metus massa, ut blandit odio. Proin quis.

Quisque Eget Odio Ac Lectus Vestibulum Faucibus Eget

Tab1
Tab2
Tab3

Nested tabs (horizontal-vertical)

Tab1
Tab2
Tab3

Tab1.1
Tab1.2
Tab1.3

Duis Aliquet Egestas Purus In Blandit. Curabitur Vulputate

Nulla Facilisi. Duis

Porttitor posuere. Praesent id metus massa, ut blandit odio. Proin quis.

Quisque Eget Odio Ac Lectus Vestibulum Faucibus Eget

Tab2.1
Tab2.2
Tab2.3

Duis Aliquet Egestas Purus In Blandit. Curabitur Vulputate

Nulla Facilisi. Duis

Porttitor posuere. Praesent id metus massa, ut blandit odio. Proin quis.

Quisque Eget Odio Ac Lectus Vestibulum Faucibus Eget

Nested tabs (vertical-horizontal)

Tab1
Tab2
Tab3

Tab1.1
Tab1.2
Tab1.3

Duis Aliquet Egestas Purus In Blandit. Curabitur Vulputate

Nulla Facilisi. Duis

Porttitor posuere. Praesent id metus massa, ut blandit odio. Proin quis.

Quisque Eget Odio Ac Lectus Vestibulum Faucibus Eget

Tab2.1
Tab2.2
Tab2.3

Duis Aliquet Egestas Purus In Blandit. Curabitur Vulputate

Nulla Facilisi. Duis

Porttitor posuere. Praesent id metus massa, ut blandit odio. Proin quis.

Quisque Eget Odio Ac Lectus Vestibulum Faucibus Eget

Tree

The tree widget allows organising hierarchical information in the form of a tree with branches and leaves. Individual branches can be collapsed and expanded depending on the needs.

Tree overview

tree: the tree widget, specified as:
- element with data-widget="tree"
treeitems: the individual node in the tree, specified as:
- elements with role="treeitem"
- using data-items option, specified as a jQuery selector relative to the widget
- direct children of groups and the widget itself that have no specific role defined
- direct children of the widget itself that have no specific role defined
groups: wrapper for all the child-nodes of a specific node (tree acts as the top group), specified as:
- elements with role="group"
- using data-groups option, specified as a jQuery selector relative to the widget

data-autocollapse: a boolean indicating whether or not to collapse the nodes automatically (false by default)

beforeToggle: triggered on the treeitem toggle and its group element before the toggle happens
afterToggle: triggered on the treeitem toggle and its group element after the toggle happens

Both events have the following parameters:

toggle: a reference to the treeitem toggle element
targets: a reference to the group element
status: a boolean indicating whether the targets are visible (true) or hidden (false)
event: the actual event that triggered the toggle

In-line tree

The in-line tree is meant to be in-lined into a paragraph of text.

Default in-line tree

Vivamus hendrerit arcu
sed erat molestie vehicula
- Sed auctor neque eu tellus
- rhoncus ut eleifend nibh porttitor
Ut in nulla enim
- Phasellus molestie magna
- non est bibendum non venenatis nisl tempor
  - Suspendisse dictum
  - feugiat nisl ut dapibus
- Mauris iaculis porttitor posuere
Praesent id metus massa
ut blandit odio
- Proin quis tortor orci
- Etiam at risus et
- justo dignissim congue
  - Donec congue lacinia dui
  - a porttitor lectus condimentum laoreet
- Nunc eu ullamcorper orci


  <ul data-widget="tree">
    <!-- for each treeitem that has no children -->
    <li>
      <span><!-- treeitem label --></span>
      <!-- if treeitem has children -->
      <ul role="group">
        <!-- for each treeitem -->
          <!-- recursive use of the treeitem template -->
        <!-- /for each -->
      </ul>
      <!-- /if -->
    </li>
    <!-- /for each -->
  </ul>

In-line tree with auto-collapsing branches

The auto-collapse option (data-autoCollapse="true") automatically closes branches when navigating the tree.

Vivamus hendrerit arcu
sed erat molestie vehicula
- Sed auctor neque eu tellus
- rhoncus ut eleifend nibh porttitor
Ut in nulla enim
- Phasellus molestie magna
- non est bibendum non venenatis nisl tempor
  - Suspendisse dictum
  - feugiat nisl ut dapibus
- Mauris iaculis porttitor posuere
Praesent id metus massa
ut blandit odio
- Proin quis tortor orci
- Etiam at risus et
- justo dignissim congue
  - Donec congue lacinia dui
  - a porttitor lectus condimentum laoreet
- Nunc eu ullamcorper orci


  <ul data-widget="tree" data-autoCollapse="true">
    <!-- for each treeitem -->
    <li>
      <span><!-- treeitem label --></span>
      <!-- if treeitem has children -->
      <ul role="group">
        <!-- for each treeitem -->
          <!-- recursive use of the treeitem template -->
        <!-- /for each -->
      </ul>
      <!-- /if -->
    </li>
    <!-- /for each -->
  </ul>

Block tree

The block tree is meant to be used as a navigation menu.

Default block tree


  <nav class="nav nav-block nav-vertical">
    <!-- tree widget -->
    <ul class="nav-list" data-widget="tree">
      <!-- for each treeitem -->
      <li class="nav-item">
        <a href="..." class="nav-link"><!-- treeitem label --></a>
        <!-- if treeitem has children -->
        <ul class="nav-list" role="group">
          <!-- for each treeitem -->
            <!-- recursive use of the treeitem template -->
          <!-- /for each -->
        </ul>
        <!-- /if -->
      </li>
      <!-- /for each -->
    </ul>
    <!-- /tree widget -->
  </nav>

Block tree with auto-collapse of branches


  <nav class="nav nav-block nav-vertical">
    <!-- tree widget -->
    <ul class="nav-list" data-widget="tree" data-autoCollapse="true">
      <!-- for each treeitem -->
      <li class="nav-item">
        <a href="..." class="nav-link"><!-- treeitem label --></a>
        <!-- if treeitem has children -->
        <ul class="nav-list" role="group">
          <!-- for each treeitem -->
            <!-- recursive use of the treeitem template -->
          <!-- /for each -->
        </ul>
        <!-- /if -->
      </li>
      <!-- /for each -->
    </ul>
    <!-- /tree widget -->
  </nav>

Dialog

The dialog widget provides a way to display content in an in-page popup.

Dialog overview

dialog: the dialog widget, specified as:
- element with data-widget="dialog"
close button: the close button, specified as:
- elements with data-role="close"
- auto-generated

data-overlay: whether to show the dialog in an overlay (true or false, false by default)

Simple dialog

Toggle dialog

Some dummy image 1 — Some long description for the dummy image 1

Toggle dialog

Some dummy image 2 — Some long description for the dummy image 2

Carousel & Slideshow

The carousel widget allows organizing items into panels and flipping through them easily, showing only the active panel. The slideshow adds auto-playing and navigation on top of the carousel.

Carousel overview

carousel: the carousel widget, specified as:
- element with data-widget="carousel"
panel: the panels that contain the various items, specified as one of:
- elements with role="group"
- using the data-panels option, specified as a jQuery selector relative to the widget
- children of the 1st child of the widget if the controls are below the panels
- children of the 2nd child of the widget
item: the individual items in the carousel, specified as one of:
- elements with role="option"
- using the data-items option, specified as a jQuery selector relative to the widget
- children of the panels
controls: the controls that allow switching panels, specified as one of:
- elements with role="toolbar", if the data-controls option is not false
- children of the 2nd child of the widget if the controls are below the panels
- children of the 1st child of the widget if the widget has several children
- auto-generated
previous button: the button that allows switching to the previous panel, specified as one of:
- elements with data-role="previous", if the data-prev option is not false
- using the data-prev option, specified as a jQuery selector relative to the widget
- auto-generated
next button: the button that allows switching to the next panel, specified as one of:
- elements with data-role="next", if the data-next option is not false
- using the data-next option, specified as a jQuery selector relative to the widget
- auto-generated

data-event: what event to respond to (click by default)
data-cycleItems: whether to cycle through the items or not (trueor false, default is false)

beforeSelect: triggered on the carousel element before the selection happens
afterSelect: triggered on the carousel element after the selection happens

Both events have the following parameters:

item: a reference to the current item
panel: a reference to the current panel

Default carousel

With inline preview

Inline previews for each option can be set, by adding:

data-target: jQuery selector to the target element that contains the preview
data-url: url to use for the content of the target element (for its src attribute)

With controls

Vertical with controls

With custom controls

With custom controls and cycleItems=True

Slideshow

slideshow: the carousel widget, specified as:
- element with data-widget="slideshow"
panel: same as carousel
item: same as carousel
controls: same as carousel
previous button: same as carousel
next button: same as carousel
play button: the button that allows auto-playing the items, specified as one of:
- elements with data-role="play", if the data-play option is not false
- using the data-play option, specified as a jQuery selector relative to the widget
- auto-generated
pause button: the button that allows pausing the items, specified as one of:
- elements with data-role="pause", if the data-pause option is not false
- using the data-pause option, specified as a jQuery selector relative to the widget
- auto-generated
selectors: the selectors that allow jumping to a specific item, specified as one of:
- elements with data-role="selector"
- using the data-selectors option, specified as a jQuery selector relative to the widget
- auto-generated

Same as carousel, plus:

data-autoplay: whether to auto-play the items (trueor false, default is true)
data-duration: how long each item in the slideshow should be shown (in ms, default is 5000)

Same as carousel.

Default slideshow

With controls (no selectors)

Slideshow with custom controls

Alerts & Notifications

The alert and notification widgets are extensions of the message module and provide a way to display disposable messages to the user, in-line or growl-style.

Alert

Class Aptent Taciti Sociosqu

Nullam in dui mauris. Vivamus hendrerit arcu sed erat molestie.

Etiam At Risus Et

Nulla at nulla justo, eget luctus tortor. Nulla.

Etiam At Risus Et

Nulla at nulla justo, eget luctus tortor. Nulla.

Etiam At Risus Et

Nulla at nulla justo, eget luctus tortor. Nulla.

Etiam At Risus Et

Nulla at nulla justo, eget luctus tortor. Nulla.

Notification

Class Aptent Taciti Sociosqu

Nullam in dui mauris. Vivamus hendrerit arcu sed erat molestie.

Etiam At Risus Et

Nulla at nulla justo, eget luctus tortor. Nulla.

Etiam At Risus Et

Nulla at nulla justo, eget luctus tortor. Nulla.

Etiam At Risus Et

Nulla at nulla justo, eget luctus tortor. Nulla.

Etiam At Risus Et

Nulla at nulla justo, eget luctus tortor. Nulla.

Filter

Spoken languages per country.
Country	Spoken language
France	French
Germany	German
Switzerland	German, French, Italian

Sort

List

sort

Mauris Iaculis Porttitor Posuere. Praesent
Lorem Ipsum Dolor Sit Amet
In Pellentesque Faucibus Vestibulum. Nulla At
Duis Aliquet Egestas Purus
Ut In Nulla Enim. Phasellus

Table

Population, GDP and exchange rate of to countries.
Country	Population	Date	Exchange rate to USD	GDP
United States	317,227,000	December 9, 2013	1.00	14,991,300
China	1,361,520,000	December 9, 2013	0.16	7,203,784
Japan	127,290,000	November 1, 2013	0.0097	5,870,357
Germany	80,548,000	May 31, 2013	1.37	3,604,061
France	65,834,000	November 1, 2013	1.37	2,775,518
Total	1,952,419,000			34,445,020

Markdown

# Title Some _label_ with **toto**. * item1 * item2 * item3

Maths

Tex Example

\[\begin{aligned} \dot{x} & = \sigma(y-x) \\ \dot{y} & = \rho x - y - xz \\ \dot{z} & = -\beta z + xy \end{aligned} \]

\[ \left( \sum_{k=1}^n a_k b_k \right)^2 \leq \left( \sum_{k=1}^n a_k^2 \right) \left( \sum_{k=1}^n b_k^2 \right) \]

MathML

x = \frac{- b \pm \sqrt{b^{2} - 4 a c}}{2 a}

AsciiMath

When `a != 0`, there are two solutions to `ax^2 + bx + c = 0` and they are

`x = (-b +- sqrt(b^2-4ac))/(2a) .`

Syntax Highlighting

Java

public class HelloWorld {
  public static void main(String [] args) {
    System.out.println("Hello World!");
  }
}

Python

print "Hello World!"

JavaScript

console.log("Hello World!");

PHP

<?php echo("Hello World!"); ?>

Perl

#!/usr/bin/perl
print "Hello World!";

Other

Syntax highlighting is provided by highlisght.js. See their documentation for more info.

Page templates

Templates for the various page layouts are also available in the templates folder.

Do note that these template have the html head in-lined to allow previewing, but the developer should replace the head by including one of the auto-updating ones.

HTML template for various page types
Page type	Template file
Page type	English	French
Default content page	page.en.html	page.fr.html
Default neutral content page	page-neutral.en.html	page-neutral.fr.html
Minimal structure (header only)	minimal.en.html	minimal.fr.html
Default homepage	homepage.en.html	homepage.fr.html
Faculty homepage	homepage-faculty.en.html	homepage-faculty.fr.html
Portal homepage	homepage-portal.en.html	homepage-portal.fr.html
Global homepage	homepage-global.html

Accessibility links template

<nav class="a11y">
  <a class="nav-link visuallyhidden focusable" href="#content" accesskey="c">Skip to content</a>
  <a class="nav-link visuallyhidden focusable" href="#main-navigation" accesskey="n">Skip to navigation</a>
</nav>

<header id="epfl-header" class="site-header epfl" role="banner" aria-label="Global EPFL banner" data-ajax-header="https://static.epfl.ch/latest/includes/epfl-header.en.html">

  <div class="logo">
    <a href="//www.epfl.ch">
      <span class="visuallyhidden">EPFL Homepage</span>
      <object type="image/svg+xml" class="logo-object" data="//static.epfl.ch/latest/images/logo.svg">
        <img alt="EPFL Logo" width="95" height="46" src="//static.epfl.ch/latest/images/logo.png" />
      </object>
    </a>
  </div>

  <div class="search search-simple">
    <a href="#search" class="icon icon-magnifier" data-widget="toggle">
      <span class="visuallyhidden">Search</span>
    </a>
    <div id="search" role="search">
      <form id="search-form" class="form form-inline" action="//search.epfl.ch">
        <div class="form-input-group">
          <div class="form-input">
            <label class="visuallyhidden" for="search-query">Search query</label>
            <input id="search-query" class="search-query" type="text" placeholder="search" name="q" accesskey="4" />
          </div>
          <div class="form-input form-input-mini">
            <button class="themed search-submit" type="submit">
              <span class="icon icon-magnifier"></span><span class="visuallyhidden">Search</span>
            </button>
          </div>
        </div>
      </form>
    </div>
  </div>

</header>

Website name template

<h1 class="site-title" itemprop="isPartOf" itemscope itemtype="http://schema.org/CollectionPage">
  <a href="..." itemprop="url" accesskey="1">
    <span itemprop="name">
      <span class="visuallyhidden-xs visuallyhidden-xxs">The </span>
      <abbr title="A long description for the site acronym">site</abbr>
      <span class="visuallyhidden-xs visuallyhidden-xxs"> title</span>
    </span>
  </a>
</h1>

<nav class="nav nav-inline bcnav" itemprop="breadcrumb">
  <ol class="nav-list">
    <li class="nav-item" itemprop="sourceOrganization" itemscope itemtype="http://schema.org/CollegeOrUniversity">
      <a class="nav-link" href="http://www.epfl.ch" itemprop="url"><span itemprop="name">EPFL</span></a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="...">Parent page</a>
    </li>
    <!-- ... -->
    <li class="nav-item nav-item-active">
      <a class="nav-link" href="...">Current page</a>
    </li>
  </ol>
</nav>

<nav class="nav nav-inline lang">
  <ul class="nav-list">
    <li class="nav-item nav-item-active">
      <a class="nav-link" href="..." lang="en"><span class="visuallyhidden-xxs visuallyhidden-xs">English</span></a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="..." lang="fr" ref="alternate"><span class="visuallyhidden-xxs visuallyhidden-xs">français</span></a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="..." lang="de" ref="alternate"><span class="visuallyhidden-xxs visuallyhidden-xs">Deutsch</span></a>
    </li>
    <!-- ... -->
  </ul>
</nav>

Tool bar template

<div id="tools" class="tools">
  <div role="toolbar" aria-label="Page tools">
    <span class="secondary-content" data-role="label">Share:</span>
  </div>
</div>

<div class="mainnav">
  <a id="main-navigation-label" class="hidden visible-xxs visible-xs" href="#main-navigation" data-widget="collapse">Main navigation</a>
  <nav id="main-navigation" class="nav nav-block nav-horizontal themed visible-s visible-m visible-l visible-xl visible-xxl" aria-labelledby="main-navigation-label">
    <ul class="nav-list" data-widget="menubar">
      <li class="nav-item hidden-xxs hidden-xs">
        <a class="nav-link" href="/">
          <span class="hidden-xxs hidden-xs icon icon-inline icon-big icon-home" role="presentation" hidden="hidden"></span>
          <span class="hidden-s hidden-m hidden-l hidden-xl hidden-xxl">Homepage</span>
        </a>
      </li>
      <li class="nav-item">
        <span class="nav-link" data-widget="collapse">Menu 1 [dropdown]</span>
        <ul class="nav-list nav-vertical" data-widget="menu">
          <li class="nav-item">
            <a class="nav-link" href="...">Menu 1.1</a>
            <ul class="nav-list">
              <li class="nav-item">
                <a class="nav-link" href="...">Menu 1.1.1</a>
              </li>
              <!-- ... -->
            </ul>
          </li>
          <!-- ... -->
        </ul>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="...">Menu 2 [combo]</a>
        <span data-widget="collapse"></span>
        <ul class="nav-list nav-vertical" data-widget="menu">
          <li class="nav-item">
            <a class="nav-link" href="...">Menu 2.1</a>
            <ul class="nav-list">
              <li class="nav-item">
                <a class="nav-link" href="...">Menu 2.1.1</a>
              </li>
              <!-- ... -->
            </ul>
          </li>
          <!-- ... -->
        </ul>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="...">Menu 3 [combo]</a>
        <span data-widget="collapse"></span>
        <ul class="nav-list nav-vertical" data-widget="menu">
          <li class="nav-item">
            <a class="nav-link" href="...">Menu 3.1</a>
            <ul class="nav-list">
              <li class="nav-item">
                <a class="nav-link" href="...">Menu 3.1.1</a>
              </li>
              <!-- ... -->
            </ul>
          </li>
          <!-- ... -->
        </ul>
      </li>
      <!-- ... -->
    </ul>
  </nav>
</div>

<div class="localnav panel">
  <nav id="secondary-navigation" class="nav nav-block nav-vertical themed">
    <ul class="nav-list" data-widget="tree">
      <li class="nav-item">
        <a class="nav-link" href="...">Level 1 item</a>
        <ul class="nav-list" role="group">
          <li class="nav-item">
            <a class="nav-link" href="...">Level 2 item</a>
            <ul class="nav-list" role="group">
              <li class="nav-item nav-item-active">
                <a class="nav-link" href="...">Level 3 item</a>
                <ul class="nav-list" role="group">
                  <li class="nav-item">
                    <a class="nav-link" href="...">Level 4 item</a>
                    <ul class="nav-list" role="group">
                      <li class="nav-item">
                        <a class="nav-link" href="...">Level 5 item</a>
                      </li>
                      <!-- ... -->
                    </ul>
                  </li>
                  <!-- ... -->
                </ul>
              </li>
              <!-- ... -->
            </ul>
          </li>
          <!-- ... -->
        </ul>
      </li>
      <!-- ... -->
    </ul>
  </nav>
</div>

Article list

Based on the News Article Schema and the Media module.

Education

Finally GeoBeer makes it to French-speaking Switzerland…

13.03.14 — Geographic Information Systems Laboratory — GeoBeer is a quarterly meeting of people interested in geography, GIS, cartography and the latest technologies. The goal is to promote GEO ideas and discussions about them. Read the whole article

EPFL

Lifehand 2 prosthetic grips and senses like a real hand

13.03.14 — NCCR-Robotics — Roboticists and doctors working in Switzerland and Italy have come together to develop a bionic hand that provides sensory feedback in real time, meaning that an amputee can be given back the ability to feel and modify grip like someone with a “real” hand. Using a... Read the whole article

Research

IDEAS Seminar | 14 April 2014

13.03.14 — Design Architecture and Sustainability — Max DOELLING will be the speaker of the next IDEAS Seminar, entitled "Exploring performance cognition: spatial thermal and daylight data mapping in conceptual architectural design scenarios". It will take place on Monday 14 April... Read the whole article

Fixed height articles (auto-truncate)

Education

Finally GeoBeer makes it to French-speaking Switzerland…

EPFL

Lifehand 2 prosthetic grips and senses like a real hand

Research

IDEAS Seminar | 14 April 2014

Paginated news list

Education

Finally GeoBeer makes it to French-speaking Switzerland…

EPFL

Lifehand 2 prosthetic grips and senses like a real hand

Research

IDEAS Seminar | 14 April 2014

Minimal article list

Education

Finally GeoBeer makes it to French-speaking Switzerland…

13.03.14

EPFL

Lifehand 2 prosthetic grips and senses like a real hand

13.03.14

Research

IDEAS Seminar | 14 April 2014

13.03.14

News list with emphasized first item

Finally GeoBeer makes it to French-speaking Switzerland…

13.03.14 — GeoBeer is a quarterly meeting of people interested in geography, GIS, cartography and the latest technologies. The goal is to promote GEO ideas and discussions about them. Read the whole article

Lifehand 2 prosthetic grips and senses like a real hand

13.03.14 — Roboticists and doctors working in Switzerland and Italy have come together to develop a bionic hand that provides sensory feedback in real time, meaning that an amputee can be given back the ability to feel and modify grip like someone with a “real” hand. Using a... Read the whole article

IDEAS Seminar | 14 April 2014

13.03.14 — Max DOELLING will be the speaker of the next IDEAS Seminar, entitled "Exploring performance cognition: spatial thermal and daylight data mapping in conceptual architectural design scenarios". It will take place on Monday 14 April... Read the whole article

Ateliers Lego pour de futurs ingénieurs

13.03.14 — Playing with Lego robots and dreaming to become a next generation engineer Read the whole article

And on a single column:

Finally GeoBeer makes it to French-speaking Switzerland…

Lifehand 2 prosthetic grips and senses like a real hand

IDEAS Seminar | 14 April 2014

Ateliers Lego pour de futurs ingénieurs

13.03.14 — Playing with Lego robots and dreaming to become a next generation engineer Read the whole article

Course list

Based on the CreativeWork Schema, the LRMI specification and the Media module.

Information, Computation, Communication

The course is structured into 3 modules. Module 1 present the concepts of algorithms and representation of information. Module 2 focuses on sampling and compression. Module 3 offer an overview of systems: CPU, memory, communication and security. View details for course "Information, Computation, Communication"

Propedeutics > Computer Science
Propedeutics > Communication Systems

Fall semester

French

x: 3

L: 2h

E: 1h

Advanced algorithms

A first graduate course in algorithms, this course assumes minimal background, but moves rapidly. The objective is to learn the main techniques of algorithm analysis and design, with an emphasis on randomization, while building a repertory of basic algorithmic solutions to problems in many domains. View details for course "Advanced algorithms"

Master cycle > Computational science and Engineering
Master cycle > Communication Systems
Master cycle > Computer Science
Minor > Information security minor

Fall semester

English

x: 7

L: 4h

E: 2h

P: 1h

Quantum optics and quantum information

Fully quantum theory of the light-matter interaction. Study of interacting quantum systems. Introduction to a few modern problems in quantum optics. Introduction to quantum information. Quantum cryptography and quantum computing. View details for course "Quantum optics and quantum information"

Master cycle > Applied Physics
Master cycle > Physics - master program

Spring semester

English

x: 4

L: 2h

E: 2h

Event list

Based on the Event Schema and the Media module.

13mar

10:00, MEB1 B10

Networked Cyber-Physical Systems for a Smarter World

Cyber Physical Systems (CPS) are smart networked systems with embedded sensors, processors and actuators that are designed to sense and ... Read more about "Networked Cyber-Physical Systems for a Smarter World"

By Prof. Jose L. Ayala, Computense University of Madrid

01oct

30jun

Allday event, Rolex Learning Center - Patios extérieurs

ERBRA - an artistic performance by Anne Rochat

Throughout the 2013-2014 academic year, artist Anne Rochat presents her art on EPFL’s campus. A hybrid orchard is created… Read more about "ERBRA - an artistic performance by Anne Rochat"

By Anne Rochat, artist

30sep

15jun

Allday event

Certificate of Advanced Studies in Management of Development Projects

The Cooperation & Development Center (CODEV) at EPFL is pleased to announce the Call for Applications for the Certificate of Advanced… Read more about "Certificate of Advanced Studies in Management of Development Projects"

Event-list (auto-truncated)

13mar

10:00, MEB1 B10

Networked Cyber-Physical Systems for a Smarter World

Cyber Physical Systems (CPS) are smart networked systems with embedded sensors, processors and actuators that are designed to sense and interact with the physical world (including the human users), and support real-time, guaranteed performance in safety-critical applications Read more about "Networked Cyber-Physical Systems for a Smarter World"

By Prof. Jose L. Ayala, Computense University of Madrid

01oct

30jun

Allday event, Rolex Learning Center - Patios extérieurs

ERBRA - an artistic performance by Anne Rochat

Throughout the 2013-2014 academic year, artist Anne Rochat presents her art on EPFL’s campus. A hybrid orchard is created through the fusion of different kinds of woods. Potted, it becomes a nomad. Read more about "ERBRA - an artistic performance by Anne Rochat"

By Anne Rochat, artist

30sep

15jun

Allday event

Certificate of Advanced Studies in Management of Development Projects

The Cooperation & Development Center (CODEV) at EPFL is pleased to announce the Call for Applications for the Certificate of Advanced Studies in Management of Development Projects (MaDePro). Read more about "Certificate of Advanced Studies in Management of Development Projects"

Agenda version

13mar

10:00, MEB1 B10

Networked Cyber-Physical Systems for a Smarter World

By Prof. Jose L. Ayala, Computense University of Madrid

01oct

30jun

Allday event, Rolex Learning Center - Patios extérieurs

ERBRA - an artistic performance by Anne Rochat

By Anne Rochat, artist

30sep

15jun

Allday event

Certificate of Advanced Studies in Management of Development Projects

People list

Based on the Person Schema and the Media module.

Marilyne Andersen

Full Professor, LIPID, ENAC —

Prof. Andersen holds a MSc in Physics and a PhD in Building Physics from EPFL. She was a faculty member of MIT's Department of Architecture in 2004-2010 where she founded the MIT Daylighting Lab. View full profile for "Marilyne Andersen"

marilyne.andersen@epfl.ch GC A2 401

+41 21 693 0882

+41 21 693 8021

Martine Tiercy

Secretary, LAST, ENAC —

Mrs. Tiercy takes care of LIPID’s administrative duties and shares her time with the Laboratory of Architecture and Sustainable Technologies (LAST). View full profile for "Martine Tiercy"

martine.tiercy@epfl.ch GC A2 445

+41 21 693 8021

Boris Karamata

Research Scientist, LIPID, ENAC —

Dr. Karamata investigates novel methods for solar energy collection and climate-adaptive facades. He holds a MSc in Microtechnical Engineering and a PhD in Optical Physics from EPFL. View full profile for "Boris Karamata"

boris.karamata@epfl.ch LE1 111

+41 21 693 0886

Condensed people grid layout (2 columns)

Some CSS has to be added to display this layout (see code).

nicole.aghroum@epfl.ch

Foucart Alicia

Secretary

Phone: +41 21 69 31901 Phone: +41 21 69 31902

Office: INN140,
INN141

claude.zwicky@epfl.ch

Zwicky Claude

Administrator

Phone: +41 21 69 34833 Phone: +41 21 69 34834

Office: CM2274

nicole.aghroum@epfl.ch

Aghroum Nicole

Secretary

Phone: +41 21 69 31922

Office: CM2267

isabelle.hugli@epfl.ch

Hügli Isabelle

Secretary

Phone: +41 21 69 30239

Office: CM2267

People grid layout

3 columns

Marilyne Andersen

Full Professor

LIPID, ENAC

marilyne.andersen@epfl.ch GC A2 401

Martine Tiercy

Secretary

LAST, ENAC

martine.tiercy@epfl.ch GC A2 445

Boris Karamata

Research Scientist

LIPID, ENAC

boris.karamata@epfl.ch LE1 111

4 columns

Thomas Becker

Chef de groupe,
IDEVELOP —

Tél : +41 21 69 32257

thomas.becker@epfl.ch INN039

View Ion Cionca's profile

Ion Cionca

Informaticien,
IDEVELOP —

Tél : +41 21 69 34586

ion.cionca@epfl.ch INN016

View Wendy De Paoli's profile

Wendy De Paoli

Informaticienne,
IDEVELOP —

Tél : +41 21 69 36094

wendy.depaoli@epfl.ch INN013

View Francesco De Rose's profile

Francesco De Rose

Informaticien,
IDEVELOP —

Tél : +41 21 69 34257 Tél : +41 21 69 34258

francesco.derose@epfl.ch INN015 INN015

Condensed people list

Some CSS has to be added to display this layout (see code).

Marilyne Andersen

Full Professor, LIPID, ENAC

marilyne.andersen@epfl.ch

+41 21 693 0882
+41 21 693 8021

GCA2401

Martine Tiercy

Secretary, LAST, ENAC

martine.tiercy@epfl.ch

+41 21 693 8021

GCA2445

Boris Karamata

Research Scientist, LIPID, ENAC

boris.karamata@epfl.ch

+41 21 693 0886

LE1111

Publication list

Based on the Scholarly Article Schema and the Media module.

Interactive expert support for early stage full-year daylighting design: a user’s perspective on Lightsolve.

M. Andersen, J. M. L. Gagne and S. Kleindienst — in Automation in Construction, vol. 35, p. 338-352, 2013
Detailed record for "Interactive expert support for early stage full-year daylighting design: a user’s perspective on Lightsolve." Full text for "Interactive expert support for early stage full-year daylighting design: a user’s perspective on Lightsolve."

Modelling 'non-visual' effects of daylighting in a residential environment.

M. Andersen, S. J. Gochenour and S. W. Lockley — in Building and Environment, vol. 70, p. 138-149, 2013
Detailed record for "Modelling 'non-visual' effects of daylighting in a residential environment." Full text for "Modelling 'non-visual' effects of daylighting in a residential environment."

A framework for predicting the non-visual effects of daylight – Part II: The simulation model.

J. Mardaljevic, M. Andersen, N. Roy and J. Christoffersen — in Lighting Research and Technology, 2013
Detailed record for "A framework for predicting the non-visual effects of daylight – Part II: The simulation model." Full text for "A framework for predicting the non-visual effects of daylight – Part II: The simulation model."

Study plan

Global issues: Propedeutic BA1

Courses Code Programs Lecturers	Bachelor 1 l e p	Bachelor 2 l e p	Exam	Credits
Global issues: climate A
Global issues: climate A Code HUM-121(a) Programs SHS Lecturers Berne	l e p	Bachelor 1 1h 1h	Bachelor 2 2h 2h	Exam During the semester	Credits 4
Global issues: climate B
Global issues: climate B Code HUM-121(a) Programs SHS Lecturers Berne	l e p	Bachelor 1 1h 1h	Bachelor 2 2h 2h	Exam During the semester	Credits 4

Global issues: Propedeutic BA2

Courses Code Programs Lecturers	Bachelor 2 l e p	Exam	Credits
Global issues: climate C
Global issues: climate C Code HUM-121(a) Programs SHS Lecturers Berne	l e p	Bachelor 2 2h 2h	Exam During the semester	Credits 4
Global issues: climate D
Global issues: climate D Code HUM-121(a) Programs SHS Lecturers Berne	l e p	Bachelor 2 2h 2h	Exam During the semester	Credits 4
Global issues: climate E
Global issues: climate E Code HUM-121(a) Programs SHS Lecturers Berne Thalmann	l e p	Bachelor 2 2h 2h	Exam During the semester	Credits 4

Organigramme

Organizational Chart
Schools
ENAC - Dean's Office	ENAC-DEC	Andersen Marilyne
Section
ENAC - Architecture Section	ENAC-SAR	Gargiani Roberto
SAR - Administration	SAR-GE	Gargiani Roberto
Instituts
Institute of Architecture	IA	Ortelli Luca
IA - Administration	IA-GE	Ortelli Luca
Center
Hosted units	EH-ENAC	Andersen Marilyne

Responsive Image

image sans attributs

<img src="…"/> Le framework se charge de la rendre responsive

image avec attributs width et height

<img src="…" width="…" height="…"/> Le framework se charge de la rendre responsive

image avec l'attribut style

<img src="…" style="width:…;height=…;"/> Il faut forcer une css <style> img { width: 100%; height: auto; } </style>

max-width: 100%

On limite la largeur au max à la page, mais si l'image est plus petite, elle ne remplit pas toute la largeur.

L'image sera adaptée au container div

<img src="..." style="max-width:100%; height:auto;" >

width: 100%

On force la largeur à la largeur de la page, même si l'image est plus petite

Si l'image est plus haute que la page, on ne voit pas tout.

<img src="..." style="width:100%; height:auto;" >

Image entièrement visible sur l'écran

Il faut jajouter un div qui remplit tout l'écran et une image de fond :

div { position: absolute; left: 0; right: 0; top: 0; bottom: 0; background: url('/path/to/image.jpg') no-repeat center center / contain; }

Image qui remplit tout l'écran

On change le background :

div { position: absolute; left: 0; right: 0; top: 0; bottom: 0; background: url('/path/to/image.jpg') no-repeat center center / cover; }

Différentes solutions

https://css-tricks.com/which-responsive-images-solution-should-you-use/

Web Content Accessibility Guidelines (WCAG) 2.0

WAI-ARIA

Access keys

Installation

Optimized head/foot files

All-in-one head files

Integration of the EPFL banner in a site

Dynamically load the global header

Local search

Global search

Custom Scripts

Load a custom jQuery plugin

Load datatables script

Load a jQuery plug-in different from epfl-jquery

Load a custom script

Analytics

Browser support

3rd-party libraries

Packaged libraries

CDN libraries

Changelog

v0.28.0 - 2018.08.28

v0.27.5 - 2018.08.22

v0.27.4 - 2018.07.18

v0.27.3 - 2018.07.02

v0.27.2 - 2018.06.11

v0.27.1 - 2018.04.04

v0.27.0 - 2018.04.03

v0.26.1 - 2017.11.21

v0.26.0 - 2017.10.18

v0.25.0 - 2017.10.11

v0.24.0 - 2017.08.29

v0.23.1 - 2017.06.13

v0.23.0 - 2017.03.20

v0.22.12 - 2016.04.27

v0.22.9 - 2016.04.14

v0.22.8 - 2016.03.18

v0.22.6 - 2016.08.01

v0.22.2 - 2015.10.30

v0.22.0 - 2015.10.12

v0.21.3 - 2015.09.03

v0.20.3 - 2015.06.22

v0.20.2 - 2015.06.18

v0.20.1 - 2015.06.16

v0.20.0 - 2015.06.15

v0.19.1 - 2015.06.06

v0.19.0 - 2015.06.04

v0.18.0 - 2015.05.20

v0.17.0 - 2015.05.12

v0.16.0 - 2015.05.04

v0.15.0 - 2015.04.17

v0.14.0 - 2014.11.09

v0.13.4 - 2014.11.01

v0.13.3 - 2014.09.03

v0.13.2 - 2014.07.15

v0.13.1 - 2014.07.09

v0.13.0 - 2014.07.03

v0.12.1 - 2014.06.25

v0.12.0 - 2014.06.25

v0.11.0 – 2014.06.06

v0.10.2 – 2014.06.04

v0.10.1 – 2014.05.28

v0.10.0 – 2014.05.27

v0.9.0 – 2014.05.09

Page Structure

Grid

Grid horizontal classes

Cell width

Cell horizontal offset

Convenience classes

Grid vertical classes

Cell height

Cell vertical offset

Nested grids

Overwrite grid in tablet layout

Fixed vs fluid layout

Font size adjustments

Visibility

Hiding

Hidden