CSS-Framework

Ein CSS-Framework ist eine Sammlung von Gestaltungselementen und Hilfsmitteln für einfaches und standardkonformes Web-Design mit CSS. Die meisten CSS-Frameworks bieten als Basis ein Grid-Gestaltungsraster sowie einige grundlegende Gestaltungselemente wie Buttons, Menüs und Eingabefelder. Größere Frameworks bieten zudem noch JavaScript-basierte Funktionen, welche die Gestaltungselemente um zusätzliche, aber in der Regel optionale Funktionalitäten erweitern (Unobtrusive JavaScript).

CSS-Frameworks können unterschiedliche Funktionen anbieten:

• der Hauptfunktion ist meist ein Grid-System, besonders auch für Responsive Webdesign. Diese unterscheiden sich in:
  • der möglichen Grundbreiten des Viewports und eventuelle Breakpoints
  • Verwendung von Pixel (px), der aktuellen Schriftgröße (em) oder prozentualen Werten für Breitenangaben
  • Anzahl der Spalten und Reihen
  • relative oder absolute Verschachtelung von Elementen
  • Art und Weise der Media Queries
• vor allem größere Frameworks bieten auch zahlreiche graphische Elemente
  • Webtypografie
  • Icon-Sets in CSS-Sprites oder Icon Fonts
  • Styling für Tooltips, Schaltflächen, Elemente von Webformularen
  • Elemente für grafische Benutzeroberflächen wie Akkordeon, Registerkarten, Galerien oder Modal-Fenster (Lightbox)
• zusätzlich bieten viele Frameworks CSS Anpassungen:
  • Reset-Stylesheet alle Formatierungen zu vereinheitlichen
  • oft verwendete CSS-Hilfsklassen (left, hide)
  • Equalizer um Inhalte auf gleiche Höhe zu bringen

Größere CSS-Frameworks verwenden CSS-Interpreter wie Sass, LESS oder Stylus.

Einige weit verbreitete Beispiele sind Bootstrap, YAML, Foundation, UIkit, Skeleton oder Semantic UI.

Siehe auch

• Liste von Webframeworks

Weblinks

• Bootstrap, Foundation, UIkit und Semantic UI: 4 Open-Source CSS-Frameworks im Überblick
• CSS Front-end Frameworks with comparison (englisch) Vergleich zahlreicher Frameworks mit unterstützten Browsern und Nutzung von LASS/SASS
• Bestwebframeworks Compare CSS(3) frameworks Vergleich zahlreicher Frameworks mit unterstützten Browsern und Art der Breitenangabe (px, em oder Prozent)