Dr. Web Logo. Untertext: Seit 1997.
  • Beste Agenturen
  • Agentur-Standorte von A bis Z 🌇
  • Magazin
  • Newsletter 📩
  • Login
  • Agentur bewerben ✅
  • Kontakt
  • Werben 🎉
  • Sponsored Post
  • Jobs
Menü
  • Beste Agenturen
  • Agentur-Standorte von A bis Z 🌇
  • Magazin
  • Newsletter 📩
  • Login
  • Agentur bewerben ✅
  • Kontakt
  • Werben 🎉
  • Sponsored Post
  • Jobs
  • Werben
  • Gastbeitrag
  • Sponsored Post
  • Kontakt
  • Login
  • Newsletter
Suche
  • Beste Agenturen
  • Agentur-Standorte
      Beste Agenturen Augsburg Altstadt von oben.

      Augsburg

      Blick auf die Mittlere Brücke in Basel bei Sonnenaufgang.

      Basel

      Berlin bei Nacht, Blick von oben Richtung Fernsehturm.

      Berlin

      Das Ruhrstadion in Bochum von oben, bei Sonnenuntergang.

      Bochum

      Bonn von oben, mit Blick auf den Rhein.

      Bonn

      Dortmund von oben Panoramafoto.

      Dortmund

      Blick auf die Elbufer-Promenade Dresdens sowie Frauenkirche und Zwinger.

      Dresden

      Duisburg Innenhafen bei Sonnenuntergang.

      Duisburg

      Düsseldorf von oben mit Blick auf den Fernsehturm.

      Düsseldorf

      Die Skyline von Essen von oben.

      Essen

      Blick von oben auf das Bankenviertel in Frankfurt am Main.

      Frankfurt am Main

      Freiburg Innenstadt vom Münster aus fotografiert mit Blick Richtung Schlossberg und Sonnenuntergang..

      Freiburg im Breisgau

      Hamburg bei Nacht, Blick auf die Speicherstadt.

      Hamburg

      Blick auf das Neue Rathaus, Hannover.

      Hannover

      Agenturen in Innsbruck von oben mit Blick auf die Alpen.

      Innsbruck

      Karlsruhe von oben

      Karlsruhe

      Sonnenuntergang in Köln mit Blick auf den Dom. Im Vordergrund die Hohenzollernbrücke.

      Köln

      Leipzig Innenstadt bei Sonnenuntergang und von oben.

      Leipzig

      München bei Fön mit Blick in die bayerischen Alpen.

      München

      Nürnberg Altstadt Stadtmauer von oben

      Nürnberg

      Blick auf das Flussufer der Innenstadt von Regensburg bei Nacht.

      Regensburg

      Agenturen Salzburg: Blick auf die Altstadt und die Hohensalzburg.

      Salzburg

      Stuttgart von oben.

      Stuttgart

      Wien von oben. Blick auf den Stephansdom.

      Wien

      Zürich von oben.

      Zürich

  • Magazin
    • Content Marketing
    • CSS
    • E-Commerce
    • E-Mail-Marketing
    • Freelancer
    • Fotografie
    • HTML
    • Online-Marketing
    • Responsive Design
    • SEO
    • UX Design
    • Webdesign
    • Website erstellen
    • WordPress
    • Dr. Web Autoren
  • Jobs
Menü
  • Magazin
    • Content Marketing
    • CSS
    • E-Commerce
    • E-Mail-Marketing
    • Freelancer
    • Fotografie
    • HTML
    • Online-Marketing
    • Responsive Design
    • SEO
    • UX Design
    • Webdesign
    • Website erstellen
    • WordPress
    • Dr. Web Autoren
  • Jobs
