Dokumentation

Installation

Installation via Bower

bower i hlgrid

Installation via npm

npm i hlgrid --save-dev

Meta-Viewport

Um eine korrekte Funktion auf mobilen Geräten zu gewährleisten ergänzen Sie den Head-Bereich Ihres HTML-Dokuments um den Viewport-Meta-Tag.

<head>

    <meta name="viewport" content="width=device-width, initial-scale=1">

    ...

</head>

CSS einbinden

Binden Sie nun die extrahierte CSS-Datei die Ihren Anforderungen entspricht ebenfalls in den Head-Bereich ein.

Datei Beschreibung
hlgrid-standalone.css Unkomprimiertes CSS-Grid inkl. Border-Boxhandling um Darstellungsprobleme in unterschiedlichen Browsern zu vermeiden.
hlgrid-standalone.min.css (Empfehlung) Komprimiertes CSS-Grid inkl. Border-Boxhandling um Darstellungsprobleme in unterschiedlichen Browsern zu vermeiden.
hlgrid.css Unkomprimiertes CSS-Grid
Sinnvoll für die Verwendung mit andern Frame-Works zur späteren Komprimierung.
hlgrid.min.css Komprimiertes CSS-Grid
<head>

    <meta name="viewport" content="width=device-width, initial-scale=1">

    ...

    <link rel="stylesheet" href="css/hlgrid-standalone.min.css">

</head>

Gridaufbau

Das hlGrid setzt sich aus drei unterschiedlichen Elementen zusammen.

  1. Der Container .hl-wrapper oder .hl-wrapper-fluid
  2. Die Grid-Reihe .hl-grid
  3. Die Grid-Spalten .hl-col-(1-12)[-(s,m,l,xl)]

Die Werte 1-12 der Grid-Spalten geben an wie breit eine Spalte dargestellt werden soll.
Über die optionalen Zusätze s, m, l oder xl läßt sich steuern, wie breit eine Spalte bei unterschiedlichen Auflösungen dargestellt werden soll.

Suffix Bildschirmbreite
xl 1200px und breiter
l 992px - 1199px
m 768px - 991px
s 576px - 767px
<body>

    <div class="hl-wrapper">
        <div class="hl-grid">
            <div class="hl-col-4-xl hl-col-8-m">...</div>
            <div class="hl-col-4-m">...</div>
            <div class="hl-col-4-xl hl-col-12">...</div>
        </div>
    </div>

</body>

CSS-Klassenreferenz

Haupklassen

CSS-Klasse Responsive Optionen Elternelemente Beschreibung
.hl-wrapper Container zur Bestimmung der äußeren Breite des Grids basierend auf Medienbreite
.hl-wrapper-fluid Container zum Kapseln von Gridreihen
.hl-grid .hl-wrapper
.hl-wrapper-fluid
.hl-col-*
Eine Reihe im Grid. Beinhaltet Gridspalten.
.hl-col-1 -s, -m, -l, -xl .hl-grid Gridspalte.
Breite 1 Gridspalte (8.33333333%).
.hl-col-2 -s, -m, -l, -xl .hl-grid Gridspalte.
Breite 2 Gridspalten (16.66666667%).
.hl-col-3 -s, -m, -l, -xl .hl-grid Gridspalte.
Breite 3 Gridspalten (25%).
.hl-col-4 -s, -m, -l, -xl .hl-grid Gridspalte.
Breite 4 Gridspalten (33.33333333%).
.hl-col-5 -s, -m, -l, -xl .hl-grid Gridspalte.
Breite 5 Gridspalten (41.66666667%).
.hl-col-6 -s, -m, -l, -xl .hl-grid Gridspalte.
Breite 6 Gridspalten (50%).
.hl-col-7 -s, -m, -l, -xl .hl-grid Gridspalte.
Breite 7 Gridspalten (58.33333333%).
.hl-col-8 -s, -m, -l, -xl .hl-grid Gridspalte.
Breite 8 Gridspalten (66.66666667%).
.hl-col-9 -s, -m, -l, -xl .hl-grid Gridspalte.
Breite 9 Gridspalten (75%).
.hl-col-10 -s, -m, -l, -xl .hl-grid Gridspalte.
Breite 10 Gridspalten (83.33333333%).
.hl-col-11 -s, -m, -l, -xl .hl-grid Gridspalte.
Breite 11 Gridspalten (91.66666667%).
.hl-col-12 -s, -m, -l, -xl .hl-grid Gridspalte.
Breite 12 Gridspalten (100%).
.hl-col-auto -s, -m, -l, -xl .hl-grid Gridspalte.
Breite des maximal verfügbaren Raums innerhalb der Spalte.
.hl-col-content -s, -m, -l, -xl .hl-grid Gridspalte.
Breite des minimalen Raums den der Inhalt benötigt.

Hilfsklassen

