Grundlagen von MAGICK.CSS
magick.css ist ein minimalistisches, leicht zu nutzendes und leicht verständliches CSS-Framework, das (größtenteils) ohne Klassen auskommt.- Es besteht aus einer einzigen Datei, und alle optionalen Teile sind auskommentiert.
- Ziel ist es, eine elegante und magisch-verspielte Optik zu erreichen und dabei Lesbarkeit und Informationsvermittlung zu maximieren.
Verwendung von MAGICK.CSS
magick.css wird idealerweise zusammen mit normalize.css verwendet.- Es kann in ein Projekt eingebunden werden, indem über ein CDN zwei Zeilen zum HTML-
<head> hinzugefügt werden.
- Alternativ kann die Datei
magick.css heruntergeladen und in den HTML-<head> eingebunden werden.
- In JS-Projekten kann es per
npm install installiert und im Code per import verwendet werden.
- In Verbindung mit einem HTML5-Dokument werden zu 99 % keine Klassen benötigt, und einige nette Funktionen können genutzt werden.
Layout
- Um eine Seite in responsive und gut lesbare Spalten zu strukturieren, kann der gesamte Inhalt in ein
<main>-Tag eingeschlossen und mit <section>-Tags in Abschnitte für längere Inhalte unterteilt werden.
- Mit dem
<aside>-Tag lassen sich ergänzende Informationen hinzufügen; über Sidenotes können Punkte erweitert oder zusätzlicher Kontext geliefert werden.
Typografie
- Es werden Beispiele für die Typografie gezeigt, die
magick.css bereitstellt.
- Überschriften unterhalb von
<h4> werden nicht gestylt; falls nötig, kann der Nutzer selbst Styles anwenden.
Strukturierte Inhalte
- Listen und Tabellen bleiben schlicht und lenken nicht vom Inhalt ab.
Formulare und Eingaben
- Interaktive Elemente können eigenständig oder als Teil eines Formulars verwendet werden.
- Beispiele sind Buttons, Texteingaben, Checkboxen, Radio-Buttons, Fieldsets und mehr.
Medien und Abbildungen
- Medienelemente wie Bilder und Videos können eigenständig verwendet oder als Figure dargestellt werden, um dem Inhalt Struktur und Eleganz zu verleihen; mit Captions lässt sich zusätzlicher Kontext geben.
Code, Zitate und vorformatierter Text
- Code kann inline oder in separaten Blöcken dargestellt werden, und Zitate werden mit dem
<blockquote>-Tag hinzugefügt.
Zusatzfunktionen
- Es stehen Zusatzfunktionen wie Sidenotes und automatische Nummerierung zur Verfügung; diese erfordern jedoch spezielle Klassen und gehören daher nicht zu den Kernfunktionen von
magick.css.
Meinung von GN⁺
magick.css bietet Nutzern eine Möglichkeit, die Komplexität von CSS zu reduzieren und das Design von Webseiten zu vereinfachen.- Dieses Framework könnte sich besonders für textzentrierte Websites wie Dokumentationen oder Blogs eignen und dabei helfen, den Fokus auf den Inhalt zu legen.
- Für Entwickler, die komplexe interaktive Funktionen oder dynamische Webanwendungen erstellen möchten, könnte es jedoch eingeschränkt sein.
- Andere CSS-Frameworks mit ähnlichen Funktionen sind Bootstrap, Foundation und Bulma; welches Framework gewählt wird, kann je nach Anwendungsfall und Vorlieben variieren.
- Bei der Einführung von
magick.css sollten die Designanforderungen des Projekts und die Einschränkungen des Frameworks berücksichtigt werden; wichtig ist ein gutes Gleichgewicht zwischen Einfachheit und Benutzerfreundlichkeit.
1 Kommentare
Hacker-News-Kommentare
Ein Beispiel dafür, wie gut eine Schriftart zum Stil passen kann: Sie passt so gut, dass sie kaum auffällt.
Das Designsystem und die Art, wie es präsentiert wird, werden als schön bewertet; auch die Aufmerksamkeit für Details wie Zeilenhöhe und Strichstärke gefällt. Es wird ein Link für Menschen geteilt, die sich für den Code interessieren. Zugleich wird bedauert, dass benutzerdefinierte Checkboxen und Radio-Buttons fehlen, was die Immersion etwas stört. Außerdem habe es dazu inspiriert, einen Blog zu erstellen.
In einem einfachen Beispiel wird auf einen kleinen Tippfehler hingewiesen: Statt
headersolltemaingeschlossen werden.Es wird der Reiz persönlicher Websites mit dem Gefühl eines LaTeX-Dokuments erwähnt, und der extrem minimalistische Stil alter Uni-Professoren-Websites wird als cool bezeichnet. Außerdem wird der Wunsch geäußert, dass persönliche Blogs populärer wären.
Mit einem Link wird die Empfehlung ausgesprochen, dass einem vermutlich Tufte CSS gefallen würde.
Script-Schriftarten in Großbuchstaben seien verheerend für die Lesbarkeit; empfohlen wird, Großbuchstaben zu vermeiden und stattdessen Größe, Stärke und Kursivschrift zur Hervorhebung zu nutzen.
Positives Feedback dazu, dass die Schrift sehr gut lesbar, niedlich, aber nicht übertrieben und deshalb attraktiv sei.
Wenn entfernte Schriftarten blockiert werden, werde der Text in Comic Sans dargestellt, was einen schlechten Eindruck mache.
Es wird der Wunsch nach mehr minimalistischen CSS-Frameworks geäußert, insbesondere weil solche mit eigenständigem Charakter schwer zu finden seien.
Das Design gefällt, und nach dem Betrachten der chinesischen Übersetzung wird die Meinung von Menschen erfragt, die Chinesisch lesen können. Es wird erwähnt, dass die Schriftoptionen im Vergleich zum Englischen eingeschränkt seien und dass auch andere Fotos verwendet würden.