Skip to main content

Lektion 09: CSS Frameworks

Stein auf Stein
Folien

Weekly 🔥 tips​

Icons in Websites

In diesem Teil der Lektion haben wir uns gemeinsam angeschaut, wie man Icons in seine Website integrieren kann. Einen einfachen Weg über einen Icon-Font haben wir uns am Beispiel von Bootstrap Icons angeschaut. Es gibt aber noch viele andere Wege, Icons zu integrieren: Icon-Fonts, SVG-Icons, Bilder, CSS, …

Bootstrap Icons werden über einen Icon-Font ermöglicht. Diesen bindet ihr im Header eurer Seite oder im CSS ein und nutzt dann jedes beliebige Icon über eine bestimmte CSS-Klasse an einem <i> Element, z.B. <i class="bi-alarm"></i>

CSS-Frameworks​

Neben Icons bietet Bootstrap auch das größte und bekannteste CSS-Framework. Ein CSS-Framework beschleunigt die Entwicklung einer Website enorm, da es einen “Satz aus Bausteinen” liefert, den wir dann verwenden können. Diese Bausteine sind standardisiert und vereinfachen und vereinheitlichen so die Entwicklung. Das ist vor allem sinnvoll, wenn man an mehreren Projekten arbeitet oder mit unterschiedlichen Entwicklern zusammenarbeitet. Wenn man bspw. Bootstrap bereits kennt, kann man schnell in unbekannte Projekte, die aber auf diesem Framework aufbauen, einzusteigen.

Das sind auch die beiden größten Vorteile eines solchen Frameworks: schnellere Entwicklung und Standardisierung des CSS-Codes. Vor allem für euch hat es noch den weiteren Vorteil, dass ihr daran euch auch abgucken könnt, wie bestimmte, visuelle Ergebnisse erreicht werden.

Bekannte CSS-Frameworks Es gibt unzählige CSS-Frameworks. Hier werden die bekanntesten sehr erklärt und aufgeführt. Zu den bekanntesten gehören

  • Bootstrap
  • Materialize
  • Bulma
  • tailwindcss

Live Coding: Bootstrap​

Am Beispiel von Bootstrap haben wir uns einmal kurz angeschaut, wie man ein solches Framework einsetzt und damit ein einfaches Beispiel umsetzt. Dies ist hier schwierig zu beschreiben, daher schaut euch das Ergebnis am besten wieder bei GitHub an.

Projektarbeit​

Diesen Teil können wir hier nicht zusammenfassen. Ihr hattet die Möglichkeit im Rahmen der Live-Session an euren Projekten in Breakout Rooms zu arbeiten. Wir haben dann jedem einen kurzen Besuch abgestattet und versucht zu helfen.

Hausaufgabe​

Arbeitet weiter an euren Projekten und bereitet Fragen vor, wenn welche auftreten sollten. Die nächste Session wird eine reine Projektarbeit-Session werden, da es die letzte vor euren Präsentationen sein wird.