Überlegungen zur Erstellung eines CSS Frameworks

Vor etwa acht Monaten begann ich mit dem Aufbau eines Frameworks, das schließlich zu Halfmoon wurde. Ich habe einen Beitrag auf dieser Website veröffentlicht, in dem die erste Version angekündigt wurde. Halfmoon wurde als Bootstrap-Alternative mit integrierter Dunkelmodus-Funktion beworben, die sich besonders gut zum Erstellen von Dashboards und Tools eignet. All dies gilt immer noch für das Framework.

Heute möchte ich jedoch über einen etwas unterschätzten Bereich des Frameworks sprechen. Ich glaube, dass unsere Branche als Ganzes den Wert von Anpassung und Benutzerpersonalisierung, d. h. der Möglichkeit für Benutzer, ihre eigenen Designpräferenzen festzulegen, ernsthaft unterschätzt. Chris hat schon früher darüber geschrieben, wer für Designsysteme zuständig ist, und auf ein Spektrum von Flexibilität hingewiesen, je nachdem, *wem* ein System helfen soll.

Aber es geht um mehr als nur Designsysteme. Lassen Sie uns darüber sprechen, wie Halfmoon diese Probleme angeht, denn sie sind wichtige Überlegungen, um zu wissen, welches Framework am besten für Ihre spezifischen Bedürfnisse geeignet ist.

Für wen ist Halfmoon gedacht?

Bevor wir ins Detail gehen, lassen Sie uns eine wichtige Frage klären: Ist Halfmoon das richtige Framework für Sie? Hier ist eine Liste von Fragen, die Ihnen bei der Beantwortung helfen sollen

• Erstellen Sie ein Dashboard, ein Tool oder sogar eine Dokumentationswebsite? Halfmoon verfügt über viele einzigartige Komponenten und Funktionen, die speziell für diese Anwendungsfälle entwickelt wurden.
• Sind Sie mit den Klassennamen von Bootstrap vertraut, wünschen sich aber, dass das Design etwas hochwertiger aussieht?
• Möchten oder erwarten Ihre Benutzer einen Dunkelmodus auf Ihrer Website?
• Haben Sie eine Abneigung gegen Abhängigkeiten? Halfmoon verwendet kein jQuery und hat auch keinen Build-Prozess, der CSS-Präprozessoren beinhaltet. Alles ist reines, natives CSS und JavaScript.
• Haben Sie es satt, sich mit komplexen Build-Systemen und Front-End-Tools herumzuschlagen? Dies knüpft an den vorherigen Punkt an. Persönlich finde ich es schwierig, mich mit Front-End-Tools und Build-Prozessen auseinanderzusetzen. Wie oben erwähnt, hat Halfmoon keinen Build-Prozess, sodass Sie einfach die Dateien (lokal, CDN oder npm) herunterladen und mit dem Erstellen beginnen können.

Wenn Sie diese Fragen mit Ja beantwortet haben (oder auch nur eine davon), sollten Sie Halfmoon ausprobieren. Es ist jedoch wichtig zu beachten, dass Halfmoon keine UI-Komponentenbibliothek für React/Vue/Angular ist, daher sollten Sie nicht davon ausgehen. Darüber hinaus ist Tailwind CSS eine bessere Option für Sie, wenn Sie die rein Utility-gesteuerte Entwicklung bevorzugen. Wenn es um CSS-Utilities geht, verfolgt Halfmoon einen Mittelweg – es gibt Utilities plus semantische Klassen für gängige Komponenten.

Verwendung von CSS-Custom-Properties

Lassen Sie uns zunächst die einfachen Dinge erledigen. CSS-Custom-Properties sind unglaublich, und ich erwarte, dass sie Präprozessor-Variablen in Zukunft vollständig ersetzen werden. Die Browserunterstützung liegt bereits bei soliden ~96 %, und da der Internet Explorer von Microsoft ausgemustert wird, werden sie voraussichtlich zu einer Standardfunktion werden.

Halfmoon ist vollständig mit CSS-Variablen aufgebaut, da diese ein hohes Maß an Anpassbarkeit bieten. Nun denken Sie vielleicht sofort, dass dies nur bedeutet, dass einige Custom Properties für Farben darin eingestreut sind, aber es ist mehr als das. Tatsächlich gibt es in Halfmoon über **1.500** globale Variablen. Fast alles kann durch Überschreiben einer Eigenschaft angepasst werden. Hier ist ein raffiniertes Beispiel aus der Dokumentation

