Hoe gebruik je Bootstrap 3 binnen Joomla 3, met alleen de hulpmiddelen die door beide out-of-the-box worden geboden.

1. Joomla!
3Bootstrap
Joomladagen 2014
Henk Rijneveld
Joomladagen 2014
Henk Rijneveld

2. De case
Joomla 1.5
Inclusief legacy optie
Flash fotoboek
Ooit gehackt
Nu helemaal read-only
Joomla 3.laatst
Helemaal responsive
Fixed kop- en voetgebied
Specifieke chrome
Zoveel mogelijk zelf

3. Bootstrap 3.1.1 en 2.3.2
> 100 css-classes gewijzigd, verwijderd, nieuw;
GRID – systeem op de schop (altijd responsive);
Visible en Hide classes o.b.v. pixels, niet device;
Bootstrap in J3 gefixeerd op 2.3.2 (media/jui)
●
Core (3.2) nauwelijks bootstrapafhankelijk (dropdown en tooltip).
●
3rd
-party soms wel afhankelijk, wordt wellicht meer
Niet backwards-compatibel!

4. Waarom B 3 gebruiken?
Mijn uitgangspunt:
Joomla! is een CMS
dus:
Ben ik volledig vrij in het ux-ontwerp
en:
Ik wil testen of dat zo is.
#omdathetkan
Geldt alleen voor
frontend(!)

5. Aanvalsplan
●
Inlezen en PoC's;
● Joomla en Bootstrap 3;
● B 3 basistemplate en LESS (sticky-footer-with-navbar);
● Eigen GRID definiëren en opzetten;
● Modules en zo plaatsen;
● Content responsive vullen (Form2Content);
● Override voor corecomponent(s) (fix op 2.3.2);
● Overrides voor Joomgallery (niet responsive ootbx);
● Testen... Testen... Testen...

6. jQuery en Less
jQuery tijdens runtime in de browser
“It makes things like HTML document traversal and
manipulation, event handling, animation, and Ajax much
simpler”
LESS tijdens developmenttime
“LESS extends CSS with dynamic behavior such as variables,
mixins, operations and functions”
@geel: #F0CC01;
H1 {
color: @geel;
}
P {
Border-bottom: @geel;
}
@geel: #F0CC01;
H1 {
color: @geel;
}
P {
Border-bottom: @geel;
}
.seethrough {
color: fadeout(@geel, 10%);
}
#menu a {
text-decoration: underline;
.seethrough; // mixin
}
.seethrough {
color: fadeout(@geel, 10%);
}
#menu a {
text-decoration: underline;
.seethrough; // mixin
}

7. LESS Structuur
node.js +
Lessc +
PHP Storm
Winless
en/of
simpLESS
node.js +
Lessc +
PHP Storm
Winless
en/of
simpLESS
template.csstemplate.css template-editor.csstemplate-editor.css
template.lesstemplate.less template-editor.lesstemplate-editor.less
variables.lessvariables.less
typography.lesstypography.less
layout-editor.lesslayout-editor.less
reset.lessreset.less
layout.lesslayout.less
responsive.lessresponsive.less
Bootstrap.lessBootstrap.less

8. Nestbaar
Responsive
Grid
12 col. default
Nestbaar
Responsive
Grid
12 col. default
Typografie
incl.
Normalize
Typografie
incl.
Normalize
Responsive
cssclasses
Responsive
cssclasses
Pagina-
elementen
zonder JS
Pagina-
elementen
zonder JS
jQuery
plugins
jQuery
plugins
Wat is Bootstrap
“Sleek, intuitive, and powerful mobile first*
front-end framework for faster and easier web
development” * sinds versie 3.0
4 breek-
Punten
4 breek-
Punten Forms,
Buttons
Forms,
ButtonsTabellenTabellen
Pagina-
elementen
met JS
Pagina-
elementen
met JS
Website
+
Examples
Website
+
Examples

9. Oplossing versieconflict
Laat mootools aan Joomla! over
Joomla! jquery en noconflict etc ook (JHtml::_('jquery.framework'))
Als Joomla! Bootstrap2.3.2.js wil laden: ongedaan maken en melding geven
Laadt in template Bootstrap3.js
Als Joomla Bootstrap css wil laden: melding en echt probleem!
Laadt in template Bootstrap3.css
Elk conflict: in principe template override

10. Het GRID
http://www.helloerik.com/bootstrap-3-grid-introduction
Start mobile first, daarna uitbouwen:
XS SM MD LG→ → →
mob
col-xs-4 col-xs-4 col-xs-4
desk
col-sm-1
hidden-xs
col-sm-2 col-sm-2 col-sm-3
hidden-xs
col-sm-4

11. GRID-Markup
<div class="container">
<div class="row">
<div class="hidden-xs col-sm-1">
// Marge (of col-sm-offset-1 in volgende div)
</div>
<div class="col-xs-4 col-sm-2">
// Socialmedia bekijken
</div>
<div class="col-xs-4 col-sm-2">
// Socialmedia volgen
</div>
<div class="hidden-xs col-sm-3">
// Webkoppellink
</div>
<div class="col-xs-4 col-sm-4">
// Adres- en contactgegevens
</div>
</div>
</div>

12. GRID-Semantisch
<div class="container">
...
<div class="voet">
<div class="kijken">
// SOCIAL MEDIA KIJKEN
</div>
<div class="volgen">
// SOCIAL MEDIA VOLGEN
</div>
<div class="mijnblog">
// WEBKOPPELLINK
</div>
<div class="adres">
// ADRES EN CONTACT
</div>
</div>
</div>

13. GRID-Less
.voet {
.make-row();
}
.kijken {
.make-xs-column(4);
.make-sm-column(2);
.make-sm-column-offset(1);
}
.volgen {
.make-xs-column(4);
.make-sm-column(2);
}
.mijnblog {
.make-sm-column(3);
.hidden-xs();
}

14. Form2Content
ISSUE:
Responsive laat weinig ruimte voor specifieke
lay-out (img-responsive vs vaste grootte)
Een oplossing:
Form2Content: blijft dicht bij core
Definieer
Document
Velden
Definieer
Document
Velden
Maak
(Smarty)
Template
Maak
(Smarty)
Template
Vul
Document
Vul
Document
Genereer
Joomla
Artikel
Genereer
Joomla
Artikel

15. Core
●
Search laadt tooltip (JS)
●
Beheerfuncties:
●
Login
●
Edit
●
…
●
Deel van com_content functies
●
Oplossing: mixins of overrides

16. Joomgallery
●
Bootstrap responsive bij img alleen op width;
●
Joomgallery forceert width en height;
●
Toevoegen class portrait en landscape;
●
(slechts) vier bestanden, ~15 regels code
responsive fotoboek.

17. Testen
1280x1024
2010
1280x1024
XP W7 XP
6-8 7-9
2013
2008
2560 x 1440
1920 x 1080
1376 x 768 touch
W7
W8.1
W7
10
8
11
XP IOS 7
Galaxy S2
iPhone
2014?
8

18. Experimenteren?
● getbootstrap.com
● http://www.helloerik.com voor het Grid
● template-Template op henkrijneveld.nl