CSS Utilities mit SASS Varibalen + FAB in Ionic

Dynamisch CSS Anpasen Ionic Beginner Tutorial Steffen LippkeMit einer guten Verpackung wickelt man nicht nur die Ware ein, sondern auch den Käufer.
Werner Mitsch

CSS ist das Geschenkpapier der Web Experience.

Ich zeige Dir, wie Du die Verpackung für Deine Ionic Web App gestalten kannst.

Nur wenn Deine App durch Design sich aus der Masse abhebt, hat die App eine Chance der nächste große Wurf zu werden.

Inhalt - Weg zu meinem Kalender

Herausforderung + Coding-Ziel

Coding zur Umsetzung

Coding-Ansatz + Konzept

Erweiterungen + Aufgaben

Grundlagen einfach erklärt

Fertiges Ziel / Ergebniss

1. Kapitel

Herausforderung & Ziel: Cooler Kalender mit FAB

Herausforderung und Ziel
Herausforderung und Ziel

Floating Action Button stellen einen Kernbestandteil des Material Designs von Android dar.

Der ursprüngliche Zweck des Buttons ist die gute Erreichbarkeit.

Bei einem 5+ Zoll großem Display möchte kein Rechtshänder oben links in die Ecke auf einen Backbutton drücken wollen.

 

 

Unser Ziel: Bester Kalender der Welt

Das Ziel für dieses Tutorial ist der Bau einer smarten Kalender App. Wir fokussieren uns nicht auf die Termindarstellung, sondern wie den FAB für das Anlegen von Terminen. Der FAB soll dem Nutzer die Bedienung erleichtern.

Zusätzlich gehe ich in diesen Tutorial auf Design Anpassungen im Ionic Framework ein. Mit wenig Aufwand kommt der Programmierer im Ionic zu seinem „designten“ Ziel.

Nexus 5 mit der Kalender App
Nexus 5 mit der Kalender App

BILD

Technische Grundlagen - Dein Vorwissen

Lerninhalte

In diesem Tutorial lernst Du wie…

… deine App, um eine FAB erweiterst
…  die Ionic Komponenten (auch FAB) individualisieren kannst (SCSS)
… die CSS Abkürzung in der HTML intelligent einsetzen kannst.

 

2. Kapitel

Konzept: FAB = Ausklappbare Aktionsliste

Konzept und Lösungsansatz
Konzept und Lösungsansatz

Der Hauptbestandteil von dem FAB ist ein primärer Button für die zentrale Funktion Deiner App.

Die Buttonliste erweitert den FAB:

Ionic ist durch Module und Komponenten anpassbar und lässt viele Möglichkeiten offen, die App zu gestalten.

11 Kostenlose Exklusive App Dev Tipps

Deine Mail für Zugang zu praxisnahe App Entwicklung Tipps zu erhalten

 

 

Der FABs ist unglaublich flexibel. Der Grundgedanke ist, dass die primäre Aktion in der App in der unteren rechten Ecke gut erreichbar ist:

Bei einer Shopping App: Zum Warenkorb hinzufügen

  1. ToDo App: eine ToDo hinzufügen
  2. Notizen App: eine Notiz erstellen
  3. Kalender App: in den Kalender einen Eintrag einfügen
  4. Messaging App: eine Nachricht schreiben

Der FAB kann mehr als nur eine Funktion annehmen.

Die FAB Liste kappt sich aus, sobald der Nutzer auf den primären Button klickt. Die Aktion lässt weiter Kreisbuttons erscheinen:

  1. Anlegen einer Sprach oder Textmeno?
  2. Welche Art von Notiz: Text, ToDo, Audio?
  3. Welche Art von Kalendereintrag will der Nutzer machen?
  4. Über welchen Kanal soll die App kommunizieren?

3. Kapitel

Grundlagen: 3x CSS in Ionic einfach erklärt

Theorie einfach erklärt
Grundlagen einfach erklärt

Wer die CSS global anpasst, kann das Design auf jede Ansicht seiner App nutzen.

Wie einfach „global“ ist, zeigt der folgende Abschnitt.

 

Ionic und Cascading Style Sheets (CSS)

Bisher fokussierten sich die Tutorial auf den Ordner src/pages in dem Ionic Projekt.

Neben pages gibt es noch den src/app Ordner. Die zentrale Datei app.modules.ts kennst Du als erfahren Leser meines Blogs bereits.

Die Datei app.modules.ts ist vergleichbar mit ein Inhaltsverzeichnis eines Buches mit Verweisen auf die Seiten: Angular bindet beim Builden die verwendeten Bibliotheken des Projekts ein.

Globale CSS für Apps

Für Stilanpassungen brauchen wir die  app.scss. Ionic nutzt die eigenen Komponentenname. Diese  können die globalen CSS verändern. @font-face  importiert eine Schriftart und mit dem CSS Selektor für Klassen könnt Ihr Komponenten anpassen. Ein Beispiel ist die Navigationsleiste oben, die CSS mit dem Selektor .navbar anspricht.

Google Fonst mit at import einfach einfügen
Google Fonst mit at import einfach einfügen

Ein Typselektor kann alle Element des Typs auswählen. Alle Eingabefelder wählt der Selektor input, alle Textpassage wählt der Selektor p aus.

Tipp: Universal Sektor

Mit dem Stern * selektiert die CSS die alle Objekte auf einer Webseite. Nutze den universal Selektor, um margin, padding und Schriftart auf einen Stil zu standardisieren.

CSS Utilities  + Variablen für Schnelle Anpassungen

