Joomla Template & Bootstrap 3.0 JUGA 19-11-2013 Henk Rijneveld (henk@henkrijneveld.nl)
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: #F0CC01; H1 { color: @geel; } P { Border-bottom: @geel; }.seethrough { color: fadeout(@geel, 10%); } #menu a { text-decoration: underline;.seethrough; // mixin }
LESS Structuur reset.less layout.less responsive.less variables.less typography.less Bootstrap.less layout-editor.less Op windows: Winless en/of simpless en/of node.js + Lessc alle samen met aparte editor (notepad++, phpstorm,...) template.less template-editor.less template.css template-editor.css
Wat is Bootstrap Sleek, intuitive, and powerful mobile first* front-end framework for faster and easier web development * sinds versie 3.0 Nestbaar Responsive Grid 12 col. default Responsive cssclasses Typografie incl. Normalize Paginaelementen zonder JS jquery plugins 4 breek- Punten Tabellen Forms, Buttons Paginaelementen met JS Website + Examples
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 col-sm-2 col-sm-3 hidden-xs hidden-xs col-sm-4
GRID-Markup <div class="container"> <div class="row"> <div class="hidden-xs col-sm-1"> // Lege marge </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>
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 Maak (Smarty) Template Vul Document Genereer Joomla 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 XP 2010 W7 XP 6-8 7-9 8 1280x1024 1280x1024 2013 W7 W8.1 XP IOS 7 8 2560 x 1440 1920 x 1080 1376 x 768 touch 10 11 Galaxy S2 iphone 2014?
Experimenteren? getbootstrap.com http://www.helloerik.com voor het Grid Kaal template op henkrijneveld.nl