Das meinen wir hier, wenn wir von Anpassung sprechen: Hält das System trotzdem stand und funktioniert gut, wenn die Person, die es benutzt, etwas überschreibt. Ich habe darüber (und vieles mehr) ausführlich in der offiziellen Halfmoon-Dokumentationsseite geschrieben.

Variablen sind für Frameworks kein neues Konzept. Viele Frameworks verwenden tatsächlich Sass- oder Less-Variablen und tun dies schon seit einiger Zeit. Das ist immer noch eine gute und effektive Methode, um ein anpassbares Erlebnis zu schaffen. Aber gleichzeitig binden diese an einen Präprozessor (was, wieder einmal, nichts Schlechtes sein muss). Indem wir uns stattdessen auf CSS-Custom-Properties verlassen – und *alles* in Variablen umwandeln – verlassen wir uns auf natives CSS, und das erfordert keine Build-Abhängigkeit. So können Custom Properties nicht nur die Anpassung eines Frameworks erleichtern, sondern sie sind auch flexibler in Bezug auf den verwendeten Tech-Stack.

Es gibt eine Balance zu finden. Ich weiß, ich habe vorgeschlagen, Variablen für alles zu erstellen, aber es kann genauso schwierig sein, Hunderte von Variablen zu verwalten und zu pflegen (wie bei allem anderen im Code). Nutzen Sie also Variablen intensiv, um ein Framework oder ein Designsystem flexibler zu gestalten, aber seien Sie sich auch bewusst, wie viel Flexibilität Sie bereitstellen müssen und ob das Hinzufügen einer weiteren Variablen Teil dieses Umfangs ist.

Entscheidung, welche Komponenten enthalten sein sollen

Beim Erstellen eines CSS-Frameworks ist die Entscheidung, welche Komponenten enthalten sein sollen, ein großer Teil dieser Arbeit. Für einen Entwickler, der an einem Leidenschaftsprojekt arbeitet, möchte man natürlich alles einbeziehen. Aber das ist einfach nicht machbar, also wurden einige Entscheidungen von meiner Seite getroffen.

Derzeit verfügt Halfmoon über die **meisten** Komponenten, die Sie in ähnlichen Frameworks wie Bootstrap oder Bulma finden. Diese Frameworks sind großartig und weit verbreitet, daher sind sie ein guter Anhaltspunkt. Wie ich jedoch bereits erwähnt habe, ist ein einzigartiges Merkmal von Halfmoon der Fokus auf die Erstellung von Tools und Dashboards im Web. Diese Nische, wenn man sie so nennen kann, hat mich dazu veranlasst, einige einzigartige Komponenten und Funktionen zu entwickeln

• 5 verschiedene Arten von Seitenleisten, mit integrierten Toggle- und Overlay-Handlern. Seitenleisten sind für die meisten Dashboards und Tools sehr wichtig (und eine Qual, sie richtig hinzubekommen), daher war dies ein Selbstläufer.
• 2 verschiedene Arten von Navigationsleisten. Es gibt eine, die am unteren Bildschirmrand fixiert ist und sehr effektiv für Aktionsschaltflächen genutzt werden kann. Denken Sie an die Aktionen, die erscheinen, wenn Sie Elemente in einer Datentabelle auswählen. Dort könnten Sie diese Aktionsschaltflächen platzieren.
• Omnidirektionale Dropdowns (mit 12 verschiedenen Platzierungen, 3 für jede Richtung).
• Schöne Formular-Komponenten.
• Integriertes Tastenkombinationssystem mit einer einfachen Möglichkeit, neue für Ihr Tool zu deklarieren.
• Viele Utilities. Natürlich ist dies nicht mit Tailwind CSS vergleichbar, aber Halfmoon verfügt über genügend responsive Utility-Klassen, um viele Anwendungsfälle direkt nutzen zu können.

Darüber hinaus sollten der integrierte Dunkelmodus, die enorme Anpassbarkeit und das standardmäßige Erscheinungsbild der Komponenten zusammenarbeiten, um Halfmoon zu einem großartigen Werkzeug für die Erstellung von Web-Tools und Dashboards zu machen. Und ich bin hoffentlich noch lange nicht fertig! Die nächsten Updates werden einen Formular-Validator (Demo-Video), weitere Formular-Komponenten, eine Multi-Select-Komponente, einen Datums- und Zeitwähler, eine Datentabell-Komponente usw. bringen.

