Google Material Design

Google Material Design als kostenloses Bootstrap Theme

Google hat im Sommer 2014 seine neuen und aktuellen Design-Guidelines mit dem Namen “Material Design” vorgestellt. Dabei handelt es sich um ein Design, welches echtem Papier ähnelt. Mit Schatten und und Farben wird so umgegangen, dass alles danach aussieht, als würde Papier übereinanderliegen. Federico Zivolo, ein italienischer Web-Designer hat sich die Arbeit gemacht und die Design-Guidelines in ein kostenloses Bootstrap-Theme umgesetzt. Wir zeigen heute, wie man dieses Template einbinden und verwenden kann und wie es sich auf Deskop und mobilen Endgeräten verhält.

Inhaltsverzeichnis

Quick-Start

Da unsere Artikel hier auf Bootstrapaholic oft sehr lang sind, haben wir uns dazu entschieden ab sofort bei Erklär-Artikeln den “Quick-Start” einzuführen. Keine Lust alles zu lesen? Kein Problem, dann geht es hier direkt los.

Derzeit besteht die Möglichkeit das Bootstrap Material Design Theme über Bower und Meteor zu installieren oder die entsprechenden Dateien einfach aus dem GitHub Respository herunterzuladen und in das Projekt einzubinden.

Installation via Bower

bower install bootstrap-material-design

Bower ist übrigens ein so genanntes Paket-Verwaltungstool. Damit kann man per Kommandozeile einzelne Programmbibliotheken, wie in diesem Fall das Bootstrap Theme, installieren.

Installation via Meteor

meteor add fezvrasta:bootstrap-material-design

Meteor ist eine sehr ähnliche Software wie Bower. Wir werden in einem weiteren Artikel demnächst versuchen die beiden Dienste zu zeigen und zu erklären, wie man sie nutzt.

Dateien herunterladen und in das Projekt einbinden

Genauso gut, kann man allerdings die Dateien einfach aus dem GitHub Respository herunterladen und in das Projekt einbinden. Neben den Standard-Dateien, die bei jedem Bootstrap Projekt benötigt werden, müssen hier folgende Dateien aus dem “dist”-Ordner der Dateisammlung eingebunden werden:

Im Head-Bereich:

  • css/roboto.min.css (Google Font)
  • css/material-fullpalette.min.css
  • css/ripples.min.css

Im Footer-Bereich, nach bootstrap.min.js und jQuery:

  • js/ripples.min.js
  • js/material.min.js

Außerdem ist es notwendig, nach dem Einbinden der JavaScript-Dateien das Material-JavaScript einmalig beim Seitenaufruf zu initialisieren. Das funktioniert wie folgt:

$(function(){
     $.material.init();
});

Und schon kann es losgehen! Wenn Du jetzt doch noch weiter ins Detail gehen möchtest und mehr erfahren willst, dann kannst Du jetzt einfach weiterlesen.

Google Material Design – Was ist das?

Responsive Design

Abbildung 1: Google Material auf verschiedenen Endgeräten – Quelle: Phandroid.com

Im Sommer 2014 stellte Google auf seiner Entwicklerkonferenz in San Francisco erstmalig das Material Design vor. Es ist nicht einfach nur ein Design, sondern wird gerne auch als Googles Designsprache bezeichnet. Googles Ziel ist es, dieses Design auf all ihren Produkten anzuwenden. Dazu gehören beispielsweise:

  • Google Chrome
  • Android
  • Google Suche
  • Google Maps
  • Google Mail
  • Smartwatches
  • und viele weitere Produkte…

Das besondere an diesem Design ist, dass es eine Art Flat-Design ist, die Elemente jedoch nicht nur eine X- und Y-Koordinate haben, sondern auch eine Z-Koordinate, die die Tiefe der einzelnen Elemente bestimmt. Somit ist das Flat-Design ein Design mit 3D Effekt. Durch den Tiefeneffekt wirken die einzelnen Elemente wie Papierblätter, die übereinander gelegt werden.

Im folgenden Video stellt Google Material Design vor. Dabei werden die oben beschriebenen Design-Effekte besonders gut dargestellt:

Google hat auf dieser Webseite die Guidelines zur Verwendung des Material Designs veröffentlicht. Dort wird genauesten erklärt, welche Elemente es gibt und wie sie verwendet werden sollten. Hier geht es nicht um HTML oder CSS, sondern wirklich um das Design und dem Einsatzbereich. Die Guidelines stehen auch im PDF-Format zur Verfügung.

Warum solle man Material Design verwenden?

