simpledev.css est un nouveau framework CSS que je décris comme un framework principalement sans classe. Je l'appelle principalement sans classe car une grande partie du code utilise des sélecteurs de type, vous n'avez donc pas besoin d'ajouter beaucoup de classes pour styliser votre page Web. Il existe quelques cours, mais nous essayons de les réduire au minimum (jusqu'à présent, il n'y a qu'environ 42 cours).

Passons en revue certaines des fonctionnalités ci-dessous !

Caractéristiques

1. Conception principalement sans classe : Elle est principalement sans classe, vous verrez donc votre page HTML simple se transformer dès que vous ajouterez le framework.
2. Classes minimales pour les éléments communs : Nous fournissons des classes pour des choses vraiment courantes : une barre de navigation, faisant ressembler les liens à des boutons, un pied de page de base, etc.
3. Axé sur l'accessibilité : Je ne suis pas un expert en accessibilité, mais j'ai fait de mon mieux pour intégrer les meilleures pratiques en matière d'accessibilité dans le cadre. Par conséquent, le framework dispose d'un composant de saut de lien, d'une classe visuellement cachée, et nous utilisons des rems pour les tailles de police.
4. Prise en charge des thèmes : simpledev.css prend en charge différents thèmes. Vous pouvez utiliser uniquement le mode clair, uniquement le mode sombre, ou les deux.
5. JavaScript minimal : C'est très léger sur JS. Nous utilisons uniquement JS pour le composant navbar. Si vous n'utilisez pas la barre de navigation (ou si vous utilisez plutôt le composant simple de la barre de navigation), vous pouvez ignorer complètement le JS !
6. Facile à démarrer : Nous avons une page de démarrage qui contient des modèles de base et avancés que vous pouvez copier ou télécharger, un dépôt GitHub que vous pouvez télécharger ou utiliser pour démarrer un nouveau dépôt et un stylo de CodePen. pour l'essayer directement dans votre navigateur.
7. Recettes : Nous avons également une page de recettes où vous pouvez copier et coller des règles CSS dans votre fichier custom.css pour obtenir des éléments comme une barre de navigation collante, des coins arrondis, des tableaux rayés et un défilement fluide !
8. Palettes de couleurs personnalisées : Vous pouvez apporter votre propre palette de couleurs. simpledev.css n'a pas vraiment de couleurs par défaut, vous pouvez donc choisir vos propres couleurs et les ajouter au framework.
9. Composants modulaires : Vous pouvez techniquement télécharger certains composants et les utiliser individuellement si vous le souhaitez. Visitez simplement le dépôt GitHub et téléchargez les fichiers CSS souhaités. Gardez simplement à l’esprit que nous avons développé nos composants sur Modern Normalize, vous devrez donc peut-être incorporer Modern Normalize pour obtenir le même aspect.

Arrière-plan

L'année dernière, j'ai découvert le dépôt Awesome-css-frameworks sur GitHub. Il contient une longue liste de frameworks CSS regroupés en différentes catégories. J'ai été particulièrement intéressé par la section sur les frameworks CSS Classless. J'ai aimé l'idée de créer un lien vers un fichier CSS et de changer instantanément l'apparence d'une page HTML sans avoir à modifier votre HTML.

Au départ, je me suis inspiré du framework appelé Water.css dans la liste, mais plus tard, je me suis davantage inspiré de Pico.css, un autre framework sans classe.

Finalement, j'ai décidé d'essayer de créer mon propre framework. Cependant, je voulais que ce soit un peu différent :

• J'ai décidé d'utiliser simplement le CSS Vanilla au lieu de Sass. C'est parce que je voulais qu'il soit facile pour d'autres personnes d'essayer le framework et également d'apprendre du code source.
• Je ne voulais pas que ce soit purement sans classe, car je pense que certaines choses nécessitent des classes CSS.
• Pico est probablement le framework CSS sans classe le plus beau, mais j'ai l'impression que certains éléments/composants sont un peu gros, donc je voulais que mes éléments/composants soient plus petits.

Conclusion

Merci d'avoir lu cet article ! J'ai quelques faveurs à demander :

1. Veuillez marquer le dépôt sur GitHub !
2. Essayez de créer un petit projet avec le framework
3. Si vous remarquez des problèmes, veuillez créer un problème sur GitHub
4. Si vous avez des demandes de fonctionnalités, veuillez démarrer une discussion sur GitHub
5. Si vous avez une idée de composant, essayez de le créer sur CodePen !

Laissez un commentaire ci-dessous si vous avez des questions ou des suggestions ! Je suivrai probablement aussi avec un tutoriel sur simpledev.css plus tard.