Ein CSS-Framework ist eine Sammlung von Gestaltungselementen und Hilfsmitteln für einfaches und standardisiertes Webdesign mit CSS.
Die meisten CSS-Frameworks bieten als Basis ein Grid-Gestaltungsraster sowie einige grundlegende Gestaltungselemente wie Schaltflächen, 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:


  • Die Hauptfunktion ist meist ein Grid-System, besonders auch für Responsive Webdesign. Diese unterscheiden sich in
    • den möglichen Grundbreiten des Viewports und eventuelle Breakpoints,

    • der Verwendung von Pixel (px), der aktuellen Schriftgröße (em) oder prozentualen Werten für Breitenangaben,

    • der Anzahl der Spalten und Reihen,

    • der relativen oder absoluten Verschachtelung von Elementen und

    • der Art und Weise der Media Queries.

  • Vor allem größere Frameworks bieten auch zahlreiche graphische Elemente wie
    • Webtypografie,

    • Icon-Sets in CSS-Sprites oder Icon-Fonts,

    • Styling für Dropout-Menüs, Tooltips, Schaltflächen, Elemente von Webformularen und

    • Elemente für grafische Benutzeroberflächen wie Akkordeon, Registerkarten, Galerien oder Modal-Fenster (Lightbox).

  • Zusätzlich bieten viele Frameworks CSS Anpassungen, beispielsweise
    • Reset-Stylesheets zur Vereinheitlichung der Formatierungen,

    • oft verwendete CSS-Hilfsklassen (left, hide) oder

    • 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


  • Webframework

  • Liste von Webframeworks

Einzelnachweise


Weblinks


  • CSS Front-end Frameworks with comparison (englisch) Vergleich zahlreicher Frameworks mit unterstützten Browsern und Nutzung von LESS/SASS

  • Awesome CSS Frameworks Aktuelle Liste von CSS Frameworks (sortiert nach Kategorie und Beliebtheit)

  • List of Best CSS Frameworks – Die besten CSS-Frameworks helfen Ihnen, verantwortungsbewusstere Webseiten zu erstellen.
CSS-Framework










Ich stimme der Verwendung von Cookies für die Zwecke der Webanalyse und digitaler Werbemaßnahmen zu. Auch wenn ich diese Website weiter nutze, gilt dies als Zustimmung. Meine Einwilligung kann ich jederzeit widerrufen. Weitere Informationen finde ich in der Datenschutzerklärung.

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.

Close