Simon Doppler Web Solutions

Responsive Grid System ist ein kleines CSS Framework zur Darstellung von Reihen und Spalten. Als Webentwickler benötige ich effiziente Komponenten für meine tägliche Arbeit. Aus diesem Grund habe ich dieses Framework entwickelt.

Github: github.com/quellpunkt/Responsive-Grid-System

Beschreibung

Mit diesem CSS Framework erhalten Sie ein 12 Spalten Rastersystem, welches 3 Bildschirmbreiten unterstützt. Dadurch ist es möglich, Inhalte auf verschiedenen Bildschirmen zu präsentieren.

• s (small): Breite ab 0px
• m (medium): Breite ab 700px
• l (large): Breite ab 1200px

Zu beachten ist, dass ich für alle HTML Elemente das box-sizing Property setze:

* {
  box-sizing: border-box;
}

Dadurch zählen padding und border zur Breite und Höhe der Elemente. Aus diesem Grund kann sich die Ansicht eines bestehenden Designs verändern. Sie finden mehr Informationen auf w3schools CSS box-sizing Property.

Das Rastersystem verwendet flexbox und float. Daher werden auch ältere Browser unterstützt.

CSS Klassen

Die Klasse container hat ein padding von 0.5em sowie eine maximale Breite von 1200px.

Die Klasse row leitet eine neue Reihe ein. Sie beinhaltet ein negatives margin von 0.5em.

Die Klassen col-s-x, col-m-x und col-l-x repräsentieren die Spalten, wobei x gegen eine Zahl von 1 bis 12 darstellt. Beispielsweise ist col-s-6 eine Spalte mit halber Breite. Die Klassen können kombiniert werden und dadurch unterschiedliche Breiten für unterschiedliche Displaybreiten einnehmen.

Die Klassen offset-s-x, offset-m-x und offset-l-x verschieben die Spalten nach rechts.

Verwendung

Die Einbindung erfolgt in HTML im-Tag wie folgt:

<link rel="stylesheet" href="grid.css" type="text/css" />

Danach kann das Framework verwendet werden.

Beispiele

Im Folgenden finden Sie ein paar Beispiele. Zum besseren Verständnis wurden die Inhalte Spalten eingefärbt. Sie sehen die Auswirkungen, wenn Sie die Größe Ihres Browsers ändern.

50% Breite s:

<div class="container">
  <div class="row">
    <div class="col-s-6">
      col-s-6
    </div>
    <div class="col-s-6">
      col-s-6
    </div>
  </div>
</div>


25% Breite s:

<div class="container">
  <div class="row">
    <div class="col-s-3">
      col-s-3
    </div>
    <div class="col-s-3">
      col-s-3
    </div>
    <div class="col-s-3">
      col-s-3
    </div>
    <div class="col-s-3">
      col-s-3
    </div>
  </div>
</div>


25% Breite s mit Offset:

<div class="container">
  <div class="row">
    <div class="col-s-3 offset-s-3">
      col-s-3 offset-s-3
    </div>
    <div class="col-s-3">
      col-s-3
    </div>
  </div>
</div>


50% Breite m:

<div class="container">
  <div class="row">
    <div class="col-m-3">
      col-m-6
    </div>
    <div class="col-m-3">
      col-m-6
    </div>
  </div>
</div>


25% Breite m:

<div class="container">
  <div class="row">
    <div class="col-m-3">
      col-m-3
    </div>
    <div class="col-m-3">
      col-m-3
    </div>
    <div class="col-m-3">
      col-m-3
    </div>
    <div class="col-m-3">
      col-m-3
    </div>
  </div>
</div>


25% Breite m mit Offset:

<div class="container">
  <div class="row">
    <div class="col-m-3 offset-m-3">
      col-m-3 offset-m-3
    </div>
    <div class="col-m-3">
      col-m-3
    </div>
  </div>
</div>


50% Breite l:

<div class="container">
  <div class="row">
    <div class="col-l-3">
      col-l-6
    </div>
    <div class="col-l-3">
      col-l-6
    </div>
  </div>
</div>


25% Breite l:

<div class="container">
  <div class="row">
    <div class="col-l-3">
      col-l-3
    </div>
    <div class="col-l-3">
      col-l-3
    </div>
    <div class="col-l-3">
      col-l-3
    </div>
    <div class="col-l-3">
      col-l-3
    </div>
  </div>
</div>


25% Breite l mit Offset:

<div class="container">
  <div class="row">
    <div class="col-l-3 offset-l-3">
      col-l-3 offset-l-3
    </div>
    <div class="col-l-3">
      col-l-3
    </div>
  </div>
</div>


Kombination der Spalten und Offsets:

<div class="container">
  <div class="row">
    <div class="col-l-3 offset-l-3 col-m-4 offset-m-2 col-s-6">
      col-l-3 offset-l-3 col-m-4 offset-m-2 col-s-6
    </div>
    <div class="col-l-3 col-m-4 col-s-6">
      col-l-3 col-m-4 col-s-6
    </div>
  </div>
</div>


Lizenz

Ich habe das CSS Framework unter der MIT Lizenz veröffentlicht. Sie können diese Software also für alle Zwecke verwenden. Den genauen Wortlaut der Lizenz können Sie hier finden.

Weitere Informationen

Sie können mich gerne für weitere Informationen kontaktieren.

Sehen Sie sich auch meine anderen Projekte an.