simpledev.css ist ein neues CSS-Framework, das ich als meistens klassenloses Framework beschreibe. Ich nenne es weitgehend klassenlos, weil ein großer Teil des Codes Typselektoren verwendet, sodass Sie nicht viele Klassen hinzufügen müssen, um Ihre Webseite zu gestalten. Es gibt einige Klassen, aber wir versuchen, sie auf ein Minimum zu beschränken (bisher gibt es nur etwa 42 Klassen).

Lassen Sie uns einige der folgenden Funktionen durchgehen!

Merkmale

1. Größtenteils klassenloses Design: Es ist größtenteils klassenlos, sodass Sie sehen, wie sich Ihre einfache HTML-Seite verwandelt, sobald Sie das Framework hinzufügen.
2. Minimale Klassen für allgemeine Elemente: Wir stellen Klassen für Dinge bereit, die wirklich häufig vorkommen: eine Navigationsleiste, die Links wie Schaltflächen aussehen lässt, eine einfache Fußzeile usw.
3. Barrierefreiheitsorientiert: Ich bin kein Experte für Barrierefreiheit, aber ich habe mein Bestes gegeben, um Best Practices für Barrierefreiheit in das Framework zu integrieren. Daher verfügt das Framework über eine Skip-Link-Komponente, eine visuell verborgene Klasse, und wir verwenden Rems für Schriftgrößen.
4. Theme-Unterstützung: simpledev.css unterstützt verschiedene Themes. Sie können nur den hellen Modus, nur den dunklen Modus oder beides verwenden.
5. Minimales JavaScript: Es ist sehr leicht auf JS. Wir verwenden JS nur für die Navbar-Komponente. Wenn Sie die Navigationsleiste nicht verwenden (oder stattdessen die einfache Navigationsleistenkomponente verwenden), können Sie den JS vollständig überspringen!
6. Einfacher Einstieg: Wir haben eine Seite „Erste Schritte“ mit grundlegenden und erweiterten Vorlagen, die Sie kopieren oder herunterladen können, ein GitHub-Repo, das Sie herunterladen oder zum Starten eines neuen Repos verwenden können, und einen Stift von CodePen um es direkt in Ihrem Browser auszuprobieren.
7. Rezepte: Wir haben auch eine Rezeptseite, auf der Sie CSS-Regeln kopieren und in Ihre custom.css-Datei einfügen können, um Dinge wie eine klebrige Navigationsleiste, abgerundete Ecken, gestreifte Tabellen und reibungsloses Scrollen zu erhalten!
8. Benutzerdefinierte Farbpaletten: Sie können Ihre eigene Farbpalette mitbringen. simpledev.css hat standardmäßig keine Farben, Sie können also Ihre eigenen Farben auswählen und sie dem Framework hinzufügen.
9. Modulare Komponenten: Sie können einige der Komponenten technisch herunterladen und bei Bedarf einzeln verwenden. Besuchen Sie einfach das GitHub-Repository und laden Sie die gewünschten CSS-Dateien herunter. Denken Sie daran, dass wir unsere Komponenten auf Basis von Modern Normalize entwickelt haben. Daher müssen Sie möglicherweise Modern Normalize integrieren, um das gleiche Aussehen zu erhalten.

Hintergrund

Letztes Jahr habe ich das awesome-css-frameworks-Repo auf GitHub entdeckt. Es enthält eine lange Liste von CSS-Frameworks, die in verschiedene Kategorien gruppiert sind. Besonders interessiert hat mich der Abschnitt über klassenlose CSS-Frameworks. Mir gefiel die Idee, eine Verknüpfung zu einer CSS-Datei herzustellen und das Erscheinungsbild einer HTML-Seite sofort zu ändern, ohne den HTML-Code ändern zu müssen.

Anfangs ließ ich mich von dem Framework namens Water.css in der Liste inspirieren, aber später ließ ich mich mehr von Pico.css inspirieren, einem anderen klassenlosen Framework.

Irgendwann beschloss ich, mein eigenes Framework zu erstellen. Allerdings wollte ich es etwas anders haben:

• Ich habe mich entschieden, einfach Vanilla-CSS anstelle von Sass zu verwenden. Das liegt daran, dass ich wollte, dass es für andere einfach ist, das Framework auszuprobieren und auch aus dem Quellcode zu lernen.
• Ich wollte nicht, dass es rein klassenlos ist, weil ich denke, dass es einige Dinge gibt, die CSS-Klassen erfordern.
• Pico ist wahrscheinlich das am besten aussehende klassenlose CSS-Framework, aber ich habe das Gefühl, dass einige der Elemente/Komponenten etwas groß sind, deshalb wollte ich, dass meine Elemente/Komponenten kleiner sind.

Abschluss

Vielen Dank für das Lesen dieses Beitrags! Ich muss Sie um ein paar Gefallen bitten:

1. Bitte starten Sie das Repo auf GitHub!
2. Versuchen Sie, ein kleines Projekt mit dem Framework zu erstellen
3. Wenn Ihnen Probleme auffallen, erstellen Sie bitte ein Issue auf GitHub
4. Wenn Sie Funktionswünsche haben, starten Sie bitte eine Diskussion auf GitHub
5. Wenn Sie eine Idee für eine Komponente haben, versuchen Sie, sie auf CodePen zu erstellen!

Hinterlassen Sie unten einen Kommentar, wenn Sie Fragen oder Anregungen haben! Ich werde wahrscheinlich später auch ein Tutorial zu simpledev.css veröffentlichen.