Grundsätzlich möchten wir nicht empfehlen, dieses von Google entwickelte Design zu verwenden, wenn es Dir nicht gefällt. Allerdings kann man sich gerade von den Google Projekten, design-technisch, sehr viel abschauen. Sie besitzen meistens eine perfekte User-Experience, denn kaum eine andere Firma hat so massiv viele Nutzerdaten, die ausgewertet werden und in nächste Versionen einfließen können.

Bedeutet also im Umkehrschluss, auch wenn einem das Design nicht gefällt, sollte man sich einzelne Elemente, Farben und Strukturen genau ansehen. Bei Google hat alles seinen Grund!

Farbpalette

Material Farben

Abbildung 2: 16 von 20 Farben der Material Farbpalette

Insgesamt stellt Google in seiner Designsprache 280 Farben zur Verfügung. Wobei die gesamte Farbpalette aus 20 Hauptfarben besteht, die in jeweils 14 Farbtönen abgestuft worden sind. Die jeweilige Hauptfarbe ist eine sehr klarer, aber trotzdem angenehmer Farbton. 16 der 20 Farben sind in Abbildung 2 zu sehen. Alle Farben können in den Design Guidelines angesehen werden.

Die Farben sind jeweils in einer Stärkenskala von 50 – 900 bzw. 100 – 700 unterteilt, wobei die Stärke 500 jeweils die, der Hauptfarbe ist. Hier eine Auflistung aller 20 Hauptfarben als Tabelle:

Name der Farbe Hexadezimal Farbcode
Red #F44336
Pink #E91E63
Purple #9C27B0
Deep Purple #673AB7
Indigo #3F51B5
Blue #2196F3
Light Blue #03A9F4
Cyan #00BCD4
Teal #009688
Green #4CAF50
Light Green #8BC34A
Lime #CDDC39
Yellow #FFEB3B
Amber #FFC107
Orange #FF9800
Deep Orange #FF5722
Brown #795548
Grey #9E9E9E
Blue Grey #607D8B
Black #000000

Typografie

Roboto

Abbildung 3: “Roboto” ist die Standard-Schriftart in Material Design

Seit der Android Version “Ice Cream Sandwich”, ist Roboto die Standardschriftart, auf Googles Betriebssystem für Smartphones. Es ist eine serifenlose und sehr klare Schriftart. Wer sie auf seiner Webseite ohne Material Design einsetzen möchte, der kann dies über die Google Fonts tun und die entsprechende CSS-Datei in seinen Header übernehmen. Weitere und detailliertere Informationen zur Schriftart “Roboto”, findet man auch auf Wikipedia.

Google Material Design ist also eine gut durchdachte Designsprache, die man sich, auch wenn sie einem nicht zusagt, dringend ansehen sollte. Der Aufbau der Elemente ist das Ergebnis aus unzähligen User-Statistiken von Google.

Material Design für Bootstrap

Wie bereits erwähnt hat sich der italienische Web-Entwickler Frederico Zivolo die Arbeit gemacht und das Material Design in ein Bootstrap-Theme geschrieben. Dafür hat er nicht nur eine ausführliche CSS-Datei erstellt, sondern sehr viele JavaScript Funktionen entwickelt, damit das Look & Feel von Material Design perfekt für Bootstrap verwendbar ist. Im folgenden Abschnitt, werden wir deshalb einige Elemente vorstellen, zeigen, wie man sie benutzt und wie sie im Browser aussehen.

Wer hat’s erfunden? – Frederico Zivolo!

Frederico Zivolo, auch bekannt als “Fez Vrasta”, lebt in Italien und ist professioneller Web-Designer und Entwickler. Er hat bereits einige sehr coole JavaScript Funktionen entwickelt, die auch in seinem Bootstrap Theme verwendet werden. Wer mehr über ihn erfahren möchte, der sollte auf seiner Webseite vorbeischauen oder in einfach mal auf Twitter folgen. Übrigens ist auch seine persönliche Webseite mit dem hier genannten Bootstrap Theme gemacht – es lohnt sich!

Wenn Du die Installation noch nicht durchgeführt hast, dann geh einfach nochmal zum Abschnitt “Quick-Start“.

Farben

Alle Material Design Farben sind bereits in der CSS-Datei vorbereitet und können über eine sinnvolle CSS-Klassen-Struktur angesprochen werden. Um beispielsweise einen einfachen Button in einer bestimmten Farbe zu erzeugen, muss folgende Klasse vergeben werden:

<button class="btn btn-material-red-50">Klick mich!</button>

Der Button hätte dann die Farbe “Red” mit der Stärke 50. Somit können alle Bootstrap Elemente, die über eine extra Klasse eine Farbzuweisung erhalten, mit den Material Farben versorgt werden.

