Zum Inhalt wechseln
dr. web Logo mit Maus und Hand, die sich den Finger blutig geklickt hat.
  • Beste Agentur finden
    • 3D Animationsagentur
    • Designagentur
    • Digitalagentur
    • Drupal Agentur
    • Internetagentur
    • Joomla Agentur
    • Marketing Agentur
    • Online Marketing Agentur
    • PR Agentur
    • SEO Agentur
    • Shopware Agentur
    • Social Media Agentur
    • TYPO3 Agentur
    • Webagentur
    • Webdesign Agentur
    • Werbeagentur
    • WordPress Agentur
  • Magazin
    • Bloggen
    • Buchhaltung
    • Büro
    • Content Marketing
    • E-Commerce
    • Finanzen
    • Freelancer
    • Green Revoluzzer
    • Hardware
    • Künstliche Intelligenz (KI)
    • Marketing
    • Marktübersichten
    • Online-Marketing
    • Schrift & Grafik
    • Selbstständigkeit
    • Social Media
    • SEO
    • Software
    • UX Design
    • Webdesign
    • WordPress
  • Newsletter
  • Kontakt
Menü
  • Beste Agentur finden
    • 3D Animationsagentur
    • Designagentur
    • Digitalagentur
    • Drupal Agentur
    • Internetagentur
    • Joomla Agentur
    • Marketing Agentur
    • Online Marketing Agentur
    • PR Agentur
    • SEO Agentur
    • Shopware Agentur
    • Social Media Agentur
    • TYPO3 Agentur
    • Webagentur
    • Webdesign Agentur
    • Werbeagentur
    • WordPress Agentur
  • Magazin
    • Bloggen
    • Buchhaltung
    • Büro
    • Content Marketing
    • E-Commerce
    • Finanzen
    • Freelancer
    • Green Revoluzzer
    • Hardware
    • Künstliche Intelligenz (KI)
    • Marketing
    • Marktübersichten
    • Online-Marketing
    • Schrift & Grafik
    • Selbstständigkeit
    • Social Media
    • SEO
    • Software
    • UX Design
    • Webdesign
    • WordPress
  • Newsletter
  • Kontakt

< dr. web > » Webdesign » Propeller: Bootstrap im Material Design

Propeller: Bootstrap im Material Design

  • Aktualisiert am 5. Juni 2023
  • Dieter Petereit von Dieter Petereit
  • Webdesign
  • 2 Kommentare

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

Minimal WordPress-Themes 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 Propeller: Bootstrap im Material Design
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.

Es kam zu einen Fehler. Wahrscheinlich ist das unsere Schuld. Schreiben Sie uns gerne an hallo@drweb.de
✓ Sie haben sich erfolgreich zum Dr. Web Newsletter angemeldet

Dr. Web Newsletter

Tipps, Tricks, Tools und Ratgeber. Einmal im Monat frisch gedruckt in deinem Mail-Postfach.

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.

big wave one page sections scroll theme Propeller: Bootstrap im Material Design
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

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 Technik-affine Medien wie T3N und Dr. Web. Dieter war acht Jahre lang Chefredakteur des Dr. Web Magazins.

Inhaltsverzeichnis

Agenturpartner in Hannover

Edit Content

Heise RegioConcept

Wir kümmern uns um Ihre Homepage, Ihre Werbung bei Google und Bing, die Optimierung der Findbarkeit Ihrer Firmen-Homepage in Suchmaschinen, Ihre Unternehmens-App, Ihre Social-Media-Aktivitäten, Ihre Präsenz in regionalen Print- und Online-Verzeichnismedien sowie Ihre Bannerwerbung.

Mit innovativen Ideen und kreativen Marketingansätzen positionieren wir Sie und Ihre Produkte bei Ihnen vor Ort. Wir wissen um die unterschiedlichen Bedürfnisse unserer Kunden. Deshalb entwickeln wir speziell für Sie ein individuelles Konzept, auf dessen Basis wir Ihre Produkte, Marken und Dienstleistungen erfolgreich am Markt in Szene setzen.

— Karsten Marquardsen,
Geschäftsführer
Alle Webdesign-Agenturen →

Lust auf mehr?

14 Best Practices, die Sie für einen erfolgreichen Internetseite Relaunch beachten sollten

Was bewegt einen Unternehmer dazu, seine Internetseite von Grund auf neu auszurichten? Nun, die Gründe für einen Internetseite Relaunch einer können sehr vielfältig sein. Oft spielt ein veraltetes Design eine Rolle. Dieser Grund ist nicht so trivial, wie er vielleicht erscheint. Denn ein unmodernes Aussehen der Webseite kann Besucher und damit potenzielle neue Kunden abstoßen.

KI GPT-4: werden Webdesigner und sonstige Erdlinge ihren HAL-Moment erleben?

Wo ist dieser verdammte Aus-Schalter?” Dies waren die letzten Worte von David Bowman, dem Anführer einer Widerstandsgruppe Webdesigner, denen es gelang zum vermeintlichen WDN-Zentralcomputer vorzudringen, bevor sie von Wächterdroiden eliminiert wurden.

Microsoft Designer to the people: KI Power Webdesign und Grafikdesign?