Was fehlt also genau in Halfmoon? Nun, die offensichtlichsten sind Tabs, Listengruppen und Spinner. Aber all diese sind für die nächste Aktualisierung in v1.2.0 geplant. Es gibt auch andere fehlende Komponenten wie Karussells, Baumnavigationen, Avatare usw., die etwas außerhalb des Rahmens liegen.

Bereitstellung von Benutzereinstellungen

Die Möglichkeit für Endbenutzer, ihre Einstellungen festzulegen, wird von Frameworks oft übersehen. Dinge wie das Einstellen der Schriftgröße eines Artikels oder ob ein Dunkel- oder Hellmodus verwendet werden soll. In gewisser Weise ist es komisch, denn das Web holt auf, was Betriebssysteme Benutzern seit Jahrzehnten erlauben.

Hier sind einige Beispiele für Benutzerpersonalisierung im Web

1. Die Möglichkeit, Ihren bevorzugten Farbmodus auszuwählen. Und noch besser: Die Website speichert Ihre Präferenz automatisch und berücksichtigt sie beim Laden der Seite. Oder noch besser: Sie analysiert Ihre Betriebssystemeinstellungen und passt sich automatisch an.
2. Einstellung der Standardgröße von Elementen. Insbesondere die Schriftgröße. Eine kleine Schrift mag in einem Design gut aussehen, aber wenn Benutzer ihre ideale Schriftgröße einstellen können, wird der Inhalt tatsächlich lesbar. Technisch gesehen hat jeder moderne Browser eine Option, Inhalte zu vergrößern, aber das ist oft unhandlich und speichert Ihre Einstellungen nicht tatsächlich.
3. Einstellung der Kompaktheit von Elementen. Zum Beispiel bevorzugen manche Leute eine große Polsterung mit abgerundeten Ecken, während andere sie als Platzverschwendung empfinden und stattdessen eine engere Benutzeroberfläche bevorzugen. Ähnlich wie Gmail es Ihnen ermöglicht zu entscheiden, ob Sie viel Freiraum in Ihrem Posteingang wünschen oder ihn so klein und eng wie möglich halten möchten, um mehr Inhalte zu sehen.
4. Einstellung der Primärfarbe auf der Website. Obwohl dies rein kosmetisch ist, ist es dennoch charmant, Ihre Lieblingsfarbe auf jeder Schaltfläche und jedem Link einer Website einstellen zu können.
5. Aktivieren eines Hochkontrastmodus. Jemand hat mich auf GitHub darauf aufmerksam gemacht. Anscheinend scheitern viele (und ich meine *viele*) CSS-Frameworks oft daran, den Mindestkontrast zwischen Vordergrund- und Hintergrundfarben bei gängigen Elementen wie Schaltflächen zu erreichen. Diese Liste enthält auch Halfmoon. Dies ist oft ein Kompromiss, da übermäßig kontrastreiche Elemente oft schlechter aussehen (rein ästhetisch). Benutzerpersonalisierung kann es Ihnen ermöglichen, einen Hochkontrastmodus zu aktivieren, wenn Sie Schwierigkeiten mit dem Standardkontrast haben.

Die Ermöglichung von Benutzeranpassungen kann sehr schwierig sein – insbesondere für ein Framework –, da dies bedeuten könnte, große Teile von CSS auszutauschen, um die verschiedenen Anpassungseinstellungen und Kombinationen zu berücksichtigen. Mit einem Framework wie Halfmoon (d. h. vollständig aus CSS-Variablen aufgebaut) wird dies jedoch trivial, da **CSS-Variablen zur Laufzeit mit JavaScript gesetzt und geändert werden können**, wie hier gezeigt

// Get the <html> tag (for reading and setting variables in global scope)
var myElement = document.documentElement;

// Read CSS variable
getComputedStyle(myElement).getPropertyValue("--variable-name");

// Set CSS variable
myElement.style.setProperty("--variable-name", "value");

Daher kann die Benutzerpersonalisierung mit Halfmoon wie folgt implementiert werden

• Der Benutzer setzt eine Präferenz. Das bedeutet im Grunde, dass ein Variablenwert geändert wird. Die Variable wird mit JavaScript (wie oben gezeigt) gesetzt und der neue Wert wird in einem Cookie oder Local Storage gespeichert.
• Wenn der Benutzer die Website erneut besucht, werden seine Präferenzen abgerufen und nach dem Laden der Seite mit JavaScript (wiederum wie oben gezeigt) gesetzt.