Buttons

Buttons

Abbildung 4: Buttons im Material Style

Die normalen Bootstrap Buttons können wie gewohnt über die üblichen CSS Klassen eingebunden werden. Zusätzlich zu den normalen Buttons, gibt es eine Flat- und eine Raised-Version. Die Flat-Buttons haben quasi keinen Border, während die Raised-Buttons mit einem Schatten versehen sind, der sich vom Hintergrund stärker abhebt.

.btn-flat
.btn-raised

Formularfelder

Fomularfelder

Abbildung 5: Formularfeld im Material Design

Ein Highlight in diesem Bootstrap Theme sind unserer Meinung nach die Formularfelder. Wird der Focus auf das jeweilige Formularfeld gesetzt, erscheint eine Animation, die dann zu einer farbigen Linie unterhalb des schreibbaren Bereichs wird. Das Label kann entweder fest gesetzt werden, wie im ersten Input-Feld in Abbildung 5 zu sehen, oder ebenfalls animiert sein.

In der animierten Version ist das Label zunächst ein Placeholder. Wird der Focus dann gesetzt, wird es mit einer Animation zum Label. Wirklich sehr schön gelöst!

Das normale Formularfeld kann ohne extra CSS-Klassen folgendermaßen eingebunden werden:

<input type="text" class="form-control">

Das animierte Formularfeld funktioniert so:

<div class="form-control-wrapper">
     <input type="text" class="form-control empty">
     <div class="floating-label">Hier das Label</div>
     <span class="material-input"></span>
</div>

Folgende Feldarten stehen zur Verfügung:

  • Inputs
  • Textareas
  • Radio-Buttons
  • Checkboxen

Checkboxen

Checkboxen

Abbildung 6: Checkbox im Material Design

Screencast / Screenshot

<div class="checkbox">
     <label>
          <input type="checkbox"> Notifications
     </label>
</div>

Radio-Buttons

Radio Buttons

Abbildung 7: Radio Buttons im Google Style

<div class="radio radio-success">
     <label>
          <input type="radio" name="sample1" value="option1">
          Only when plugged in
     </label>
</div>

 JavaScript Plugins

Frederico hat in seinem Bootstrap Theme nicht nur das Design übernommen, sondern arbeitet auch ständig daran, weitere Elemente, die vor allem aus dem Betriebssystem Android bekannt sind, zu integrieren. So sind beispielsweise derzeit die Elemente “Snackbar” und “Toast” zum Einbinden bereit. Diese können als eine Art Push-Benachrichtung oder auch Erfolgsmeldung genutzt werden. Für die beiden Elemente gibt übrigens auch ein eigenes Repository auf GitHub.

Snackbar und Toast

Abbildung 8: Die Elemente Snackbar und Toast

Wie in Abbildung 8 zu sehen, handelt es sich bei der linken Notification mit den abgerundeten Ecken um den so genannten “Toast”. Unterhalb davon ist eine “Snackbar” zu sehen.

Die beiden Elemente können entweder bereits vorgefertigt im HTML-DOM bereitgestellt werden und dann per JavaScript angezeigt werden oder auch komplett per JavaScript generiert werden.

<span data-toggle=snackbar data-content="This is my awesome snackbar!">Click me</span>

$("#snackbarid").snackbar("show");
$("#snackbarid").snackbar("hide");
$("#snackbarid").snackbar("toggle");
var options =  {
    content: "Some text", // text of the snackbar
    style: "toast", // add a custom class to your snackbar
    timeout: 100 // time in milliseconds after the snackbar autohides, 0 is disabled
}

$.snackbar(options);

Viel Spaß mit diesem tollen Bootstrap Theme und ein großes Dankeschön an Frederico für seine Arbeit. Sollten euch Informationen fehlen oder ihr habt einfach nur Fragen, schreibt doch bitte einen Kommentar. Wir kümmern uns darum.

Du möchtest regelmäßig mit interessanten Neuigkeiten zum Thema "Twitter Bootstrap" versorgt werden? Trag Dich in den Bootstrapaholic Newsletter ein. Wir versenden keinen Spam! Du kannst Dich jederzeit austragen.

Dieser Beitrag wurde unter Bootstrap Themes abgelegt am von .

Ein Gedanke zu „Google Material Design als kostenloses Bootstrap Theme

  1. Pingback: Meteor JS: Was ist das und wie kann ich es nutzen? | Bootstrapaholic

Hinterlasse eine Antwort

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

Du kannst folgende HTML-Tags benutzen: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>