This short session will show a module using Twitter Bootstrap, less.js and the new capabilities offered by the versatile site settings panels offered by Jahia 7. This module enable editors or site admins to change and control the look and feel of their websites on the fly without touching the template-set and using the Studio and with no direct access to static assets files.

1. Bootstrap Integration

2. What’s Bootstrap
 A front-end framework made by @mdo
and @fat at Twitter
 Clean look and feel out of the box
 Responsive
 Grid system and GUI components
 JavaScript (jQuery) plugins
 Customizable thanks to Less

3. What’s Less
 Less is a CSS pre-processor
 extends the CSS language, adding
features
 variables
 mixins
 functions
 compiles to a regular CSS

4. Customizable
 .less files live in the site files
 they’re accessed, edited and compiled
from the site settings
 the resulted CSS is stored as a node of the
site
 need to be published as any other content

5. Demo

6. Core modules
 Jahia Bootstrap (bootstrap)
 Jahia Boostrap Components
(bootstrap-components)
 Sample Bootstrap Templates
(sample-bootstrap-templates)

7. Jahia Bootstrap
 contains all the Bootstrap source files (.less
files, javascripts, images)
 site settings to edit the .less files
 the Less compiler and the rule to execute it
when a .less file is modified
 JSP tags to link to the compiled CSS

8. Jahia Boostrap Components
 provides a ‘bootstrap’ view for most of the
default components
 and several alternative Bootstrap views for
some components (e.g. jmix:list)
 new components with Bootstrap views

9. Sample Bootstrap Templates
 set the ‘bootstrap’ view, if available, to be
used as the ‘default’ one
(new option available in templateSets)
 comes with its own Bootstrap theme
(custom .less files, images)

10. Bootstrap Integration