Joomla Template & Bootstrap 3.0 JUGA 19-11-2013 Henk Rijneveld (
[email protected])
De case Joomla 3.laatst Helemaal responsive Fixed kop- en voetgebied Specifieke chrome Zoveel mogelijk zelf Joomla 1.5 Inclusief legacy optie Flash fotoboek Ooit gehackt Nu helemaal read-only
Waarom B 3 gebruiken? Template met B 2 irriteerde: ● ● ●
Responsive apart laden; Onduidelijk gebruik responsive; Irritaties bij enkele bugs (weet niet meer welke).
Mijn commerciële klanten liever alleen “klassieke” ontwerpen.
#omdathetkan
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...
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: @geel: #F0CC01; #F0CC01; H1 H1 {{ color: color: @geel; @geel; }} P P {{ Border-bottom: Border-bottom: @geel; @geel; }}
.seethrough .seethrough {{ color: color: fadeout(@geel, fadeout(@geel, 10%); 10%); }} #menu #menu aa {{ text-decoration: text-decoration: underline; underline; .seethrough; .seethrough; //// mixin mixin }}
LESS Structuur reset.less reset.less
variables.less variables.less
Bootstrap.less Bootstrap.less
Op Op windows: windows:
Winless Winless en/of en/of
simpLESS simpLESS
typography.less typography.less
en/of en/of
node.js node.js ++ Lessc Lessc layout.less layout.less responsive.less responsive.less
layout-editor.less layout-editor.less
template.less template.less
template-editor.less template-editor.less
template.css template.css
template-editor.css template-editor.css
alle alle samen samen met met aparte aparte editor editor (notepad++, (notepad++, phpstorm, phpstorm, ...) ...)
Wat is Bootstrap “Sleek, intuitive, and powerful mobile first* front-end framework for faster and easier web development” Nestbaar Nestbaar Responsive Responsive Grid Grid 12 12 col. col. default default
44 breekbreekPunten Punten
* sinds versie 3.0
Responsive Responsive cssclasses cssclasses
Typografie Typografie incl. incl. Normalize Normalize
PaginaPaginaelementen elementen
jQuery jQuery plugins plugins
Tabellen Tabellen
Forms, Forms, Buttons Buttons
PaginaPaginaelementen elementen
Website Website ++ Examples Examples
zonder zonder JS JS
met met JS JS
Bootstrap 3.0.2 en 2.3.2
> 100 css-classes gewijzigd, verwijderd, nieuw; Altijd responsive (geen aparte css, alleen fluid); IE 8 compatibiliteit nog steeds aandacht nodig; GRID – systeem op de schop; Geen breekpunt bij 480px; Visible en Hide classes o.b.v. pixels, niet device; Absoluut niet backwards-compatibel!
Joomla en Bootstrap (3) ●
Backendtemplate geen probleem
●
Bootstrap in J3 gefixeerd op 2.3.2 (media/jui)
●
Core (3.2) nu nauwelijks bootstrapafhankelijk: ●
Gebruikt voor dropdown en tooltip. Inlogcomponent, Finder en Breadcrumbs vereisen ook Bootstrap;
●
Standaard coretemplates laden bootstrap uit jui zelf.
●
3rd-party soms wel, wordt wellicht meer
●
Moet CMS specifieke UI eisen in frontend?
●
Versieconflict bij eigen Bootstrap (js & css)
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
Het GRID http://www.helloerik.com/bootstrap-3-grid-introduction
Start mobile first, daarna uitbouwen: XS → SM → MD → LG col-xs-4
col-xs-4
col-xs-4 mob
desk col-sm-1 col-sm-2 hidden-xs
col-sm-2
col-sm-3 hidden-xs
col-sm-4
GRID-Markup
// Lege marge
// Socialmedia bekijken
// Socialmedia volgen
// Webkoppellink
// Adres- en contactgegevens
Form2Content ISSUE: Responsive laat weinig ruimte voor specifieke lay-out (img-responsive vs vaste grootte) Een oplossing: Form2Content: blijft dicht bij core
Definieer Definieer Document Document Velden Velden
Maak Maak (Smarty) (Smarty) Template Template
Vul Vul Document Document
Genereer Genereer Joomla Joomla Artikel Artikel
Core ●
o.a. Search tooltip
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 2008
2010
XP
7-9
6-8 1280x1024
2013
XP
W7
8
1280x1024
XP
W7 W8.1 2560 x 1440 1920 x 1080 1376 x 768 touch
IOS 7 8
10 11
Galaxy S2 iPhone
2014?
Experimenteren? ●
getbootstrap.com
●
http://www.helloerik.com voor het Grid
●
Kaal template op henkrijneveld.nl
