Joomla!3
Bootstrap
Joomladagen 2014Henk Rijneveld
De case
Joomla 1.5Inclusief legacy optieFlash fotoboekOoit gehacktNu
helemaal read-only
Joomla 3.laatstHelemaal responsiveFixed kop- en
voetgebiedSpecifieke chromeZoveel mogelijk zelf
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!
Waarom B 3 gebruiken?
Mijn uitgangspunt:Joomla! is een CMSdus:Ben ik volledig vrij in
het ux-ontwerp en:Ik wil testen of dat zo is.
#omdathetkan
Geldt alleen voorfrontend(!)
Aanvalsplan
Inlezen en PoC's;
Joomla en Bootstrap 3;
B 3 basistemplate en LESS (sticky-footer-with-navbar);
Eigen GRID definiren 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...
jQuery en Less
jQuery tijdens runtime in de browserIt makes things like HTML
document traversal and manipulation, event handling, animation, and
Ajax much simpler
LESS tijdens developmenttimeLESS extends CSS with dynamic
behavior such as variables, mixins, operations and functions
@geel: #F0CC01;
H1 {color: @geel;}P {Border-bottom: @geel;}.seethrough {color:
fadeout(@geel, 10%);}
#menu a { text-decoration: underline; .seethrough; // mixin}
LESS Structuur
node.js +Lessc +PHP Storm
Winlessen/ofsimpLESStemplate.csstemplate-editor.csstemplate.lesstemplate-editor.lessvariables.lesstypography.lesslayout-editor.lessreset.lesslayout.lessresponsive.less
Bootstrap.less
NestbaarResponsiveGrid12 col.
defaultTypografieincl.NormalizeResponsivecssclassesPagina-elementenzonder
JSjQuerypluginsWat is Bootstrap
Sleek, intuitive, and powerful mobile first* front-end framework
for faster and easier web development
* sinds versie 3.0
4 breek-Punten
Forms,ButtonsTabellenPagina-elementenmet JSWebsite+Examples
Oplossing versieconflict
Laat mootools aan Joomla! overJoomla! jquery en noconflict etc
ook (JHtml::_('jquery.framework'))Als Joomla! Bootstrap2.3.2.js wil
laden: ongedaan maken en melding gevenLaadt in template
Bootstrap3.jsAls Joomla Bootstrap css wil laden: melding en echt
probleem!Laadt in template Bootstrap3.cssElk conflict: in principe
template override
Het GRID
http://www.helloerik.com/bootstrap-3-grid-introductionStart
mobile first, daarna uitbouwen:XS SM MD LG
mob
col-xs-4
col-xs-4
col-xs-4
desk
col-sm-1hidden-xs
col-sm-2
col-sm-2
col-sm-3hidden-xs
col-sm-4
GRID-Markup
// Marge (of col-sm-offset-1 in volgende div)// Socialmedia
bekijken// Socialmedia volgen// Webkoppellink// Adres- en
contactgegevens
GRID-Semantisch
... // SOCIAL MEDIA KIJKEN // SOCIAL MEDIA VOLGEN //
WEBKOPPELLINK// ADRES EN CONTACT
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();}
Form2Content
ISSUE:Responsive laat weinig ruimte voor specifieke lay-out
(img-responsive vs vaste grootte)
Een oplossing:Form2Content: blijft dicht bij core
DefinieerDocumentVeldenMaak(Smarty)TemplateVulDocumentGenereerJoomlaArtikel
Core
Search laadt tooltip (JS)
Beheerfuncties:Login
Edit
Deel van com_content functies
Oplossing: mixins of overrides
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.
Testen
1280x1024
2010
1280x1024
XP
W7
XP
6-8
7-9
2013
2008
2560 x 14401920 x 10801376 x 768 touch
W7W8.1
W7
10
8
11
XP
IOS 7
Galaxy S2iPhone
2014?
8
Experimenteren?
getbootstrap.com
http://www.helloerik.com voor het Grid
template-Template op henkrijneveld.nl
