Joomla & Bootstrap 3
-
Upload
henk-rijneveld -
Category
Technology
-
view
1.709 -
download
0
Transcript of Joomla & Bootstrap 3
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