CSS-Klasse Responsive Optionen Anwendbar auf Beschreibung
.no-spacings .hl-grid Setzt die Abstände der Spalten innerhalb dieser Reihe auf 0.
.align-items-top -s, -m, -l, -xl .hl-grid Positioniert alle Spalten innerhalb dieser Reihe oben.
.align-items-center -s, -m, -l, -xl .hl-grid Positioniert alle Spalten innerhalb dieser Reihe vertikal mittig.
.align-items-bottom -s, -m, -l, -xl .hl-grid Positioniert alle Spalten innerhalb dieser Reihe unten.
.justify-items-left -s, -m, -l, -xl .hl-grid Zentriert alle Spalten innerhalb dieser Reihe links.
.justify-items-right -s, -m, -l, -xl .hl-grid Zentriert alle Spalten innerhalb dieser Reihe rechts.
.justify-items-center -s, -m, -l, -xl .hl-grid Zentriert alle Spalten innerhalb dieser Reihe horizontal mittig.
.justify-items-between -s, -m, -l, -xl .hl-grid Verteilt die Spalten dieser Reihe gleichmässig mit Abständen zwischen den Spalten.
.justify-items-between -s, -m, -l, -xl .hl-grid Verteilt die Spalten dieser Reihe gleichmässig mit Abständen vor, zwischen und hinter den Spalten.
.hl-col-offset-1 -s, -m, -l, -xl .hl-col-* Spaltenvorschub.
Breite 1 Gridspalte (8.33333333%).
.hl-col-offset-2 -s, -m, -l, -xl .hl-col-* Spaltenvorschub.
Breite 2 Gridspalten (16.66666667%).
.hl-col-offset-3 -s, -m, -l, -xl .hl-col-* Spaltenvorschub.
Breite 3 Gridspalten (25%).
.hl-col-offset-4 -s, -m, -l, -xl .hl-col-* Spaltenvorschub.
Breite 4 Gridspalten (33.33333333%).
.hl-col-offset-5 -s, -m, -l, -xl .hl-col-* Spaltenvorschub.
Breite 5 Gridspalten (41.66666667%).
.hl-col-offset-6 -s, -m, -l, -xl .hl-col-* Spaltenvorschub.
Breite 6 Gridspalten (50%).
.hl-col-offset-7 -s, -m, -l, -xl .hl-col-* Spaltenvorschub.
Breite 7 Gridspalten (58.33333333%).
.hl-col-offset-8 -s, -m, -l, -xl .hl-col-* Spaltenvorschub.
Breite 8 Gridspalten (66.66666667%).
.hl-col-offset-9 -s, -m, -l, -xl .hl-col-* Spaltenvorschub.
Breite 9 Gridspalten (75%).
.hl-col-offset-10 -s, -m, -l, -xl .hl-col-* Spaltenvorschub.
Breite 10 Gridspalten (83.33333333%).
.hl-col-offset-11 -s, -m, -l, -xl .hl-col-* Spaltenvorschub.
Breite 11 Gridspalten (91.66666667%).
.hl-col-order-1 -s, -m, -l, -xl .hl-col-* Spaltensortierung.
Positioniert eine Spalte an Position 1 der der Gridreihe.
.hl-col-order-2 -s, -m, -l, -xl .hl-col-* Spaltensortierung.
Positioniert eine Spalte an Position 2 der Gridreihe.
.hl-col-order-3 -s, -m, -l, -xl .hl-col-* Spaltensortierung.
Positioniert eine Spalte an Position 3 der Gridreihe.
.hl-col-order-4 -s, -m, -l, -xl .hl-col-* Spaltensortierung.
Positioniert eine Spalte an Position 4 der Gridreihe.
.hl-col-order-5 -s, -m, -l, -xl .hl-col-* Spaltensortierung.
Positioniert eine Spalte an Position 5 der Gridreihe.
.hl-col-order-6 -s, -m, -l, -xl .hl-col-* Spaltensortierung.
Positioniert eine Spalte an Position 6 der Gridreihe.
.hl-col-order-7 -s, -m, -l, -xl .hl-col-* Spaltensortierung.
Positioniert eine Spalte an Position 7 der Gridreihe.
.hl-col-order-8 -s, -m, -l, -xl .hl-col-* Spaltensortierung.
Positioniert eine Spalte an Position 8 der Gridreihe.
.hl-col-order-9 -s, -m, -l, -xl .hl-col-* Spaltensortierung.
Positioniert eine Spalte an Position 9 der Gridreihe.
.hl-col-order-10 -s, -m, -l, -xl .hl-col-* Spaltensortierung.
Positioniert eine Spalte an Position 10 der Gridreihe.
.hl-col-order-11 -s, -m, -l, -xl .hl-col-* Spaltensortierung.
Positioniert eine Spalte an Position 11 der Gridreihe.
.hl-col-order-12 -s, -m, -l, -xl .hl-col-* Spaltensortierung.
Positioniert eine Spalte an Position 12 der Gridreihe.
.hl-col-order-first -s, -m, -l, -xl .hl-col-* Spaltensortierung.
Positioniert eine Spalte am Anfang der Gridreihe.
.hl-col-order-last -s, -m, -l, -xl .hl-col-* Spaltensortierung.
Positioniert eine Spalte am Ende der Gridreihe.
.align-self-top -s, -m, -l, -xl .hl-col-* Positioniert diese Spalte in ihrer Gridreihe oben.
.align-self-center -s, -m, -l, -xl .hl-col-* Positioniert diese Spalte in ihrer Gridreihe vertikal mittig.
.align-self-bottom -s, -m, -l, -xl .hl-col-* Positioniert diese Spalte in ihrer Gridreihe unten.

Jetzt starten

Download