Agentur eintragen →
Dr. Web Logo. Untertext: Seit 1997.
  • Beste Agenturen
  • Agentur-Standorte
      Beste Agenturen Augsburg Altstadt von oben.

      Augsburg

      Blick auf die Mittlere Brücke in Basel bei Sonnenaufgang.

      Basel

      Berlin bei Nacht, Blick von oben Richtung Fernsehturm.

      Berlin

      Das Ruhrstadion in Bochum von oben, bei Sonnenuntergang.

      Bochum

      Bonn von oben, mit Blick auf den Rhein.

      Bonn

      Dortmund von oben Panoramafoto.

      Dortmund

      Blick auf die Elbufer-Promenade Dresdens sowie Frauenkirche und Zwinger.

      Dresden

      Duisburg Innenhafen bei Sonnenuntergang.

      Duisburg

      Düsseldorf von oben mit Blick auf den Fernsehturm.

      Düsseldorf

      Die Skyline von Essen von oben.

      Essen

      Blick von oben auf das Bankenviertel in Frankfurt am Main.

      Frankfurt am Main

      Freiburg Innenstadt vom Münster aus fotografiert mit Blick Richtung Schlossberg und Sonnenuntergang..

      Freiburg im Breisgau

      Hamburg bei Nacht, Blick auf die Speicherstadt.

      Hamburg

      Blick auf das Neue Rathaus, Hannover.

      Hannover

      Agenturen in Innsbruck von oben mit Blick auf die Alpen.

      Innsbruck

      Karlsruhe von oben

      Karlsruhe

      Sonnenuntergang in Köln mit Blick auf den Dom. Im Vordergrund die Hohenzollernbrücke.

      Köln

      Leipzig Innenstadt bei Sonnenuntergang und von oben.

      Leipzig

      München bei Fön mit Blick in die bayerischen Alpen.

      München

      Nürnberg Altstadt Stadtmauer von oben

      Nürnberg

      Blick auf das Flussufer der Innenstadt von Regensburg bei Nacht.

      Regensburg

      Agenturen Salzburg: Blick auf die Altstadt und die Hohensalzburg.

      Salzburg

      Stuttgart von oben.

      Stuttgart

      Wien von oben. Blick auf den Stephansdom.

      Wien

      Zürich von oben.

      Zürich

Agentur eintragen →
Dr. Web » CSS » MUI: CSS-Framework für Websites in Material Design

MUI: CSS-Framework für Websites in Material Design

Sozial sein
Share on facebook
Share on twitter
Share on linkedin
Share on xing
Share on whatsapp
Share on email
  • Ein Kommentar
Lesedauer: 5 Minuten
  • von Denis Potschien
  • 9. Juni 2015
Bookmarke mich
Share on pocket

TYPO3 & Shopware Agentur - 3m5.

Trend Maker Marketing - Webdesign Agentur Regensburg

Niels Neumann Online Marketing

wolpersweb.de Webdesign & SEO

Chris Hortsch Webdesign

SEOlist.IO Frankfurt - SEO-Spezialist & SEO-Freelancer

Mitte letzten Jahres stellte Google sein neues Designkonzept „Material Design“ vor. Es löst das bisher eingesetzte „Flat Design“ ab und wird in allen Produkten des Unternehmens eingesetzt – von Googles Websites über Chrome bis zum Betriebssystem Android. Mit dem Framework MUI lässt sich das „Material Design“ per HTML, CSS und JavaScript auch auf Webprojekte anwenden. Dabei wird das Designkonzept von der Farbgebung und Typografie über das Aussehen von Menüs und Buttons bis zu animierten Übergängen sehr detailliert übertragen.

MUI CSS-Framework

Das Besondere an Googles „Material Design“

Im Gegensatz zum derzeit sehr beliebten „Flat Design“ wagt Google mit seinem „Material Design“ den Schritt Richtung Dreidimensionalität. Zwar ist das neue Design immer noch sehr flach, bekommt aber eine räumliche Tiefe. Diese zeichnet sich durch dezente Schlagschatten aus, die hinter den Flächen und Icons erscheinen. Je nach Abstand der einzelnen Objekte erscheinen die Schlagschatten mal mehr mal weniger ausgeprägt.

Das „Material Design“ wird von Google sehr ausführlich auf einer eigenen Website vorgestellt. Dort ist genau geregelt, wie es auszusehen hat und angewendet werden soll. Farben sind definiert, das Aussehen und die Schattierung von Icons sind vorgegeben und Animationen für Button-Klicks, Dropdown-Menüs und andere Übergänge sind festgelegt.

