Bootstrap

Overview

Bootstrap (http://getbootstrap.com/2.3.2) is a "sleek, intuitive, and powerful front-end framework for faster and easier web development". Moodle now has some themes that build upon the best practices, documentation, tools and resources that it provides.

If you're new to Bootstrap we'd suggest starting by reading through the documentation. Not only is it well written and informative, it uses Bootstrap itself and so is a live demonstration too.

http://getbootstrap.com/2.3.2/getting-started.html

A common complaint about Bootstrap is that all Bootstrap-built sites look the same, since people like the defaults so much they just don't bother to change them. It is however not designed to be a final look, just a platform to build on. Some examples of what can be done can be found at http://builtwithbootstrap.com/ and http://expo.getbootstrap.com (Note that some of these examples may use Bootstrap 3. Then the code of these examples won't work on Moodle that use bootstrap 2.3.2)

Features

Responsive design

A key feature of Bootstrap is responsive design. This means that the look of the page changes based on the width of your screen and allows you to alter the presentation so that iPhones, iPads, Netbooks & Desktops get subtly (or radically) different views of the same page.

http://getbootstrap.com/2.3.2/scaffolding.html#responsive

Less

Bootstrap's stylesheets are written in a variant of CSS called LESS. It is possible to use Bootstrap without LESS as they provide the compiled output as CSS too, but for integration with existing Moodle HTML it is (at least currently) necessary for Moodle Bootstrap's core styles to be compiled after any changes. See the LESS page for more on this.

Glyphicons

Bootstrap provides an set of icons called Glyphicons. These are not used for the core Moodle icons as there aren't enough suitable icons to cover Moodle's needs. But they are available for use in content by applying simple CSS classes via the HTML editor. (Note in the next version of Bootstrap this "icon sprite" is replaced with an icon font. It is hoped that Moodle can merge it's SVG icons into this font and all icons will be applied in the same manner)

http://getbootstrap.com/2.3.2/base-css.html#icons

Grids

Bootstrap uses CSS grids where previously web developers would have used floats (or before that tables). A key feature of grids is that they can "collapse" at smaller widths and so items that would be in a row will appear as a single column on smaller devices like iPhones.

http://getbootstrap.com/2.3.2/scaffolding.html#fluidGridSystem

Layouts

The core Bootstrap theme uses a "Fluid Grid System". (Note that in the next version of Bootstrap, there is only one grid system and it is fluid, though it is no longer called that since it is the only grid system.)