Joomla 2.5, Blank-Template und Bootstrap kombiniert
Für einen Workshop auf der J and Beyond 2012 hat Alexander Schmidt ein schönes Tutorial verfasst, wie man Schritt für Schritt mit Joomla, dem Joomla-Blank-Theme von Blank.vc, Twitter Bootstrap, jQuery und dem Joomla Amelia Theme eine schicke Website nach den Regeln des responsiven Designs erstellt.
Als erstes besorgt man sich die nötigen Einzelkomponenten, passt dann unter anderem ein paar Dateien des Blank-Theme-Templates für Joomla in einem Texteditor an und kopiert die Stylesheet-Dateien von Twitter Bootstrap in den eigenen Template-Ordner. Nach dem Einbau der Bootstrap-Stylesheets sieht man bereits das 12-Spalten-Grid-System von Bootstrap im eigenen Joomla-Template. Im Tutorial bei Blank.vc wird jeder Schritt im Einzelnen beschrieben. Auch das Einbinden von Menü mit Hilfe von jQuery für Dropdown-Funktionalität, Suche, Breadcrump-Pfad und Footer wird genau erklärt.
Zum Schluss, wenn der Website-Prototyp mit Joomla-Blank-Theme, jQuery und Bootstrap erstellt ist, wird noch beschrieben, wie man mit Hilfe eines anderen Joomla-Theme wie z.B. Amelia das Ganze optisch aufpeppt. Das Ergebnis ist ein schickes, responsives Weblayout mit nötigen Grundfunktionalitäten, dass nicht nur im Browser gut aussieht, sondern sich auch an Tabletts und Smartphones anpasst.
Alle Einzelheiten mit Code-Snippets und Erklärung für die Erstellung des responsiven Joomla-Layouts auf Grundlage von Joomla-Themes, Bootstrap und jQuery findet ihr in dem ausführlichen Tutorial bei Blank.vc.
Weiterführende Links:
- Blank Template und Twitter Bootstrap Anleitung für Joomla! – Blank.vc
- Demo zu Joomla Blank Template mit Boostrap
- Joomla
- Joomla Blank Template
- Bootstrap von Twitter
- jQuery
Bildnachweis für die Newsübersicht: aka ericajoy / flickr.com, Lizenz: CC-BY
von Johannes Volk via facebook 06.06.2012 (20:09Uhr) 1.
Bootstrap ist eine schöne Sache aber ein mit Win ME-Vergleichbares CMS damit in einem Satz zu nennen ... tztztztzt
von Thomas Paul via facebook 06.06.2012 (20:22Uhr) 2.
Jaja ... das j3n Magazin ;-)
von Björn Biege via facebook 06.06.2012 (20:57Uhr) 3.
joomla xD
von Kai Gossel via facebook 07.06.2012 (08:25Uhr) 4.
Joomla? Joomla?!
von Alexander Schmidt via facebook 07.06.2012 (09:16Uhr) 5.
... und mit Joomla! 3.0 ist Bootstrap per Default dabei. Cool!
von Philipp 07.06.2012 (11:16Uhr) 6.
Ich hatte überlegt etwas bzgl. des gewählten CMS zu sagen, aber das wurde mir ja schon abgenommen. :)
von Wie man mit Joomla und Bootstrap respons… 07.06.2012 (11:19Uhr) 7.
[...] Social Media | t3n News [...]
von trash 30.07.2012 (22:29Uhr) 8.
Joomla hat eine Daseinsberechtigung und ist im Gegensatz zu mach anderem CMS leichtgewichtig (keine rekursives Scripting im Script oder hat jemand schon mal von JommlaScript gehört ;) ), man kann Module einfach erstellen, hat eine Doku und wird aktiv auf github entwickelt. Es gibt mehr Seiten die Joomla erfolgreich einsetzen als man sieht. Wer will schon einen Hammer einsetzen wo es eine Stecknadel auch tun würde?
von Alexander Schmidt 17.10.2012 (18:22Uhr) 9.
Eugene Sivokon hat das Bootstrap Tutorial ins Russische übersetzt: http://itr.im/2j7