Gerade Entwickler von Apps für Androidgeräte sind angehalten, das neue „Material Design“ anzuwenden. Wer es in Webprojekten einsetzen möchte oder Hybrid-Apps für Android entwickelt und diese per HTML, CSS und JavaScript umsetzt, kann mit dem MUI-Framework Googles Designkonzept anwenden.

Was kann MUI?

MUI besteht aus einer Stylesheet- und einer JavaScript-Datei. Alle Designelemente sind in CSS umgesetzt und lassen sich per Klassen auf HTML-Elemente anwenden. Bestimmtes Verhalten von Buttons, Menüs und Formularen wird mit JavaScript abgebildet. Da MUI auf HTML5 und CSS3 setzt, ist es nur für moderne Browser geeignet. Der Internet Explorer kommt ab Version 10 mit MUI zurecht.

mui_formular

Formular im MUI-Stil

Googles Schrift „Roboto“ ist zwar fester Bestandteil des „Material Designs“, muss bei MUI jedoch separat eingebunden werden. Die Dokumentation empfiehlt hier die Einbindung der Schrift über Googles Webfont-Dienst. Auch Iconfonts sind nicht Bestandteil des MUI-Frameworks. Diese müssen ebenfalls zusätzlich eingebunden werden. MUI verweist hier vor allem auf den Iconfont „Awesome“.

mui_schrift

Schriftformatierungen

Innerhalb der Stylesheet-Datei des MUI-Frameworks sind für nahezu alle Darstellungsformen entsprechende Klassen hinterlegt. So lassen sich Überschriften, Texte, Listen, Tabellen, Bilder, Formulare, sowie Buttons und Dropdown-Menüs im „Material Design“ darstellen.

Mit MUI loslegen

Sind Stylesheet- und JavaScript-Datei eingebunden, kann es losgehen. Zunächst einmal muss man sich für ein festes oder fluides Layout entscheiden. Beim festen Layout wird die Seite je nach Viewport in drei festen Breiten dargestellt. Bei der kleinsten Darstellung ist die Seite 768 Pixel breit. Es folgen 962 Pixel und 1170 Pixel Breite. Beim fluiden Layout passt sich die Seite immer der Breite des Viewports an. In jedem Fall wird rechts und links ein Abstand von 15 Pixel dargestellt.

<div class="mui-container">
  …
</div>

Im Beispiel wird per „mui-container“ ein Layout mit festen Breiten angelegt. Per „mui-container-fluid“ stellt man auf das fluide Layout um. Für die Darstellung der Inhalte innerhalb des Layouts steht ein Rastersystem zur Verfügung, welches dem von Bootstrap gleicht. Innerhalb eines 12-Spalten-Rasters lassen sich Inhalte sehr flexibel anordnen.

<div class="mui-row">
  <div class="mui-col-md-8">…</div>
  <div class="mui-col-md-4">…</div>
</div>

Per „mui-row“ wird eine Zeile innerhalb des Rasters definiert. „mui-col-md-8“ definiert eine Spalte, die sich über acht Spalten des Rasters erstreckt, während „mui-col-md-4“ einen Bereich festlegt, der sich über vier Spalten erstreckt. Je nach Breite des Viewports werden die Spalten neben- oder untereinander angeordnet.

mui_raster

MUI-Rastersystem

Hat man das grundlegende Raster definiert, lassen sich die verschiedenen Inhalte im „Material Design“ gestalten. Überschriften sowie die „<strong>“- und „<em>“-Elemente werden immer in den Vorgaben für das „Material Design“ gestaltet, ohne dass Klassen übergeben werden müssen. Listen und Tabellen sind hingegen mit einer entsprechenden Klasse auszuzeichnen, da es hierbei unterschiedliche Darstellungsmöglichkeiten gibt.

Bei Tabellen lassen sich Zeilen entweder mit oder Rahmen darstellen.

<table class="mui-table mui-table-bordered">
  …
</table>

