10 zukunftsfähige Themes, die auch unter Drupal 8 funktionieren

Breite Inhalt
12/12
Breite Layout-Container
Ganze Breite
Spalten Inhalt
12/12

10 zukunftsfähige Themes, die auch unter Drupal 8 funktionieren

Projekte unter Drupal 7 haben wir bislang mit dem Theme Omega 3 umgesetzt, mit dem wir auch sehr zufrieden sind.
Nun stehen allerdings zwei Aktualisierungen an: In absehbarer Zeit werden wir die ersten Produktiv-Projekte unter Drupal 8 verwirklichen und dafür kommt nur Omega 4 in Frage.
Der Unterschied zwischen Omega 3 und Omega 4 ist sehr gut und es lag nahe, sich bei der Gelegenheit mal wieder umzusehen, welche Alternativen es gibt.

Die Auswahl ist ja riesig. Momentan gibt es eine Liste mit 1291 Themes auf Drupal.org.

Das sind nur die frei verfügbaren, d.h. die kostenpflichtigen Drupal-Themes von Fremdanbietern sind noch nicht gerechnet.
https://www.drupal.org/project/project_theme

Also gilt es eine vernünftige Vorauswahl zu treffen, um sich dann je nach Anwendungsfall in wenige Themes tiefer einzuarbeiten.

Folgende Kriterien haben wir vorausgesetzt, um die hier näher beschriebenen Themes zu selektieren:

  • Das Projekt soll aktuell gepflegt sein und weiter entwickelt werden
  • Das Theme soll selbstverständlich auch auf Smartphones funktionieren und modernes HTML 5 Markup verwenden
  • Es soll bereits abzuschätzen sein, dass es für Drupal 8 in Kürze eine stabile Version geben wird.


Und schon schrumpft die Anzahl der Themes auf übersichtliche 10 Varianten, die wir im Folgenden alphabetisch sortiert näher vorstellen:

 

Adaptive Theme

SASS/COMPASS: ja, siehe http://adaptivethemes.com/documentation/sass

Layout-Management: Panels, Display Suite and Gpanels

Color Module: ja

Beschreibung: Mächtiges Theme Framework für moderne Designs die über alle Browser und Geräte hinweg funktionieren.

Mit Adaptiv Theme kann man spezielle Layouts für unterschiedliche Ausgabemedien hinweg über das User-Interface – also ohne Code-Kenntnisse - stylen.

  • Panels, Display Suite und Gpanels werden voll unterstützt mit vielen Optionen, um Panel Layouts in Mobilen Geräten zu zeigen.
    Mit Browscap CTools module kann man die Sichtbarkeit von Panel Ansichten in mobilen Geräten testen.
  • Mit dem Color Module Support können Farben im Backend verändert werden.
  • Accessibility nach WGAC 2.0.
  • Adaptive Theme ist sehr schnell und unterstützt diverse Caching-Techniken optimal.

Download: https://www.drupal.org/project/adaptivetheme

Doku: http://adaptivethemes.com/documentation/adaptivetheme-7x-3x

Beispiele: http://www.unitedwayottawa.ca/
https://drupalthemesamples.com/adaptivetheme/

 

Basic

SASS/COMPASS: ja

Beschreibung: Das Grid Framework wurde von Bourbon Neat zur Verfügung gestellt.

  • Sehr simple und einfach anpassbare Architektur.
  • Responsive Design Out-of-the-box.
  • SASS Unterstützung mit Bourbon mixin library
  • Links zum Editieren von Blöcken.
  • Verschiedene Optionen für Page Templates
  • Sehr SEO-Freundlich mit Top-Down-Order, unterstützt IE Browser Debugger Basic ist das ideale Theme für einen smarten schnellen Start mit einem flexiblen Theme.

Download: https://www.drupal.org/project/basic

Doku: http://cgit.drupalcode.org/basic/tree/README.txt?id=refs/heads;id2=7.x-3.x

Beispiele: http://buildamodule.com/

https://drupalthemesamples.com/basic/


Bootstrap Business

Color Module: ja

Beschreibung: Das Theme basiert auf dem Bootstrap 3 Framework http://getbootstrap.com/

  • Bietet Unterstützung für ein 1,2 und 3-Spalten-Layout mit 20 Regionen.
  • Unterstützt das Superfish Modul

Download: https://www.drupal.org/project/bootstrap_business

Doku: http://demo.drupalizing.com/?theme=bootstrap-business

Beispiele:  https://drupalthemesamples.com/bootstrap-business/
http://demo.drupalizing.com/?theme=bootstrap-business


FontFolio

Beschreibung: Das Theme wurde von FontFolio für Wordpress übernommen und ist besonders geeignet für Designer, Künstler und Kunsthandwerker, die eine Art virtuellen Schaukasten ihrer Werke bauen möchten.

  • Auf der Startseite gibt es ein fluid Grid-Layout, das sich optimal an Browserauflösungen anpasst. Die Unterseiten bestehen aus einem 2-Spalten-Layout.
  • Die Startseite wird automatisch als Gallery mit betitelten Bildern gestaltet.
  • Da es sich dabei um unformatierte Listen-Elemente handelt, kann das Design hervorragend angepasst werden.
  • Es werden Social-Media Icons geliefert und volle Multi-Language-Unterstützung, außerdem voller RTL-(Right-to-Left) Support.

