Ein bisschen CSS

Seit langem steht auf meiner ToDo Liste, dass ich mich mit CSS beschäftigen möchte. Der Grund ist, dass ich nebenher Webseiten wie diesen Blog erstellen möchte und mich wahnsinnig schwer mit HTML und CSS tue. Für die meisten Seiten benutze ich einen Markdown > HTML Konverter (Pelican für den Blog, Pandoc für das Wiki) aber alle Versuche die Seiten weiter zu modifizieren sind meistens ins Leere verlaufen.

Mein Problem ist, dass ich nicht den richtigen Einstieg finde. Wenn ich mir ein Tutorial von 0 anschaue ist es mir zu langsam, wenn ich gleich mit einem Framework, wie Bulma oder Bootstrap einsteige ist es zu kompliziert. Mein letzter Versuch mit Bulma hat ein paar interessante Einblicke gegeben, aber ich fühle mich nicht so als ob ich ohne viel Hilfe eine simple Seite gestalten kann.

Ich habe einen guten Artikel gelesen, der mir einen guten Einstieg gegeben hat: Modern CSS Explained For Dinosaurs. Was ich daraus mitgenommen habe ist, dass einen CSS Grid bauen möchte. Im Artikel selber gibt es schon ein gutes Beispiel für einen simplen Grid.

Mit ein bisschen suchen kann man schon gute Resourcen finden:

  • Grid template: https://www.quackit.com/html/html_editors/scratchpad/preview.cfm?example=/html/templates/grid/css_grid_layout_template_2
  • MDN Resources:
    • https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout
    • https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout

Bei einem ersten Versuch bin ich zu folgendem Ergebnis gekommen:

body {
  display: grid;
  grid-template-areas:
    "header header"
    "nav article"
    "footer footer";
  grid-template-rows: 100px 1fr 80px;
  grid-template-columns: 250px 1fr;
  grid-row-gap: 10px;
  grid-column-gap: 10px;
  height: 100vh;
  margin: 0;
  margin-left: 100px;
  margin-right: 100px;
  }

Hier die Erklärung für die einzelnen Eigenschaften:

  • display: grid; link Beschreibt die Art des Elements, z.B. flow, table, flex, etc.
  • grid-template-areas: link Eine einfache Matrix, die das Grid beschreibt.
  • grid-template-rows: 100px 1fr 80px; link Abmessung der Spalte, fr steht hier für fraction, also Teil vom Rest.
  • grid-template-columns: 250px 1fr; Wie oben, nur für Zeilen.
  • grid-row-gap: 10px; link Abstand zwischen Zeilen.
  • grid-column-gap: 10px; Wie oben, nur für Spalten.
  • height: 100vh; Größe des objects body, 100vh bedeutet Höhe des Blocks in Prozent (link)

  • margin: 0; Beschreibt Abstände zu anderen Elementen.

  • in workspace/html/css-test/

  • Responsiv
  • Layout

Man kann den Grid auch an die Bildschirmgröße anpassen. Durch Ueberschreiben einzelner Attribute kann man die Objekte in einer Spalte anordnen.

@media all and (max-width: 800px) {
  body {
    grid-template-areas:
      "header"
      "article"
      "nav"
      "footer";
    grid-template-rows: 80px 1fr 70px 1fr 70px;
    grid-template-columns: 1fr;
    margin: 0;
    margin-left: 0;
    margin-right: 0;
 }
}

Mit ein bisschen Arbeit habe ich das ganze als Template für mein Wiki benutzt. Über die Zeit sollten noch ein paar mehr Kniffe dazu kommen und der Blog wird auch ein ähnliches CSS benutzen, aber das mache ich ein anderes Mal.