Während die Klasse „mui-table“ eine einfache Tabelle ohne Rahmen zeichnet, sorgt die ergänzende Klasse „mui-table-bordered“ für einen Rahmen um jede Zeile. Die Kopfzeile wird in beiden Fällen mit einer Linie von den restlichen Zeilen optisch getrennt.

mui_tabelle

Unterschiedliche Darstellung einer Tabelle: links ohne Rahmen für Körperzeilen, rechts mit Rahmen

Dropdown-Menüs und Buttons mit Effekten

Das „Material Design“ sieht vor, dass sich bei Buttons beim Klick oder Berühren eine Art Glanzeffekt von der Position der Berührung über die gesamte Fläche des Buttons ausbreitet. Auch diese Besonderheit wird vom MUI-Framework berücksichtigt. Bei den Buttons wird zudem unterschieden zwischen einfachen und primären Buttons, sowie solchen, die auf eine Gefahr aufmerksam machen sollen. Während einfache Buttons weiß und primäre Buttons blau sind, sind die „Gefahr-Buttons“ rot. Für deaktivierte Buttons gibt es farblich abgeschwächte Darstellungsformen.

mui_buttons-dropdowns

Buttons und Dropdown-Menüs im MUI-Stil

<button class="mui-btn mui-btn-primary">Klick mich!</button>

Im Beispiel wird ein primärer Button ausgezeichnet. Dropdown-Menüs sehen den Buttons sehr ähnlich. Ein Pfeil signalisiert jedoch, dass es sich hierbei um einen Button mit aufklappbarem Menü handelt.

<div class="mui-dropdown">
  <button class="mui-btn mui-btn-primary" data-toggle="dropdown">Dropdown<span class="mui-caret"></span></button>
  <ul class="mui-dropdown-menu">
    <li><a href="#">Startseite</a></li>
    <li><a href="#">Kontakt</a></li>
    …
  </ul>
</div>

Der Quelltext für ein Dropdown-Menü ist zweigeteilt. Innerhalb eines „<div>“-Containers ist ein Button-Element ausgezeichnet, über welches das Menü aufgeklappt wird. Die einzelnen Menüpunkte sind innerhalb einer „<ul>“-Liste platziert.

Farben per SASS verwenden

Zum „Material Design“ gehört eine sehr detaillierte Farbwelt bestehend aus 20 Primärfarben. Diese sind in unterschiedliche Schattierungen unterteilt. In der Dokumentation von MUI sind alle Farben und ihre Schattierungen samt Hexadezimalwerten aufgelistet. Wer mit SASS arbeitet, kann die Farben jedoch auch über die Funktion „mui-color()“ anwenden.

mui_farben

Die MUI-Farben Rot und Pink mit ihren Schattierungen

Hierzu wird der Farbname sowie der numerische Wert für die Schattierung angegeben.

background-color: mui-color("pink", 200);

Während der Wert 500 den Normalwert für die Farbe definiert, stellen Werte darunter die Farbe heller dar, indem der Weißanteil verstärkt wird. Bei Werten darüber wird der Schwarzanteil erhöht, so dass die Farbe dunkler wird.

Spezielles Framework für HTML-Mails

Eine Besonderheit an MUI ist ein zusätzliches für HTML-Mails optimiertes Framework. Wer schon einmal einen Newsletter gestaltet hat, weiß, wie nervenaufreibend die Gestaltung einer HTML-Mail sein kann. Da man nur sehr eingeschränkt moderne Technik verwendet kann, muss man auf Einiges – zum Beispiel CSS3-Eigenschaften – verzichten.

Das Mail-Framework ist in gängigen Anwendungen – sowohl Desktop- als auch Webanwendungen – getestet worden und läuft daher unter anderem in verschiedenen Outlook-Versionen, Gmail und Apple Mail.

Auf die bereits erwähnten Button-Effekte wird dabei ebenso verzichtet wie auf die Auszeichnung per „<button>“-Element. Stattdessen kommen viele „<div>“-Elemente zum Einsatz. Dafür kann man sich dann aber ziemlich sicher sein, dass es in vielen E-Mail-Programmen ordentlich aussieht.

Fazit