In Ionic gibt es noch zwei andere Optionen, um das Design schneller anzupassen. Die CSS Utilities und die SCSS Variablen sind zwei effiziente Wege Deine App etwas Farbe zu geben.

Human Interface Guidelines von Apple
Human Interface Guidelines von Apple

Die CSS Utilities sind vergleichbar mit Attributen, die dem Tag des HTML Elements anhängt. Z. B. padding, no-text-wrap, no-margin. Ionic ist ausgelegt für 3 verschieden Design-Richtlinien: Human Design Guidelines (Apple), Material Design (Google) und Metro (Windows). Wenn Du den padding bei iOS auf 10px bei einem Button setzt und der Abstand wirkt auf dem iPhone gut, dann kann der gleiche Abstand im Material Design von Google fürchterlich aussehen.

Material Design by Google
Material Design by Google

Ionic CSS Utilities übernimmt einfache, simple Anpassungen im Design. Wenn Du aber sehr spezielle Anpassungen vornehmen willst, dann musst Du das von Hand machen.

11 Kostenlose Exklusive App Dev Tipps

Deine Mail für Zugang zu praxisnahe App Entwicklung Tipps zu erhalten

Variablen für Design beinhaltet die Datei themes/variables.scss. Ionic stellt für Android, iOS und Windows Phone verschiedene Variablen mit anderen Suffixen zu Verfügung:

  • ios – (iPhone/iPad Operation System) Apples Betriebssystem
  • md – (material design) – Android
  • wp- (windows phone) – Windows 10 auf dem Smartphone

Im Code sieht das dann so aus:

$font-path: "../assets/fonts";
$font-family-ios-base: $font-family-base;
$font-family-md-base: $font-family-base;
$font-family-wp-base: $font-family-base;
$card-ios-header-font-size: 1.3em;

Window UWP App Design
Window UWP App Design

4. Kapitel

Coden: Ansprechendes Design. Simple.

Coding und Umsetzung
Coding zur Umsetzung

An die Praxis: Bauen wir einen FAB Liste und verändern diese mit CSS Stylings:

CSS Utilities + Variablen  im Schnelldurchlauf.

Die HTML enthält die Struktur von der FAB Liste Button. Die Liste kann in verschiedene Richtungen ausgeklappt werden. Die Buttons werden je nach Richtung gruppiert.
Die CSS Utilities lassen die App im Aussehen anders erscheinen: text-nowrap und no-margin ocder text-uppercase (alles in Großbuchstaben abbilden).

Die Bilder Icons findest du unter Ionic Framework.


 
Noch ein Beispiel für eine globale CSS Klasse:

Wenn Du die Komponenten effizient verändern möchtest kannst Du auch die SASS Varibalen nehmen. Das macht vieles einfacher. Die Ionic Standard-Werte überschreibest Du damit:

Steffen's TippSteffen's Tipp: TITLE

Das ist der Tipp Text....

 

Clean CodeClean Code: TITLE

Das ist der Tipp Text....

 

ErweiterungErweiterung: TITLE

Das ist der Tipp Text....

 

WarnungWarnung: TITLE

Das ist der Tipp Text....

5. Kapitel

Erweiterungen: Mehr Testen. Besseres Design.

Erweiterungen und Weiterführendes
Erweiterungen + mehr

Die Ionic Dokumentation bietet zu fast jeder Komponenten CSS Variablen, um diese global in Deiner App zu verändern.

11 Kostenlose Exklusive App Dev Tipps

Deine Mail für Zugang zu praxisnahe App Entwicklung Tipps zu erhalten

Probiere doch mal verschiedene Designs aus!

Seit mutig und implementiere einen ungewöhnlichen und einzigartigen Stil …

  • Rustikal: dunklem Holz, ausgewähle Erdtöne, besondere Komponente im Natur / Holz Desing
  • Sci-Fi: Leuchtende Neonfarben, systemweiter Dark-Mode, eckige Buttons, Slider und Listen
  • Pastell & Fröhlich: Gedämpfte Farben, geschwungene Handschrift- Schriftarten, übersichtlicher Aufbau

Je mehr Du testest, desto ein besseres Gefühl bekommst Du für Deine App-Designs.

Lasse Dich auf Neues ein.

Inspiriere Dich von anderen.

6. Kapitel

Fazit: 3x Design + praktischer FAB

Ziel und Fazit
Ziel und Fazit

Ionic ist unglaublich dehnbar. Auf Anfänger wirkt das Framework wie ein Baukasten, der seine Module nicht ändern lässt.

Steigt der Programmierer tiefer in die Materie ein, lässt das Framework Option und Möglichkeiten offen, die bei der nativen Entwicklung nicht denkbar sind.

Was denkst Du dazu: Ist native oder hybride Entwicklung flexiber (im Designen)?

Ich freue mich auf Deine Kommentare

 

Credits zu den verwendeten Bildern
Icons made by Vectors Market from www.flaticon.com is licensed by CC 3.0 BY

Sichere Dir den kompletten
Fundamental Ionic Course

Die kostenlosen Tutorials sind ein Ausschnitt
aus dem Fudamental Ionic Course by Steffen Lippke.

Schon 4832 erfolgreiche Absolventen

  • Code Downloads + umfangreiche Lösungen + Dateien für Grundlagen zum Coden
  • Visuelle Beschreibungen mit HD+ Screenshots und Hilfen
  • Steffen's Clean Code - Erweiterung - Verbesserungs - Tipps
 

100 h Kurslänge | 100 % Geld-Zurück-Garantie | Live-Support

 
1 Star2 Stars3 Stars4 Stars5 Stars (2 votes, average: 4,50 out of 5)
Loading...

Schreibe einen Kommentar

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