Bootstrap Integration
What’s Bootstrap
 A front-end framework made by @mdo
and @fat at Twitter
 Clean look and feel out of the box
 Responsiv...
What’s Less
 Less is a CSS pre-processor
 extends the CSS language, adding
features
 variables
 mixins
 functions
 c...
Customizable
 .less files live in the site files
 they’re accessed, edited and compiled
from the site settings
 the res...
Demo
Core modules
 Jahia Bootstrap (bootstrap)
 Jahia Boostrap Components
(bootstrap-components)

 Sample Bootstrap Template...
Jahia Bootstrap
 contains all the Bootstrap source files (.less
files, javascripts, images)
 site settings to edit the ....
Jahia Boostrap Components
 provides a ‘bootstrap’ view for most of the
default components
 and several alternative Boots...
Sample Bootstrap Templates
 set the ‘bootstrap’ view, if available, to be
used as the ‘default’ one
(new option available...
Bootstrap Integration
Upcoming SlideShare
Loading in...5
×

JahiaOne - Jahia 7: A bootstrap/less integration example

1,123

Published on

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.

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,123
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
0
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Transcript of "JahiaOne - Jahia 7: A bootstrap/less integration example"

  1. 1. Bootstrap Integration
  2. 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. 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. 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. 5. Demo
  6. 6. Core modules  Jahia Bootstrap (bootstrap)  Jahia Boostrap Components (bootstrap-components)  Sample Bootstrap Templates (sample-bootstrap-templates)
  7. 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. 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. 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. 10. Bootstrap Integration

×