Download: https://www.drupal.org/project/fontfolio

Doku: https://www.drupal.org/node/1653300

Beispiele: http://www.aelos.es/camp/

https://drupalthemesamples.com/fontfolio/


Gratis 2

SASS/COMPASS: ja

Beschreibung: Für Drupal 7 + 8 kommt Gratis 2 zum Einsatz.

Dieses ist mit Susy Grids gebaut und unterstützt SASS / COMPASS scss.

Es gibt ein Starter-Kit für Drupal 7 Sub-Themes.

Download: https://www.drupal.org/project/gratis

Doku: http://www.2dot0.gratis/about-gratis-2

Beispiele: http://dannyenglander.com/blog/random-acts-drupal
http://www.2dot0.gratis/

https://drupalthemesamples.com/gratis /

 

Mayo

Color Module: ja

Beschreibung: Man darf sich nicht von der Farbigkeit der Demobilder erschrecken lassen.

  • Mayo bietet einfache Möglichkeiten, das Design via Einstellungen im Backend auf vielfältige Weise anzupassen – auch wenn gute CSS + HTML + PHP-Kenntnisse fehlen.
    Diese Eintellungen umfassen die Farbe der meisten Theme Elemente, sowie Schrift-Typen und Größe, Styles für Menüs und runde Ecken für Blöcke.
  • Das Layout für den Headerbereich mit Logo, Sitename, Slogan und Suche kann gut angepasst werden inklusive Upload eigener Bilder.
  • Ein Wasserzeichen wird über den Header gelegt, um die Bilder zu schützen.
  • Ein- und Ausschalten der Breadcrumps und vieles mehr ist einfach möglich.
  • Man kann Elemente zur Schriftgrößen-Veränderung platzieren (erfordert JavaScript).
  • Superfish und Nice Menus werden unterstützt.
  • Extra Regionen können z.B. im Footer eingebaut werden.
  • Da keine Bilder für das Theming verwendet werden, sind die Ladezeiten schnell.
  • Color Module wird unterstützt.

Download: https://www.drupal.org/project/mayo

Doku: https://www.drupal.org/node/2261003

Beispiele: http://rocker-film.de.trustcheck.net/

https://drupalthemesamples.com/mayo/


Omega 4

SASS/COMPASS: ja

Layout-Management: Panels und Panels Everywhere
Color Module: ja

Beschreibung: Omega dürfte eines der mächtigsten Themes sein und ist für Entwickler gedacht, die mehr Wert auf volle Kontrolle über den Code als ein User-Interface legen. Es ist kein Theme für Anfänger.

Man muss genau unterscheiden zwischen Omega 3 und Omega 4, weil die Unterschiede groß sind. Für Omega 3 gibt es ein Modul Omega Tools, mit dem sich einfach ein Subtheme erstellen lässt. Bei Omega 4 muss man dies von Hand machen. Omega 4 ist ganz klar die Zukunft, weil es Omega 3 nicht für Drupal 8 geben wird und einige interessante Techniken zum Einsatz kommen, wie z.B. SASS. Zu beachten ist, dass Omega 4 nicht mit Omega Tools und auch nicht mit Delta funktioniert. Im Folgenden reden wir von Omega 4:

  • Dieses Theme überschreibt das gesamte CSS aus dem Core und bringt viele Markpup-Verbesserungen mit sich. Dadurch wird das CSS performanter und einfacher zu überschreiben sowie zukunftssicher.
  • Das Layout basiert auf bestimmten Styles und Regionen und ist auf dem Susy Grid-System aufgebaut. Das erlaubt es, sehr stark angepasste Styles für unterschiedliche Einsätze – je nach Kontext – zu bauen.
  • Omega 4 kann mit Panels und Panels Everywhere verwendet werden, um noch mehr Kontrollen über die Seiten zu bekommen.
    Panel-Layouts können in Kombination mit dem Context Omega Modul eingesetzt werden, um unterschiedliche Layouts pro Seite zu erstellen.
  • Omega bietet Einstellungen zum disablen des Caches, Demo-Modus der Regionen sowie optional die Unterstützung von LiveReload.
  • Die template.php-Datei kann etwas unhandlich werden wegen der großen Anzahl an (pre)process and theme-Funktionen. Man kann diese allerdings mit inc-Files in separaten Verzeichnissen verwalten.
  • Omega bietet Drush-Unterstützung, um schnell auf der Konsole Subthemes zu erzeugen oder Compass und LiveReload zu managen.
  • Die Einbindung von SASS ist gut dokumentiert.
  • Es gibt viele Polyfills, die Rückwärts-Kompatilibität mit IE 8 ermöglichen,
    z.B. Selectivizr.js;  CSS3 Media Queries JS;  Respond.js;  CSS3 PIE; HTML5 shiv
  • Color module support

Download: https://www.drupal.org/project/omega

