Show HN: Minimalistisches CSS für Magier: „magick.css“

 (css.winterveil.net)
7 Punkte von GN⁺ 2024-03-24 | 1 Kommentare | Auf WhatsApp teilen
  • magick.css ist ein nahezu classless CSS-Framework in einer einzelnen Datei und zielt auf Webdokumente im Stil von „Notizen eines Magiers“ ab, die gut lesbar sind und Informationen klar vermitteln
  • Es funktioniert auf allen Bildschirmgrößen und kann ohne JavaScript genutzt werden, sodass es sich leicht direkt auf statische Dokumente oder schlanke HTML-Seiten anwenden lässt
  • Die Installation ist per CDN, durch direktes Einbinden der Datei oder per npm import möglich; außerdem wird eine Konfiguration zusammen mit normalize.css beschrieben
  • Die Grundstruktur ist eine gut lesbare, spaltenorientierte Struktur rund um und; mit `` und sidenote lassen sich ergänzende Erläuterungen neben dem Fließtext platzieren
  • Die meisten Standard-HTML-Elemente werden gestylt; Funktionen, die zusätzliche Struktur benötigen, wie sidenotes und Zeilennummern für Code, werden über separate Klassen bereitgestellt

Ziel und Charakter von magick.css

  • magick.css ist ein minimalistisches, größtenteils classless CSS-Framework
  • Es steckt in einer einzelnen Datei; über Kommentare im CSS lassen sich die Gründe für Designentscheidungen nachvollziehen
  • Visuell schafft es eine elegante und zugleich spielerische magische Atmosphäre, wobei Lesbarkeit und Informationsvermittlung im Vordergrund stehen
  • Es behält Aussehen und Funktion auf allen Geräten und Bildschirmgrößen bei und funktioniert ohne JavaScript
  • Inspiriert wurde es von LaTeX, alten TTRPG-Regelbüchern, concrete.css, Tufte CSS und der brutalistischen Ethik von „usability as design“

Installation und Nutzung

  • Für den schnellsten Test fügt man im HTML-`` zwei CDN-Stylesheets hinzu
  • Alternativ kann man die Datei magick.css aus dem Repository herunterladen und wie normales CSS einbinden
  • In JavaScript-Projekten installiert man es per npm und importiert es anschließend
npm install normalize.css magick.css

import 'normalize.css'
import 'magick.css'
  • Die zu 99 % classless gehaltene Struktur ist darauf ausgelegt, sich leicht auf bestehende HTML5-Dokumente anwenden zu lassen

Lesefokussiertes Layout

  • Für responsive Spalten wird empfohlen, den gesamten Inhalt mit zu umschließen und längere Texte in aufzuteilen
  • Eine typische Dokumentstruktur besteht darin, innerhalb von ein, mehrere und ein zu platzieren
  • Auch ohne diese Struktur kann magick.css lediglich für Typografie und gestylte Komponenten verwendet werden
  • Zusätzliche Informationen werden mit dem Tag `` dargestellt
  • Wenn mitten im Text zusätzlicher Kontext eingefügt werden soll, verwendet man sidenote; die Nummerierung erfolgt automatisch

Styling grundlegender HTML-Elemente

  • Die Typografie umfasst Überschriften, Absätze, Links, Hervorhebungen, Unterstreichungen, Kleingedrucktes, Inline-Code und mehr
  • Überschriften unterhalb von `` werden von magick.css nicht gestylt
    • Niedrigere Heading-Ebenen werden eher als für Spezialzwecke denn als Teil der Hierarchie betrachtet
    • Bei Bedarf können Nutzer sie selbst stylen
  • Listen bleiben schlicht, damit sie den Inhalt nicht stören
    • Ungeordnete Listen
    • Geordnete Listen
    • Definitionslisten
  • Tabellen verwenden ein klares und knappes Styling, damit der Fokus auf den Daten liegt
  • Formulare und Eingabeelemente können einzeln oder innerhalb eines form verwendet werden
    • Texteingaben sind vielseitig einsetzbar, daher gibt es keine starke Vorgabe zu Größe oder Platzierung
    • Bei Checkboxen und Radio-Buttons wird erwartet, dass das label nach dem input steht
    • forms sind so gestylt, dass sie wie handschriftliche Notizen auf Papier wirken und die Aufmerksamkeit der Nutzer auf sich ziehen

