Hocus-Pocus: Construire un cadre SASS sans conception

Hocus-Pocus est un cadre SASS sans conception sur lequel je travaille pendant mon temps libre. L'idée principale derrière Hocus-Pocus est de faire un kit de démarrage de feuille de style universel et léger qui se concentre sur les caractéristiques les plus courantes. Dans cet article, je vais couvrir pourquoi j'ai décidé de construire mon propre cadre SASS et l'approche que j'ai adoptée en le faisant.

Les plats clés

• Hocus-Pocus est un framework SASS sans design qui offre un kit de démarrage de feuille de style légère léger, en se concentrant sur les fonctionnalités les plus courantes. Il permet aux utilisateurs de modifier l'apparence de chaque composant avec des variables et permet la désactivation de certaines fonctionnalités ou la définition d'une gamme d'aides.
• Le framework est facile à installer avec Bower et NPM, nécessitant des sass et des autopréfixer à exécuter. Il suit une convention de dénomination de classe de style Dash et Dash et accorde une attention particulière à la documentation et à des mises à jour du CHANGELOG HOCUS-POCUS.
• Les plans futurs pour le hocus-pocus incluent en faire un kit de démarrage SASS idéal pour des projets complexes, en se concentrant sur les composants de l'interface utilisateur spécifiques au projet et la définition du thème. Les nouvelles fonctionnalités majeures ne sont pas planifiées, mais des améliorations de la syntaxe et des noms de classe peuvent être implémentées.

Pourquoi ai-je commencé à travailler sur un framework SASS?

En bref, je dirais que j'ai commencé à travailler sur un framework SASS parce que je voulais gagner du temps lors du démarrage de nouveaux projets Web. J'ai remarqué que même lorsque je travaille sur des conceptions vraiment personnalisées, j'ajoute toujours le même ensemble d'outils, j'inclus les mêmes packages standard et implémente une collection similaire de composants CSS de base.

La deuxième question qui suit est alors - pourquoi vous n'utilisez pas un framework existant, bien connu et éprouvé comme bootstrap?

Ma réponse à cela revient aux préférences et à mon approche du CSS. Je pense que les bibliothèques comme Bootstrap ou Foundation sont excellentes et ont grandement changé la façon dont les gens pensent au CSS. Cependant, dans la plupart des cas dans mon propre travail de projet, je n'ai tout simplement pas besoin de toutes ces fonctionnalités et composants de l'interface utilisateur comme les barres de progression ou la chapelure. Au lieu de cela, je préfère avoir quelque chose de plus universel. Je préfère quelque chose que je peux utiliser dans n'importe quel projet, sans avoir besoin de remplacer les classes CSS Framework.

Pour les raisons ci-dessus, dans Hocus-Pocus, vous pouvez modifier l'apparence de chaque composant avec des variables. Vous pouvez même désactiver certaines fonctionnalités ou définir une gamme d'aides. L'inconvénient de cette approche est que je ne peux pas fournir une version CSS compilée du cadre car il n'y a pas de moyen raisonnable d'utiliser Hocus-Pocus sans capacité à mettre à jour les variables.

Pré-exigences et principes

Installation

Le cadre est disponible et facile à installer avec deux gestionnaires de packages différents: Bower et NPM. Il nécessite que la version SASS (la version minimale requise est 3.3.0) et l'autopréfixer à fonctionner. AutoPrefixer est utilisé pour ajouter les préfixes du fournisseur nécessaire au fichier CSS compilé final. Je ne m'inquiète pas trop de la compatibilité entre divers navigateurs de nos jours car je trouve personnellement que l'autoprefixage est suffisant. De plus, j'utilise SASS Linter (SCSS-lint), mais cela n'est pas nécessaire pour exécuter du hocus-pocus et faire les choses de la bonne façon. Hocus-Pocus fonctionnera sans lui.

Convention de dénomination