Ein Webdesign selbst erstellen? Ist bei mir schon ewig her. 2006 muss das gewesen sein. Ich durfte für eine Rechtsanwaltskanzlei ran. Typische Erstaufträge. Freundes- und Bekanntenkreis abgrasen eben. Der damalige Freund einer Freundin arbeitete dort und brachte mich ins Spiel.

2 Antworten

  1. Patrick sagt:
    5. Januar 2018 um 15:55 Uhr

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

    Antworten
  2. Jenni sagt:
    8. August 2018 um 8:26 Uhr

    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.

    Antworten

Schreibe einen Kommentar Antworten abbrechen

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

Fachmagazin für Online-Marketing. Seit 1997. Wissen, Software, Dienstleister: Wir bringen die Digitalisierung Ihres Unternehmens praxisnah voran. ✅

Für Unternehmer: Finden Sie Ihre Agentur in…

  • Alle Städte und Leistungen
  • Alle Städte
  • Augsburg
  • Basel
  • Bayreuth
  • Bergisch-Gladbach
  • Berlin
  • Bern
  • Bielefeld
  • Bonn
  • Bremen
  • Chemnitz
  • Darmstadt
  • Dortmund
  • Dresden
  • Duisburg
  • Düsseldorf
  • Essen
  • Esslingen
  • Flensburg
  • Frankfurt
  • Freiburg
  • Gelsenkirchen
  • Hamburg
  • Hannover
  • Heidelberg
  • Innsbruck
  • Karlsruhe
  • Kassel
  • Köln
  • Leipzig
  • Leverkusen
  • Mainz
  • Mannheim
  • München
  • Münster
  • Nürnberg
  • Offenburg
  • Osnabrück
  • Passau
  • Potsdam
  • Regensburg
  • Reutlingen
  • Rosenheim
  • Rostock
  • Salzburg
  • Stuttgart
  • Wien
  • Wiesbaden
  • Wuppertal
  • Zürich
  • Alle Städte und Leistungen
  • Alle Städte
  • Augsburg
  • Basel
  • Bayreuth
  • Bergisch-Gladbach
  • Berlin
  • Bern
  • Bielefeld
  • Bonn
  • Bremen
  • Chemnitz
  • Darmstadt
  • Dortmund
  • Dresden
  • Duisburg
  • Düsseldorf
  • Essen
  • Esslingen
  • Flensburg
  • Frankfurt
  • Freiburg
  • Gelsenkirchen
  • Hamburg
  • Hannover
  • Heidelberg
  • Innsbruck
  • Karlsruhe
  • Kassel
  • Köln
  • Leipzig
  • Leverkusen
  • Mainz
  • Mannheim
  • München
  • Münster
  • Nürnberg
  • Offenburg
  • Osnabrück
  • Passau
  • Potsdam
  • Regensburg
  • Reutlingen
  • Rosenheim
  • Rostock
  • Salzburg
  • Stuttgart
  • Wien
  • Wiesbaden
  • Wuppertal
  • Zürich

Agentur nach Schwerpunkt finden

  • Beste Agentur finden
  • Designagentur finden
  • Digitalagentur finden
  • Drupal-Agentur finden
  • Online Marketing Agentur finden
  • SEO Agentur finden
  • Webdesign-Agentur finden
  • Werbeagentur finden
  • WordPress Agentur finden
  • Beste Agentur finden
  • Designagentur finden
  • Digitalagentur finden
  • Drupal-Agentur finden
  • Online Marketing Agentur finden
  • SEO Agentur finden
  • Webdesign-Agentur finden
  • Werbeagentur finden
  • WordPress Agentur finden

Aus unserem Magazin

  • Buchhaltung
  • Content Marketing
  • Design
  • Digitalisierung
  • E-Business
  • E-Commerce
  • E-Mail-Marketing
  • Finanzen
  • Freelancer
  • Hosting
  • HTML/CSS
  • Inspiration
  • IT Sicherheit
  • Jobs & Karriere
  • Online-Marketing
  • Programmierung
  • Public Relations
  • Rechtliches
  • Responsive Design
  • SEA – Suchmaschinenwerbung
  • SEO
  • Showcases
  • Social Media
  • Tipps, Tricks & Tutorials
  • Tools
  • UX Design
  • Webdesign
  • WordPress
  • Buchhaltung
  • Content Marketing
  • Design
  • Digitalisierung
  • E-Business
  • E-Commerce
  • E-Mail-Marketing
  • Finanzen
  • Freelancer
  • Hosting
  • HTML/CSS
  • Inspiration
  • IT Sicherheit
  • Jobs & Karriere
  • Online-Marketing
  • Programmierung
  • Public Relations
  • Rechtliches
  • Responsive Design
  • SEA – Suchmaschinenwerbung
  • SEO
  • Showcases
  • Social Media
  • Tipps, Tricks & Tutorials
  • Tools
  • UX Design
  • Webdesign
  • WordPress
  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Kunden-Login
  • Impressum
  • Kontakt
  • Privatsphäre-Einstellungen ändern
  • Historie der Privatsphäre-Einstellungen
  • Einwilligungen widerrufen
  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Kunden-Login
  • Impressum
  • Kontakt
  • Privatsphäre-Einstellungen ändern
  • Historie der Privatsphäre-Einstellungen
  • Einwilligungen widerrufen