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.
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
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)