Dieter Petereit 5. Januar 2018

Propeller: Bootstrap im Material Design

Bootstrap ist nicht umsonst so populär. Aber, wenn du denkst, es gibt nichts besseres, schau dir mal Propeller an.

Bootstrap und Material Design sind keine Einheit

Bootstrap gibt es seit 2011. Entstanden im Hause Twitter trat es an, dem Ansatz des Mobile First im Webdesign flächendeckend voranzubringen. Und, es lässt sich nicht leugnen, das ist gelungen, und wie. Bootstrap legte geradezu einen Raketenstart hin, wurde schnell und umfassend adaptiert und darf heutzutage immer noch als das Standard-Framework für responsives Webdesign gelten. Selbst in den meisten responsiven WordPress-Themes steckt Bootstrap.

Natürlich kommt Bootstrap mit eigenen Vorstellungen dazu, wie eine Website auszusehen hat. Dabei ist es allerdings nicht so aufdringlich, dass du nicht etwa jeden einzelnen dieser Vorschläge unproblematisch durch deinen eigenen ersetzen könntest.

Propeller: Landing Page. (Screenshot: Dr. Web)

Wenn du aber schon weißt, dass deine Website auf der Design-Sprache Googles, dem Material Design basieren soll, kannst du dir die Arbeit erheblich vereinfachen. Denn das Digicorp-Team ist hergegangen und hat Bootstrap mit Material Design vereint.

Propeller schafft diese Einheit

Unter dem Namen Propeller erhältst du ein komplett in Material Design gehaltenes Bootstrap, das du nur noch verwenden musst. Propeller gehörte in 2017 zu den beliebtesten Frontend-Frameworks überhaupt. Es steht unter der liberalen MIT-Lizenz auf seiner eigenen Website, aber ebenso auf Github zum kostenlosen Download bereit.

Propeller stellt keine großen Ansprüche, sondern ist ebenso zufrieden, wenn es nicht vollumfänglich, sondern bloß in Form einzelner Komponenten genutzt wird. Deshalb stehen die individuellen Komponenten auch einzeln zum Download bereit. Soll es ganz schnell gehen, könnten dich die vorgefertigten Propeller-Themes interessieren, die allerdings zum größten Teil kostenpflichtig sind.

Schlüsselfertiges Theme auf Propeller-Basis. (Screenshot: Digicorp)

Hast du bereits eine auf Bootstrap basierende Website, bietet dir Propeller den separaten Download der für das Theming erforderlichen Dateien an. Dabei musst du dann allerdings auf die Datei- und Ordnerstruktur achten. Eine ausführliche Dokumentation hilft dir dabei. Am Ende hast du das identische Ergebnis als wenn du direkt Propeller verwendet hättest.

Propeller liefert 25 eigene Komponenten mit, die ausführlich vorgestellt werden, auch und vor allem im Vergleich mit der Standard-Bootstrap-Komponente. Weitere fünf Komponenten werden durch Drittanbieter zugeliefert.

Derzeit basiert Propeller noch auf Bootstrap 3. Der Umstieg ist allerdings auf der Roadmap. Ich habe es zwar noch in keinem Projekt verwendet, dennoch ist Propeller Teil meines Werkzeugkastens. Schau es dir jedenfalls mal an.

Dieter Petereit

Dieter Petereit

ist seit 1994 im Netz unterwegs, aber bereits seit über 30 Jahren in der IT daheim. Seit Anfang des neuen Jahrtausends schreibt er für diverse Medien, hauptsächlich zu den Themenfeldern Technik und Design. Man findet ihn auch auf Twitter und Google+.
Dr. Webs exklusiver Newsletter
Hinweise zum Datenschutz, also dem Einsatz von Double-Opt-In, der Protokollierung der Anmeldung, der Erfolgsmessung, dem Einsatz von MailChimp als Versanddienstleister und deinen Widerrufsrechten findest du in unseren Datenschutzhinweisen.

2 Kommentare

  1. Vielen Dank für die Info. Bisher habe ich ausschließlich Erfahrung mit materializecss gemacht, was gerade bei wordpress themes viel weniger verbreitet ist. Die bootstrap Variante ist für mich definitv einen Versuch wert.

  2. Wohl eher uninteressant wenn nicht demnächst ein update kommt. Läuft noch mit bootstrap 3.3.6.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Kennst du schon unseren Newsletter?

Hinweise zum Datenschutz, also dem Einsatz von Double-Opt-In, der Protokollierung der Anmeldung, der Erfolgsmessung, dem Einsatz von MailChimp als Versanddienstleister und deinen Widerrufsrechten findest du in unseren Datenschutzhinweisen.

Cookies

Weitere Informationen zu den Auswahlmöglichkeiten findest du hier. Dazu musst du zunächst keine Auswahl treffen!

Um Dr. Web zu besuchen, musst du eine Auswahl treffen.

Deine Auswahl wurde gespeichert!

Informationen zu den Auswahlmöglichkeiten

Was du erlaubst!

Um fortfahren zu können, musst du eine Auswahl treffen. Nachfolgend erhältst du eine Erläuterung der verschiedenen Optionen und ihrer Bedeutung.

  • Ich stimme zu:
    Du erlaubst uns das Setzen aller Cookies, die wir in unseren Datenschutzhinweisen genannt haben. Dazu gehören Tracking- und Statistik-Cookies. Aus dem Tracking per Google Analytics bieten wir auf der Seite Datenschutz ein Opt-Out, also die Möglichkeit der Abmeldung, an.
  • Ich stimme nicht zu:
    Wir verzichten bei dieser Option auf den Einsatz von Google Analytics. Die für den Betrieb von Dr. Web notwendigen Cookies werden aber dennoch gesetzt. Einzelheiten entnimmst du bitte den Datenschutzhinweisen

Du kannst deine Cookie-Einstellungen jederzeit hier ändern: Datenschutz. Impressum

Zurück