Le principe suivant est important pour chaque cadre - la convention de dénomination. Je préfère les noms de classe réguliers de style Dash sans BEM. Je ne me plaindrai pas si vous êtes un fan de BEM et que vous préférez utiliser la convention de dénomination BEM, si cela fonctionne pour vous - allez-y. De mon point de vue, BEM ne résout pas tous les problèmes de responsabilité dans CSS. Je trouve également que j'approche de mon CSS en utilisant moins d'éléments de niveau de classe lorsque j'utilise BEM. L'ajout d'un nouvel élément à un bloc existant est tout simplement trop facile.

Documentation

Enfin, je prête une attention particulière à la rédaction de la documentation et à la mise à jour du changelog Hocus-Pocus. La documentation n'a pas besoin d'être parfaite, surtout au début, mais j'essaie toujours de trouver le temps de l'améliorer. Cela aide les nouveaux arrivants à savoir comment fonctionne l'outil et me permet de suivre les fonctionnalités du cadre.

Framework Fonctions

Les caractéristiques du cadre suivantes sont les plus caractéristiques du hocus-pocus à mon avis et donnent le meilleur aperçu de son objectif.

La plupart des cours de cadre sont inspirés des projets existants sur lesquels j'ai travaillé dans le passé. Vous pouvez également repérer certaines similitudes avec d'autres cadres CSS qui m'ont inspiré, en particulier mes favoris - amorce et inuitcss.

Les fonctionnalités du framework dans Hocus-Pocus incluent:

1. normalisez avec certaines améliorations comme le jeu de dimensionnement global sur les éléments de la boîte à bordure ou du texte sans marge supérieure.
2. Une nouvelle palette de couleurs par défaut basée sur CLRS.C.
3. Une grille fluide basée sur Flexbox avec des aides à largeur qui utilisent des fractions comme noms de classe (.1 / 2, .1 / 3 et ainsi de suite).
4. Prise en charge large pour la conception Web réactive. Il existe une option pour choisir «Mobile First» ou «Desktop First» comme approche préférée. Vous êtes également en mesure de définir des points d'arrêt pour chacun et chacun d'eux obtient son propre ensemble d'aides pour l'espacement, la grille, la visibilité et un mixin SASS individuel.

par exemple:

$<span>rwd-type: desktop-first;
</span>$<span>rwd-map: (
</span>  <span>'mobile': 680px
</span><span>); 
</span>$<span>spacing-map: (
</span>  <span>'double': double($spacing-unit)
</span><span>);</span>

Ensuite, dans CSS compilé, vous aurez accès à des classes comme .mobile-1/2, .Mobile-Hidden et .Mobile-Padding-Double.

1. Styles par défaut génériques pour les éléments de texte avec rythme vertical basé sur Gridlover.
2. Modificateurs supplémentaires pour d'autres éléments HTML comme une liste en ligne, une liste de menu, une image de cercle ou une table zèbre.
3. Divers types de bouton et trois versions des formulaires: en ligne, empilée et horizontale.
4. Composants d'interface utilisateur essentiels comme l'objet multimédia, l'objet Box, Navbar, un élément de héros pour les pages d'atterrissage et un pied de page collant. Rien de plus.

Les espoirs futurs pour hocus-pocus

Mon objectif est de faire de Hocus-Pocus un kit de démarrage SASS idéal, quelle que soit la complexité de vos projets. De cette façon, vous pouvez vous concentrer sur l'écriture de composants d'interface utilisateur spécifiques au projet et la définition de votre thème.

Je ne prévois pas de mettre en œuvre de nouvelles fonctionnalités majeures. Je pense que les fonctionnalités incluses sont une quantité raisonnable de fonctionnalités et sont probablement les dernières. Je vais probablement améliorer la syntaxe pour certains composants ou changer certains noms de classe unique, mais je ne prédis pas de modifications de rupture de la compatibilité par rapport à la version actuelle. Pour l'instant, je suis plus déterminé à corriger les bogues qui se produisent alors que de plus en plus de gens essaient du hocus-pooc.