Medien, Code und Zitate

  • Bilder und Videos können alleinstehend platziert oder innerhalb von `` mit einer Bildunterschrift dargestellt werden
  • Ein alleinstehendes `` wird bei ausreichendem Platz in natürlicher Größe angezeigt und weder gestreckt noch verzerrt
  • Mit und lassen sich Medien stärker hervorheben und um Kontext ergänzen
  • Für Inline-Code verwendet man ; große Codeblöcke verwenden eine Struktur, bei der ein `` umschließt
  • Auch Code-Snippets können als figure dargestellt werden
  • Zitate verwenden ``
    • Quellenangaben werden mit `` innerhalb des blockquote ergänzt
    • Texte, bei denen die Formatierung wichtig ist, etwa Gedichte, können mit `` umschlossen werden

Funktionen mit separaten Klassen

  • Einige Funktionen benötigen eine spezielle class und sind daher von der zentralen classless-Funktionsweise von magick.css getrennt
  • Um eine sidenote in den Text einzufügen, ergänzt man sowohl die Referenzposition als auch den Inhalt der sidenote

Sidenote Content.
  • Auf Mobilgeräten wandert die sidenote in die Hauptspalte
  • Um Zeilennummern in Code- oder pre-Blöcken anzuzeigen, muss ein `` mit den jeweiligen Zeilennummern eingefügt werden
  • Das Einfügen der Zeilennummern kann nach Wunsch manuell, per JavaScript oder serverseitig erfolgen

Projektlinks

  • Wenn es gefällt, kann man dem Projekt auf GitHub einen Star geben
  • Wer an weiteren Arbeiten interessiert ist, kann dem Discord beitreten

Verwandte Beiträge