Hier sind visuelle Beispiele, um den Punkt zu verdeutlichen.

Einstellen und Speichern der Standard-Schriftgröße

Im obigen Beispiel wird jedes Mal, wenn der Schieberegler geändert wird, die Variable --base-font-size auf den Wert des Schiebereglers aktualisiert. Dies ist großartig für Leute, die größeren Text bevorzugen. Wie im vorherigen Abschnitt erläutert, kann dieser neue Wert in einem Cookie oder Local Storage gespeichert werden, und wenn der Benutzer die Website das nächste Mal besucht, kann die Benutzereinstellung beim Laden der Seite festgelegt werden.

Einstellen der Kompaktheit von Inhalten

Nur zwei Variablen werden in diesem Beispiel aktualisiert, um von einer erweiterten Ansicht zu einer kompakten zu wechseln

• --content-and-card-spacing von 3rem (30px) auf 2rem (20px) geändert.
• --card-border-radius von 0.4rem (4px) auf 0.2rem (2px) geändert.

In einem realen Szenario könnten Sie ein Dropdown haben, das den Benutzer fragt, ob er seine Inhalte lieber **Standard** oder **Kompakt** haben möchte, und die Wahl einer davon würde natürlich die oben genannten CSS-Variablen setzen, um die Website zu thematisieren. Auch dies könnte gespeichert und beim Laden der Seite gesetzt werden, wenn der Benutzer die Website in seiner nächsten Sitzung besucht.

Warten, aber warum?

Selbst mit all den bisher gezeigten Beispielen fragen Sie sich vielleicht immer noch, warum das eigentlich notwendig ist. Die Antwort ist ganz einfach: **Eine Größe passt nicht für alle**. Schätzungsweise bevorzugt die Hälfte der Bevölkerung eine dunkle Benutzeroberfläche, während die andere Hälfte eine helle bevorzugt. Ebenso haben die Leute wilde Unterschiede, wenn es um Designpräferenzen geht. **Benutzerpersonalisierung ist eine Form der Verbesserung der Benutzererfahrung**, da sie es dem Benutzer ermöglicht, das zu wählen, was er bevorzugt. Dies ist vielleicht auf einer Landingpage nicht so wichtig, aber wenn es sich um ein Tool oder Dashboard handelt (das man lange nutzen muss, um etwas zu erledigen), ist eine personalisierbare Benutzeroberfläche ein Segen für die Produktivität. Und zu wissen, dass Halfmoon dafür konzipiert ist, macht es ideal für diese Art von Anwendungsfällen.

Darüber hinaus wissen Sie, wie Leute oft beschweren, dass Websites, die mit einem bestimmten Framework (z. B. Bootstrap) erstellt wurden, alle gleich aussehen? Dies ist ein Schritt, um sicherzustellen, dass mit Halfmoon erstellte Websites immer unterschiedlich aussehen, damit der Fokus auf der Website und dem Inhalt selbst liegt und nicht auf dem Framework, mit dem sie erstellt wurden.

Auch hier sage ich nicht, dass alles personalisiert werden sollte. Aber zu wissen, für wen das Framework gedacht ist und wofür es entwickelt wurde, hilft zu verdeutlichen, was personalisiert werden sollte.

Ausblick

Ich bin der festen Überzeugung, dass Flexibilität zur Anpassung und Berücksichtigung von Benutzereinstellungen im Web oft übersehen werden, insbesondere in der Framework-Landschaft. Das versuche ich mit Halfmoon anzugehen.

In Zukunft möchte ich es Entwicklern erleichtern, Benutzereinstellungen zu implementieren, und auch die Designvielfalt mit neuen Vorlagen und Themen fördern. Abgesehen davon sind hier einige Dinge, die für Halfmoon auf dem Weg sind

• Ein Formular-Validator (Demo-Video)
• Neue Komponenten, darunter Schieberegler, Tabs und Spinner
• Benutzerpräferenz für Hochkontrastmodus
• Multi-Select-Komponente (ähnlich wie Select2, nur ohne jQuery)
• Ein Datum- und Zeitwähler
• Eine Datentabell-Komponente
• Ein GUI-basierter Formular-Builder
• Weitere Themen und Vorlagen

Sie können natürlich mehr über Halfmoon auf der Dokumentationswebsite erfahren, und wenn Sie dem Projekt folgen möchten, können Sie es auf GitHub mit einem Stern versehen.