Halfmoon: Eine Bootstrap-Alternative mit integriertem Dark Mode

Ich habe kürzlich die erste Produktionsversion von Halfmoon veröffentlicht, einem Frontend-Framework, an dem ich in den letzten Monaten gearbeitet habe. Dies ist ein kurzer Einführungspost über das Framework und warum ich mich entschieden habe, es zu entwickeln.

Der Elevator Pitch

Halfmoon ist ein Frontend-Framework mit einigen interessanten Merkmalen

• Integrierter Dark Mode: Das Erstellen einer Dark-Mode-Version einer Website ist integriert und ein Kinderspiel.
• Modulare Komponenten: Viel Überlegung wurde in die Erstellung modularer Komponenten gesteckt – wie Formulare, Navigationsleisten, Seitenleisten, Dropdowns, Benachrichtigungen, Verknüpfungen usw. –, die überall verwendet werden können, um Layouts zu erstellen, auch komplexe wie Dashboards.
• JavaScript ist optional: Viele der in Halfmoon enthaltenen Komponenten sind darauf ausgelegt, ohne JavaScript zu funktionieren. Das Framework verfügt jedoch immer noch über eine leistungsstarke JavaScript-Bibliothek ohne zusätzliche Abhängigkeiten.
• Alle benötigten CSS-Klassen: Die Klassennamen sollten für jeden, der Bootstrap verwendet hat, sofort vertraut sein, da dies die Inspiration war.
• Browserübergreifende Kompatibilität: Halfmoon unterstützt fast jeden Browser, einschließlich sehr alter wie Internet Explorer 11, vollständig.
• Einfach anpassbar: Halfmoon verwendet benutzerdefinierte CSS-Eigenschaften für Dinge wie Farben und Layouts, was es extrem einfach macht, Dinge nach Ihren Wünschen anzupassen, auch ohne CSS-Preprocessor.

In vielerlei Hinsicht können Sie Halfmoon als Bootstrap mit einer integrierten Dark-Mode-Implementierung betrachten. Es verwendet viele Bootstrap-Komponenten mit in vielen Fällen leicht veränderten Markup.

Okay, großartig, aber warum dieses Framework?

Immer wenn ein neues Framework vorgestellt wird, taucht unweigerlich die gleiche Frage auf: Warum hast du das eigentlich entwickelt? Die Antwort ist, dass ich Dark Modes und Themes liebe. Tools, die sowohl einen hellen als auch einen dunklen Modus (zusammen mit einem Umschalter) haben, sind meine Favoriten, weil ich das Gefühl habe, dass die Möglichkeit, ein Theme nach Belieben zu ändern, mich weniger schnell langweilt, wenn ich stundenlang darauf schaue. Ich lese manchmal bei schlechten Lichtverhältnissen (betet für meine Augen), und Dark Modes sind in dieser Situation deutlich angenehmer. 

Vor ein paar Monaten wollte ich ein einfaches Tool für mich selbst erstellen, das die Implementierung des Dark Modes für ein Dashboard-Projekt, an dem ich arbeitete, erleichtert. Nach einiger Recherche kam ich zu dem Schluss, dass ich nur zwei praktikable Optionen hatte: entweder eine JavaScript-basierte Komponentbibliothek für ein Frontend-Framework – wie Vuetify für Vue – zu verwenden oder für ein Premium-Dark-Theme für Bootstrap zu bezahlen (und mir gefiel das Aussehen der kostenlosen nicht). Ich wollte keine Komponentbibliothek verwenden, weil ich gerne einfache serverseitige Websites mit Django erstelle. Das ist einfach mein Ding. Daher habe ich das entwickelt, was ich brauchte: ein kostenloses, gut aussehendes Frontend-Framework, das ähnlich wie Bootstrap ist, aber von Haus aus ebenso gut aussehende helle und dunkle Themes enthält.

Zukünftige Pläne

Ich wollte Halfmoon einfach mit Ihnen teilen, um Sie wissen zu lassen, dass es existiert und frei verfügbar ist, falls Sie nach einem erweiterbaren Framework in der Art von Bootstrap suchen, das beim Dark Mode Priorität einräumt.

Und, wie Sie sich vorstellen können, arbeite ich immer noch an Halfmoon. Tatsächlich habe ich viele Verbesserungen im Sinn

• Mehr Komponenten
• Mehr Anpassungsoptionen (mit CSS-Variablen)
• Mehr Beispiele und Vorlagen
• Bessere Werkzeuge
• Verbesserte Barrierefreiheitsbeispiele in den Dokumenten
• Vanilla-JavaScript-Implementierungen nützlicher Komponenten wie benutzerdefinierte Multi-Selects (denken Sie an Select2, nur ohne jQuery), Datentabellen und Formularvalidatoren, unter anderem.

Kurz gesagt, der Plan ist, ein Framework zu entwickeln, das sich beim Erstellen komplexer Dashboards als sehr nützlich erweist, aber immer noch hervorragend für die Erstellung jeder Website geeignet ist. Die Dokumentation für das Framework finden Sie auf der Website des Projekts. Der Code ist Open-Source und unter MIT lizenziert. Sie können dem Projekt auch auf GitHub folgen. Ich würde mich freuen, wenn Sie es sich ansehen, Feedback hinterlassen, Issues eröffnen oder sogar dazu beitragen.