Das MUI-Framework macht einen sehr ordentlichen Eindruck. Es gibt eine ausführliche Dokumentation mit vielen aussagekräftigen Beispielen. Wer Googles „Material Design“ mag, wird mit MUI seine Freude haben. Das Framework ist kostenlos erhältlich und kann ohne Einschränkungen verwendet werden.

Was mir beim MUI-Framework jedoch fehlt, ist die Möglichkeit, die im „Material Design“ gängige Off-Canvas-Navigation nachzubilden. In Googles Designkonzept wird dies – wie eigentlich alles – ebenfalls sehr ausführlich beschrieben. Schön wäre es, wenn diese Möglichkeit ins MUI-Framework übernommen worden wäre. Aber vielleicht kommt das noch. Schließlich ist MUI erst in der Version 0.0.5 erschienen. Da scheint also noch Einiges zu passieren.

(dpe)

Wie hilfreich war dieser Beitrag?

Klicke auf die Sterne um zu bewerten!

Durchschnittliche Bewertung 0 / 5. Anzahl Bewertungen: 0

Denis Potschien

Denis Potschien

Denis Potschien ist seit 2005 freiberuflich als Kommunikationsdesigner tätig, seit Anfang 2010 im Kreativkonsulat in Iserlohn, einem Büro für Gestaltung und Kommunikation. Dort betreut er kleine und mittelständische Unternehmen ebenso wie kommunale Körperschaften und Organisationen aus Südwestfalen und dem Ruhrgebiet. Als Webdesigner und -entwickler gehören HTML5 und CSS3 zu seinen Kernthemen, weshalb er dazu 2013 ein Buch geschrieben hat. „Pure HTML5 und CSS3“ richtet sich an alle, die Vorkenntnisse haben, sich aber bisher mit HTML5 und CSS3 nicht oder nur am Rande beschäftigt haben.

Agenturpartner

SEO Galaxy

Udler

Khoa Nguyen – Online Marketing Beratung & SEA / Social Ads / SEO Freelancer

München

Chris Hortsch Webdesign

Berlin

Haurand Webdesign

Aachen

UnitedAds

Starnberg

Alle Agenturpartner

Jobs

Online Marketing Manager

München

Projektmanager/ Projektleiter in München

München

Teamleiter Online Marketing

München

SEO Junior für Suchmaschinen­optimierung

Salzburg

System Engineer – Managed Service

Karlsruhe

Zum richtigen Job

Newsletter

Tipps, Tricks, Ratgeber. Unser Newsletter: Jeden Dienstag frisch gedruckt in Deinem Mail-Postfach.

Lust auf mehr? Wir empfehlen folgende Artikel:

Webdesign-Agentur gründen: 10 Tipps, wie der Start gelingt

Eine Webdesign-Agentur zu gründen ist keine einfache Aufgabe, denn du musst eine ganze Reihe Fähigkeiten mitbringen, um erfolgreich im harten Markt bestehen zu können.

 →   

Webdesign Trends 2022: Das erwartet uns

Animation, Interaktion und Immersion: Das neue Jahr bringt zahlreiche Trends im Webdesign mit sich und entwickelt einzelne Bereiche weiter. Bereits jetzt ist klar – in Sachen Webdesign-Trends hat das Jahr 2022 einiges zu bieten.

 →   

Google Fonts sind nicht mehr datenschutzkonform. Was nun?

Mit dem Urteil des Landgerichts München vom 20.01.2022 ist nun auch die Verwendung von Google Fonts über die Fonts API nicht mehr datenschutzkonform. Zeit sich nach einer Lösung umzusehen, wie Du dennoch Google Fonts weiterhin einsetzen kannst.

 →   

Eine Antwort zu „MUI: CSS-Framework für Websites in Material Design“
— was ist Deine Meinung?

  1. Stefan sagt:
    9. Juni 2015 um 16:39 Uhr

    Sehr cool! Für das ein oder andere Projekt sicherlich eine gute Sache, wobei ich die direkte Bootstrap Integration fast noch besser finde: http://fezvrasta.github.io/bootstrap-material-design/bootstrap-elements.html

    VG!

    Antworten

