Erstellen Sie Baseline-Grids im Web mit Sassline

Ein Großteil der Online-Inhalte ist textbasiert, aber die Leute werden nicht daran interessiert sein, den Text auf Ihrer Website zu lesen, es sei denn, die Typografie ist gut gestaltet.

Sie könnten mit benutzerdefinierten Frameworks arbeiten, aber diese können restriktiv sein . Versuchen Sie stattdessen Sassline, eine kostenlose Sass-basierte Bibliothek, um perfekte Gitternetzlinien im Internet zu erstellen.

Dieses kostenlose Tool funktioniert auf Sass, so dass Sie sich zuerst in dieser Vorverarbeitungssprache auskennen müssen. Wenn Sie noch neu in der Webentwicklung sind, dann ist es eine gute Idee, Ihr CSS und Sass zu üben, bevor Sie Sassline aufheben .

Aber sobald Sie es gelernt haben, werden Sie Layouts nie wieder auf die gleiche Art und Weise gestalten.

Es verwendet Rem-Einheiten, um benutzerdefinierte Basislinien zu erstellen , die auf die gesamte Breite des Textes passen . Dies beinhaltet alle Ihre Header, Absätze, Blockquotes, alles.

Und Sassline verfügt über reaktionsfähige Haltepunkte, so dass Sie die Textgröße (und Zeilenhöhe) automatisch anhand des Sassline-Rasters anpassen können. Dies beruht auf Sass Mixins, die Sass Erfahrung benötigen, wenn Sie mit ihnen arbeiten möchten.

Deshalb empfehle ich dieses Tool speziell für erfahrene Webentwickler, die ihren Workflow verbessern möchten.

Die Demoseite bietet ein ziemlich klares Beispiel für die Funktionsweise dieses Grundlinienrasters, einschließlich Listenelementen, Pull-Anführungszeichen und verschiedenen Header-Größen.

Außerdem können Sie dies in Frontend-Frameworks wie Bootstrap einfügen, wenn Sie kleinere Änderungen am Code vornehmen möchten. Die gesamte Sassline-Bibliothek ist super vielseitig und sollte für Sass-Liebhaber überall ein Grundpfeiler sein.

Um zu beginnen, besuchen Sie das Haupt-GitHub Repo und laden Sie eine Kopie der Quelldateien herunter.

Dort finden Sie auch Setup-Anweisungen und einen Link zu diesem tollen Blog-Post, der Sie durch die Funktionen der Sassline-Bibliothek führt.