Joomla Template & Bootstrap 3.0. JUGA Henk Rijneveld (henk@henkrijneveld.nl)

Transcriptie

1 Joomla Template & Bootstrap 3.0 JUGA Henk Rijneveld

2 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

3 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

4 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...

5 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 #F0CC01; H1 { } P { }.seethrough { color: fadeout(@geel, 10%); } #menu a { text-decoration: underline;.seethrough; // mixin }

6 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

7 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

8 Bootstrap en > 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!

9 Joomla en Bootstrap (3) Backendtemplate geen probleem Bootstrap in J3 gefixeerd op (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)

10 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

11 Het GRID 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

12 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>

13 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

14 Core o.a. Search tooltip

15 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.

16 Testen 2008 XP 2010 W7 XP x x W7 W8.1 XP IOS x x x 768 touch Galaxy S2 iphone 2014?

17 Experimenteren? getbootstrap.com voor het Grid Kaal template op henkrijneveld.nl