1 Kommentare

 
GN⁺ 2024-03-24
Hacker-News-Kommentare
  • Ein wirklich schönes Design System, und auch die Art, wie es präsentiert wird, ist großartig
    Mir gefällt, wie die handschriftliche Schrift in den Eingabebereichen mit den organischen Serifen zusammenspielt, dazu die sorgfältig ausbalancierte Zeilenhöhe und Schriftstärke
    Code für Interessierte: https://github.com/wintermute-cell/magick.css/blob/master/ma...
    Ich wünschte, es gäbe auch Custom Checkboxes und Radio Buttons. Im Moment reißen nur diese beiden einen aus der Immersion, der Rest ist wirklich hervorragend. Vielleicht bringt es mich endlich dazu, den Blog zu bauen, an den ich schon lange denke
  • Ein gutes Beispiel dafür, wie gut eine Schriftart zum gewünschten Stil passen kann
    Sie passt so gut, dass man sie fast gar nicht bewusst wahrnimmt
    • Diese Schriftart sieht für mich nicht so gut aus. Ich weiß nicht genau warum, aber auch wenn sie nicht sehr schwer zu lesen ist, liest sie sich nicht so angenehm wie viele andere gängige Schriftarten
    • Stilistisch passt sie, aber ich finde sie viel zu schwer lesbar
  • Im einfachen Beispiel gibt es einen kleinen Tippfehler
    Man sieht, dass das schließende Tag header ist, nicht main
    • Nebenbei: Für eine Website, die CSS demonstriert, wäre es schön, auch das nicht minimierte CSS mitzuliefern
      Ich wollte schnell sehen, wie es aufgebaut ist, musste aber ein paar zusätzliche Schritte gehen, um an die Quelle zu kommen. Zumindest ein klickbarer Link direkt zur unverarbeiteten Form wäre gut
    • Für den Hauptinhalt der Seite verwendet man das main-Tag, für verwandte, aber zusätzliche Inhalte wie Kommentarbereiche oder Tags separate Tags
    • Semantisch sollten HEADER und FOOTER jeweils vor und nach dem MAIN-Tag stehen
  • Wenn man diesem Stil noch etwas wie ein LaTeX-Dokument beimischt, trifft das genau die Atmosphäre, die ich mir für eine persönliche Website wünsche
    Seltsamerweise spricht mich dieses Gefühl wirklich an
    Dazu sieht auch dieser extrem minimalistische Look mit fast nur HTML, wie bei alten Websites von Uni-Professoren, ziemlich cool aus
    Ich wünschte, persönliche Blogs wären populärer
  • Wenn du diesen Stil magst, könnte dir auch Tufte CSS gefallen: https://edwardtufte.github.io/tufte-css/
    • Mir gefällt, dass Tufte die enge Integration von Bildern und Text betont. Ich halte das für eine sinnvolle Stilentscheidung, die manche TeX-Puristen nicht anerkennen wollen
      Zumindest in meinen Texten bilden Bilder und Text eine zusammenhängende Erzählung, egal ob es technische Texte sind oder nicht. Bilder neu anzuordnen und woandershin zu verschieben ergibt genauso wenig Sinn, wie das mit Absätzen zu tun
  • Bitte keine Schreibschriften in Großbuchstaben verwenden. Das ist fatal für die Lesbarkeit
    Eigentlich sollte man überhaupt nichts komplett in Großbuchstaben setzen. Das ist wie Unterstreichen eine Hervorhebungsmethode aus der Schreibmaschinenzeit, als man nur eine einzige Schriftart nutzen konnte
    Großbuchstaben sehen einander zu ähnlich. Weil die Buchstabenhöhe kaum variiert, wird das Lesen fürs Auge schwieriger. Bei gemischter Groß- und Kleinschreibung gibt es Unterlängen wie bei y, p, j und Oberlängen wie bei b, d, t, dadurch entsteht Variation und der Text lässt sich leichter erfassen
    Für Hervorhebungen sollte man besser Größe, Schriftstärke oder Kursivschrift verwenden
    • Stimmt, das bricht im Grunde Lesbarkeitsregeln und ist dadurch schwerer zu lesen, als es sein könnte
      Aber genau dadurch entsteht auch ein eigenständiger Stil
      Ich glaube, mir gefällt es trotzdem
  • Ich wünschte, es gäbe mehr minimalistische CSS-Frameworks mit eigenständigem Stil
    Ziemlich gute allgemeine Frameworks findet man leicht, aber wenn man etwas mit klar erkennbarem Charakter will, wird es deutlich schwieriger
  • Wenn Remote-Schriften blockiert werden, wird der Text in Comic Sans gerendert. Sieht nicht gut aus
    • Der Comic-Sans-Hass fühlt sich inzwischen etwas überholt an
      https://www.mcsweeneys.net/articles/im-comic-sans-asshole
    • Wenn man die Schriftauswahl von Webseiten komplett blockiert, wird zwar meine bevorzugte Schrift gerendert, aber die Schriftstärke nimmt ab und Schriftgröße sowie Zeilenhöhe werden etwas größer
      Besonders die geringere Stärke in Kombination mit dem Dark Theme macht den Text ziemlich unangenehm zu lesen
    • Ich bin gerade etwas genervt, weil mir klar geworden ist, dass meine aktuelle Konfiguration Google Fonts nicht blockiert. Normalerweise blockiere ich so etwas auf /etc/hosts-Ebene
  • Warum hassen alle CSS-Frameworks und Design Systems Texteingabefelder so sehr?
    Statt sie vernünftig zu behandeln, hat Google am Ende eine Nutzerstudie mit 800 Personen durchgeführt und kam zu dem Schluss: „Texteingabefelder sollten wie Texteingabefelder aussehen“: https://medium.com/google-design/the-evolution-of-material-d...
  • Mir gefällt die Idee eines CSS-Frameworks, das größtenteils ohne Klassen auskommt
    Ich habe früher mal eines gebaut, aber vermutlich ist es nicht so gut wie dieses: https://elementcss.neocities.org
    • Geständnis: Element ist mein dauerhaft genutztes klassenloses Framework. Danke, dass du es gebaut hast