Schreibe einen Kommentar Antworten abbrechen

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

Dr. Web Logo weiss.

Pionier für Digitale Transformation. Seit 1997. ✅  Wissen, Tipps, Ratgeber, Dienstleister: Wir bringen wir die digitale Transformation von Unternehmen praxisnah voran.

Share on facebook
Share on twitter
Share on linkedin
Share on xing
Share on whatsapp
Share on email

Wissen finden

  • Dr. Web Autoren
  • Amazon SEO
  • Content Marketing
  • CMS
  • CSS
  • Digitalisierung
  • E-Commerce
  • Freelancer
  • Jobs & Karriere
  • Online-Marketing
  • SEO
  • UX Design
  • Webdesign
  • Website erstellen
  • WordPress
  • WooCommerce
Menü
  • Dr. Web Autoren
  • Amazon SEO
  • Content Marketing
  • CMS
  • CSS
  • Digitalisierung
  • E-Commerce
  • Freelancer
  • Jobs & Karriere
  • Online-Marketing
  • SEO
  • UX Design
  • Webdesign
  • Website erstellen
  • WordPress
  • WooCommerce

Rechtliches

  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Impressum
  • Kontakt
  • Nach oben ↑
Menü
  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Impressum
  • Kontakt
  • Nach oben ↑

Für Agenturen & Unternehmer

  • Als Agentur eintragen
  • Beste Agenturen finden
  • Städte: von A bis Z.
  • Agenturen in Augsburg
  • Agenturen in Basel
  • Agenturen in Berlin
  • Agenturen in Bochum
  • Agenturen in Bonn
  • Agenturen in Bremen
  • Agenturen in Dortmund
  • Agenturen in Dresden
  • Agenturen in Duisburg
  • Agenturen in Düsseldorf
  • Agenturen in Essen
  • Agenturen in Frankfurt am Main
  • Agenturen in Freiburg
  • Agenturen in Hamburg
  • Agenturen in Hannover
  • Agenturen in Innsbruck
  • Agenturen in Karlsruhe
  • Agenturen in Köln
  • Agenturen in Leipzig
  • Agenturen in München
  • Agenturen in Münster
  • Agenturen in Nürnberg
  • Agenturen in Offenbach am Main
  • Agenturen in Regensburg
  • Agenturen in Salzburg
  • Agenturen in Stuttgart
  • Agenturen in Wien
  • Agenturen in Zürich
  • Digitalagentur finden
  • Webdesign-Agentur finden
  • Werbeagentur finden
Menü
  • Als Agentur eintragen
  • Beste Agenturen finden
  • Städte: von A bis Z.
  • Agenturen in Augsburg
  • Agenturen in Basel
  • Agenturen in Berlin
  • Agenturen in Bochum
  • Agenturen in Bonn
  • Agenturen in Bremen
  • Agenturen in Dortmund
  • Agenturen in Dresden
  • Agenturen in Duisburg
  • Agenturen in Düsseldorf
  • Agenturen in Essen
  • Agenturen in Frankfurt am Main
  • Agenturen in Freiburg
  • Agenturen in Hamburg
  • Agenturen in Hannover
  • Agenturen in Innsbruck
  • Agenturen in Karlsruhe
  • Agenturen in Köln
  • Agenturen in Leipzig
  • Agenturen in München
  • Agenturen in Münster
  • Agenturen in Nürnberg
  • Agenturen in Offenbach am Main
  • Agenturen in Regensburg
  • Agenturen in Salzburg
  • Agenturen in Stuttgart
  • Agenturen in Wien
  • Agenturen in Zürich
  • Digitalagentur finden
  • Webdesign-Agentur finden
  • Werbeagentur finden
Das große Dr. Web Icon-Set: 970+ Icons, im SVG-Format​

Lade Dir jetzt das Icon-Set
kostenlos herunter ↓

Über 970 Dr. Web-Icons, kostenlos.
Danke nein, ist nichts für mich.
Invalid email address
Vielen Dank! Bitte schau noch in Dein Postfach und bestätige die Anmeldung.