Doku: https://www.drupal.org/node/819164

http://friendlymachine.net/posts/preview-omega-4

Beispiele: https://groups.drupal.org/node/128039
https://drupalthemesamples.com/omega/


Writer

Beschreibung: Das Theme ist für Webseiten mit umfangreichen Texten und Blogs gedacht, wo die Aufmerksamkeit des Lesers beim Text bleiben soll, statt auf einem aufwändigen Design. Die Einrichtung ist entsprechend unkompliziert.

  • extrem minimalistisches Design mit einer Spalte
  • hervorragende Typographie
  • Support für Code-Snippets
  • Responsive Design, das Out-of-the-box auf allen Ausgabemedien hervorragend skaliert.

Download: https://www.drupal.org/project/writer

Doku: http://www.writer.bryanbraun.com/

Beispiele: http://www.writer.bryanbraun.com/

https://drupalthemesamples.com/writer/

 

Zen

SASS/COMPASS: ja

Layout-Management: Zen Grid

Color Module:

Beschreibung: Zen zeichnet sich durch ein schlankes semantisch korrektes HTML5 Markup aus.

  • Gemeinsam mit dem Module Fences kann man endlich auch HTML5 in die field.tpl bringen.
  • HTML5 shiv. Ist inklusive, kann aber leicht in den Settings ausgeschaltet werden, wenn jemand lieber ein eigenes Modernizr-Script verwendet.
  • Der Ansatz liegt bei mobile first mit einem fluiden Grid-Layout, das je nach Media Query entweder 1-, 3-, oder 5-spaltig sein kann. Die Anzahl der Spalten kann über eine SASS-Variable gesteuert werden.
  • Die Unterstützung von SASS ist sehr ausgereift und es kommt Zen Grids – ein Sass/Compass Plugin – zum Einsatz. Damit lassen sich komplexe Grid-Layouts bauen, ohne viel CSS für unterschiedliche Media Queries zu bauen.
    Eine separater SASS/CSS-Datei erlaubt es, einfach zwischen verschiedenen Layouts zu wechseln, also z.B. Zen Grids, 960.gs, Gridset App oder was auch immer.
  • Es kommt Normalize CSS zum Einsatz.
  • Mit respond.js wird voller IE8 Support gewährleistet, man kann es aber auch ausschalten.
  • Separate IE Conditional Classes erlauben abweichendes Style für IE, ohne diesen Style in separaten Dateien pflegen zu müssen, was schwer zu überblicken ist.
  • Mit einer einzigen SASS-Variable kann volle IE7+6 Unterstützung eingebaut werden.
  • Der Code für PHP, CSS und SASS ist extrem gut dokumentiert.
  • Mittels eines Patches wird volle Drush-Unterstützung gewährleistet.
  • RTL-Languages (Rechts-zu-Links-Sprachen) werden voll unterstützt, ebenso wie gute Accessibility.

Download: https://www.drupal.org/project/Zen

Doku: https://www.drupal.org/node/193318

Beispiele : https://drupalthemesamples.com/zen/


Zircon

Beschreibung: Das einfache und sehr klare Zircon Theme basiert auf dem Nucleus Basis-Theme und ist voll responsive mit ebensolchen Slideshows.

  • gute Browser-Kompatibilität
  • unterstützt Drush.
  • geeignet für viele Einsatzzwecke, wie für Firmen-Webseites, Shops und Produktkataloge oder für Blogs.

Download: https://www.drupal.org/project/zircon

Doku: http://www.weebpal.com/guide/step-step-guide-install-drupal-8-theme

Beispiele: http://demo.weebpal.com/#zircon-drupal-8

http://www.weebpal.com/
https://drupalthemesamples.com/zircon/


ZURB Foundation

SASS/COMPASS: ja

Layout-Management: Display Suite

Beschreibung: ZURB Foundation basiert auf dem mächtigen Foundation Framework.

  • Foundation implementiert einige Plugins für einfachen Einbau von Slider, Dropdown-Menüs und responsive Lightbox-Gallerien.
  • Ältere Browser werden nicht mehr unterstützt.
  • Das Layout basiert auf einem 12-Grid-System.
  • Es gibt Buttons, Navigations-Elemente und JavaScript Plugins zur freien Verwendung.
  • Die Media-Queries basieren auf Basis relativer Breiten (em), statt festen Pixel-Angaben.
  • Die Typographie ist so gestaltet, dass saubere und einfacher Default-Styles für alle Basis-Typo-Elemente gewährleistet sind.
  • Gute Accessibility und Keyboard-Navigation werden geboten.
  • Flex-Video, Reveal Modal, Modal Dialoge und Pop-Up-Windows.
  • Display Suite ist integriert und gut dokumentiert.

Download: https://www.drupal.org/project/zurb_foundation

Doku: http://foundation.zurb.com/docs/

Beispiele: http://www.delaware.coop/
http://zurb.com/responsive
https://drupalthemesamples.com/zurb-foundation/
 

Die Liste hat keinerlei Anspruch auf Vollständigkeit.
Was sind Eure Favoriten?