Si vous pensez que le cadre Hocus-Pocus pourrait vous être utile dans un projet à venir, vous pouvez trouver une documentation complète sur hocus-pocus.io. Le code Hocus-Pocus est open source et tous disponibles sur GitHub. J'apprécie les commentaires, les commentaires et les informations sur les problèmes potentiels.

Questions fréquemment posées (FAQ) sur la construction d'un cadre SASS sans conception

Qu'est-ce qu'un framework SASS et pourquoi est-il important dans le développement Web?

Un framework SASS (SyntaCtical Awesome Stylesheets) est une bibliothèque préparée qui est censée être utilisée comme base pour démarrer un projet . Il est important dans le développement Web car il aide à accélérer le processus de création de feuilles de style pour les sites Web. Il permet aux développeurs d'utiliser des variables, des règles imbriquées, des mixins et des fonctions, qui peuvent tous être très utiles pour maintenir CSS.

En quoi un cadre SASS sans conception diffère-t-il d'un cadre SASS régulier?

Un cadre SASS sans conception est différent d'un cadre SASS ordinaire en ce qu'il n'impose aucune décision de conception à l'utilisateur. Il fournit une ardoise propre pour les développeurs sur lesquels s'appuyer, leur permettant d'implémenter leurs propres choix de conception sans avoir à remplacer les styles préexistants.

Quels sont les avantages de l'utilisation d'un framework SASS sans conception?

L'utilisation d'un framework SASS sans conception offre plusieurs avantages. Il permet aux développeurs de maintenir une base de code propre et organisée, ce qui facilite la gestion et la mise à jour. Il fournit également une base solide sur laquelle s'appuyer sur, ce qui permet d'économiser du temps et des efforts dans les premiers stades de développement.

Comment puis-je commencer à construire un cadre SASS sans conception?

La construction d'un cadre SASS sans conception implique plusieurs étapes. Tout d'abord, vous devez configurer votre structure de projet. Ensuite, vous pouvez commencer à créer vos variables, mixins et fonctions. Après cela, vous pouvez commencer à construire vos styles de base et vos modules de mise en page. Enfin, vous pouvez compiler votre SASS dans CSS.

De quels outils ai-je besoin pour construire un framework SASS sans conception?

Pour créer un framework SASS sans conception, vous aurez besoin d'un Éditeur de texte, compilateur SASS et navigateur Web pour les tests. Vous pouvez également trouver utile d'utiliser un coureur de tâche comme Gulp ou Grunt pour automatiser votre flux de travail.

Puis-je utiliser un framework SASS sans conception pour tout type de projet?

Oui, un Le cadre SASS sans conception peut être utilisé pour tout type de projet. Il est particulièrement utile pour les grands projets où le maintien d'une base de code propre et organisée est crucial.

Comment puis-je personnaliser un framework SASS sans conception en fonction de mes besoins?

Vous pouvez personnaliser un conception sans conception sans conception Framework SASS en modifiant les variables, les mixins et les fonctions en fonction de vos besoins. Vous pouvez également ajouter vos propres styles et modules de mise en page.

Quelles sont les meilleures pratiques lorsque vous travaillez avec un framework SASS sans conception?

Quelques meilleures pratiques lorsque vous travaillez avec un cadre SASS sans conception sans design Incluez le maintien de votre code à sec (ne vous répétez pas), en utilisant des noms significatifs pour vos variables et vos mixins, et organiser votre code de manière logique et cohérente.

Puis-je utiliser un framework SASS sans conception sans conception Avec d'autres frameworks CSS?

Oui, vous pouvez utiliser un framework SASS sans conception avec d'autres frameworks CSS. Cependant, vous devrez peut-être remplacer certains des styles par défaut de l'autre cadre pour vous assurer que vos choix de conception ne sont pas remplacés.

Où puis-je trouver plus de ressources sur la création d'un cadre SASS sans conception?

Il existe de nombreuses ressources en ligne disponibles pour en savoir plus sur la construction d'un cadre SASS sans conception. Certains bons endroits pour commencer comprennent la documentation officielle du SASS, les tutoriels en ligne et les forums de développement Web.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!