Share
inuit.css est un cadre OOCSS puissant, évolutif, basé sur Sass, BEM. Cet article est une brève introduction à inuit.css; comment il est construit, qui devrait l'utiliser et pourquoi.
Salut, je suis Harry, le créateur d'un framework CSS récemment réécrit, appelé inuit.css. Cet article devrait, espérons-le, servir d'introduction rapide à ce qu'est inuit.css, pourquoi il est différent et comment vous pouvez commencer à l'utiliser tout de suite…
Tout d'abord, je sais ce que vous pensez; un autre framework CSS?! Eh bien, la réponse courte est oui ... La réponse longue est "Oui, mais il y a une raison à celle-ci ..."
Les frameworks CSS coûtent actuellement dix dollars et beaucoup de personnes publient régulièrement leur version du framework CSS. Le problème avec la plupart de ces cadres est qu’ils sont très avisés; CSS est un langage de style, donc tout framework CSS traite intrinsèquement des cosmétiques et de la convivialité. inuit.css, cependant, ne le fait pas.
Un framework CSS prenant beaucoup de décisions de conception est un avantage si vous êtes un développeur qui a besoin de quelqu'un ou de quelque chose d'autre pour gérer le design pour vous, mais que se passera-t-il si vous êtes un designer qui a besoin d'aide avec CSS? Utiliser un framework signifierait que vous deviez accepter les décisions et opinions de conception de quelqu'un d'autre ou commencer à supprimer beaucoup, beaucoup de code; ou les deux! Le design de quelqu'un d'autre sera probablement totalement inadapté à votre projet, le rendant presque totalement inutile. C’est loin d’être idéal, nous avons besoin d’un framework CSS ne proposant aucun style; un cadre qui fait beaucoup de soulever des objets lourds.
inuit.css est un puissant ensemble d'objets et d'abstractions sans dessin qui construisent le squelette de tout site sur lequel vous pouvez ensuite poser votre dessin par-dessus. inuit.css fonctionne de manière OOCSS, ce qui signifie que vous pouvez tout décomposer en structure et en peau. inuit.css fait la structure et vous pouvez appliquer vos propres cosmétiques sur le dessus!
inuit.css a également un fichier plein de variables qui configurera l’échelle typographique de votre projet entier; ils sont totalement à vous et seront utilisés pour construire une multitude de composants autour des valeurs de votre choix.
inuit.css trie beaucoup de style maux de tête, mais cela vous laisse en contrôle total sur le style lui-même…
Bien entendu, le principal concurrent de quiconque sur le marché des frameworks CSS est le logiciel Bootstrap de Twitter. Bootstrap est excellent si vous avez besoin de quelque chose pour gérer le côté design des choses; sa configuration est rapide et vous pouvez déposer à volonté toutes sortes de composants préconçus dans un projet. Parfait pour les développeurs exigeant en matière de conception qui ont besoin de lancer rapidement un front-end, mais qui ne sont d'aucune utilité pour un designer qui a sa propre idée de la cosmétique, mais qui a besoin d'un coup de main pour maîtriser les éléments les plus complexes de CSS..
Si vous avez besoin de design ou d’une solution rapide à gagner, utilisez Boostrap! Si vous avez besoin de liberté créative, mais d'un assistant évolutif, sans conception, extensible et puissant, vous pourriez peut-être envisager inuit.css…
inuit.css est un petit framework conçu pour les sites web de toutes tailles. de simples pages simples aux gigantesques géants à contenu géré qui doivent grandir et grandir.
inuit.css est en fait parfaitement adapté aux sites Web volumineux et aux grandes équipes, et repose sur quelques principes pour aider ce style de développement..
Tout d’abord, inuit.css est un framework OOCSS. Je suis un fervent partisan de la façon de penser d’OO; J'écris et parle beaucoup de OOCSS. OOCSS est un moyen fantastique d’approcher de plus grandes constructions; réutiliser la base de code sur la fonction, résumer les motifs de conception communs / répétés, sécher le code, faire en sorte que le code soit efficace et portable. Toutes ces idées sont intégrées dans inuit.css en son cœur, le framework n’est fondamentalement qu’une bibliothèque d’objets utiles et d’abstractions comme l’abstraction nav, l’objet média, l’objet île et un lot plus.
C’est cette idée de séparer la structure et la peau qui rend inuit.css si bien adapté aux projets dans lesquels un ou plusieurs concepteurs sont impliqués. inuit.css fournit des modèles de conception structurelle et sans conception, l'équipe de conception y applique son traitement..
Les idées de DRYness, d'efficacité et d'abstraction sont ce qui donne le meilleur inuit.css aux sites Web à grande échelle. CSS reste mince, les abstractions s'avèrent plus utiles et les compilations sont plus efficaces; ce sont des choses qui aident vraiment sur de plus grands projets.
inuit.css est construit de manière SMACSSesque. Ce n'est pas aussi granulaire ou complet (car inuit.css est dépourvu de modules, et SMACSS ne nécessairement traiter avec les abstractions et OOCSS) mais il partage certains principes communs…
Inuit.css prend très au sérieux l’idée d’écrire CSS dans un ordre de spécificité. Le code qui redéfinit ou annule lui-même un projet est généralement une mauvaise nouvelle. Il est donc primordial de concevoir CSS de manière à éviter cela, en particulier pour les versions plus volumineuses. La structure de fichier d'inuit.css signifie que chaque jeu de règles ne fait qu'ajouter aux précédentes, il ne les annule jamais.
Premièrement, nous commençons par notre réinitialisation / redémarrage de base; inuit.css réinitialise les marges et les bourrages, mais définit également certains paramètres par défaut utiles pour tous les navigateurs. Ceci est Ground Zero, votre point de départ, le plus fondamental absolu.
Ensuite, inuit.css importe les éléments non classés, il s’agit de choses comme les en-têtes (h1-h6) qui sont réglés sur le rythme vertical que vous avez défini dans votre fichier de variables… Cela vous permet de commencer avec des éléments HTML simples et vanillés, tous stylisés selon les variables que vous avez choisies..
Après cela, nous ajoutons des objets et des abstractions… Ce sont les choses qui étendent vos éléments HTML (en utilisant des classes) et font des charges lourdes. Ces objets et ces abstractions sont tous agnostiques en éléments et peuvent donc être appliqués à presque n'importe quoi. Cela les garde incroyablement portables, réutilisables et, surtout, utiles!
Une fois que vous avez commencé à étendre inuit.css pour travailler sur votre propre projet, les éléments suivants que vous importez sont vos composants ou modules. Il s’agit d'objets construits à partir d'objets et d'abstractions et de leurs extensions pertinentes (par exemple, transformer l'objet multimédia en une image de profil utilisateur et une bio)..
Enfin, inuit.css attire les classes d’aide et les «atouts de style». Ce sont des choses comme les classes width et push / pull pour votre système de grille, la couleur et le visage de votre marque en tant que classes utiles et même un mode de débogage pour le développement.
BEM est une méthodologie frontale extrêmement puissante imaginée par les développeurs de Yandex. BEM est simplement un moyen de nommer les classes CSS pour les rendre plus strictes, plus claires et plus puissantes. inuit.css utilise une méthodologie BEM avec une convention de nommage basée sur le travail de Nicolas Gallagher.
BEM signifie bloc, élément, modificateur.
Un bloc est comme un composant, un élément est quelque chose qui va à la construction d'un bloc dans son ensemble, et un modificateur est une variation d'un bloc, par exemple:
.comment / * Block * / .comment__body / * Element * / .comment - guest / * Modifier * /
Ici nous avons un .commentaire bloc qui peut contenir un élément appelé .comment__body. Nous pouvons également voir qu’il existe une variation de .commentaire appelé .commentaire - invité. À partir des seules classes, nous pouvons nettoyer ce que chaque chose fait et quelles sont leurs relations les unes avec les autres; .comment__body doit vivre à l'intérieur .commentaire, tandis que .commentaire - invité a être une variation de .commentaire.
le __, -- la notation nous en dit beaucoup sur un objet. Ceci est particulièrement utile dans les grandes équipes car il aide à communiquer comment, où et quand les classes doivent être utilisées.
Un bien analogie de la façon dont fonctionne BEM pourrait être:
.personne .person - femme .person__hand .person__hand - left .person__hand - right
Nous pouvons voir ici que l'objet de base que nous décrivons est une personne et qu'un type de personne différent pourrait être une femme. Nous pouvons aussi voir que les gens ont des mains; ce sont des sous-parties de personnes, et à leur tour, il en existe différentes variantes, comme gauche et droite.
Sass est utilisé pour un certain nombre de raisons, principalement pour que:
Passer inuit.css sur un pré-processeur n’a pas été une décision facile, mais j’en suis heureuse. La combinaison de OOCSS avec Sass s’est révélée inestimable, et l’utilisation de variables pour configurer votre projet personnalisé signifie qu’il n’existe jamais deux versions inuit.css identiques..
Configurer un projet sur inuit.css ne pourrait être plus simple. En supposant que votre projet ait une structure très basique, comme ceci:
+ css / + img / + index.html
Ensuite, votre première étape consiste à obtenir inuit.css dans ce répertoire CSS. Vous pouvez le faire de deux manières:
Accentsconagua
CD dans le répertoire du projet et cloner avec Git: clone git https://github.com/csswizardry/inuit.css.git css && cd css / && rm-rf .git / && cd… /. Ceci dit fondamentalement 'clone le projet inuit.css dans un répertoire appelé css, puis aller dans css / et supprimez le contrôle de version Git des fichiers inuit.css, puis retournez au répertoire du projet '.
Une fois que vous avez fait cela, votre projet devrait ressembler un peu à ceci:
+ index.html + css / + inuit.css / + _vars.scss + LISEZMOI.md + watch.sh + votre-projet.scss + img /
Tout d'abord, vous pouvez supprimer complètement LISEZMOI.md. Ensuite, renommer votre-projet.scss à tout ce que vous voulez, par exemple style.scss.
Remarque: Si vous utilisez CodeKit, ou une autre interface pour compiler votre Sass, passez à la fin du didacticiel, où nous allons jeter un coup d'œil à la configuration d'un projet inuit.css de cette façon..
Maintenant vous devez ouvrir watch.sh, où vous devriez trouver quelque chose comme ceci:
#! / bin / sh # Remplacez toutes les occurrences de 'votre-projet' par ce que vous avez nommé la feuille de style de votre # projet, par 'cd' par le répertoire dans lequel ce fichier réside et par # exécutez simplement 'sh watch.sh'. # Aucune minification #sass - surveillez votre-projet.scss: votre-projet.css - style étendu sass - surveillez votre-projet.scss: votre-projet.min.css - style compressé exit 0
Ici, vous devez changer chaque instance de votre-projet.scss au nom que vous avez choisi. Ce petit fichier vous évite de regarder des fichiers Sass à partir de la ligne de commande..
Maintenant, pour commencer à regarder vos fichiers de projet, il vous suffit d'ouvrir une fenêtre de terminal, CD dans le répertoire CSS du projet et exécutez simplement sh watch.sh. Voila, votre projet est maintenant configuré sur inuit.css.
Comme mentionné, inuit.css est livré avec un tas de variables qui font un tas de choses, si vous ouvrez _vars.scss vous devriez tous les voir…
$ mode de débogage est pratique pour les projets en développement; ceci invoquera le plugin de débogage fourni avec inuit.css et signalera visuellement, dans le navigateur, tout code potentiellement inaccessible ou problématique.
$ base-font-size et $ base-line-height sont assez explicites, mais incroyablement important. Avec ces deux informations seulement, inuit.css peut commencer à configurer l’ensemble de votre rythme vertical (voir taille de police() mixin dans _mixins.scss pour plus d'informations).
Le reste des variables ne sont quasiment que des tailles de police pour vos titres. Ceux-ci, couplés à votre $ base-font-size et $ base-line-height les variables, sont ce qui complète votre rythme vertical. Essayez de modifier ces variables et voyez ce qui se passe!
La prochaine étape est celle que je trouve très utile; S'ouvrir inuit.scss et vous trouverez une table des matières énorme et une longue liste de partiels importés. Il est judicieux de commenter immédiatement tous les objets et abstractions et de les décommenter selon vos besoins. Cela signifie que vous devez les appeler intentionnellement lorsque vous en avez besoin et que vous ne regroupez pas beaucoup de feuilles CSS non utilisées..
Avec vos fichiers surveillés, vos variables définies et vos objets inutilisés commentés, vous êtes tous configurés sur inuit.css…
Il est fort probable que vous ne travailliez pas directement avec la ligne de commande. Dans ce cas, vous pouvez utiliser l'une des nombreuses applications disponibles pour la compilation de Sass. CodeKit en est un exemple et (en termes de ce dont nous avons besoin ici) se comporte presque comme tout autre compilateur, quelle que soit la plate-forme que vous utilisez..
Ainsi, pour configurer un projet inuit.css, vous devez d’abord récupérer les fichiers source dans le référentiel GitHub:
Une fois que vous avez décompressé les fichiers, organisez-les dans une structure de projet familière, comme par exemple:
Comme vous pouvez le constater, j’ai jeté le contenu du dossier source inuit dans un fichier css dossier. Je me suis également débarrassé des fichiers README.md et watch.sh.
Ensuite, ouvrez votre compilateur (CodeKit dans ce cas) et demandez-lui de regarder votre dossier de projet. Dans la plupart des compilateurs OS X, il s’agit simplement de faire glisser le dossier de votre projet dans la fenêtre de l’application. Comme vous pouvez le voir ci-dessous, CodeKit regarde maintenant mon maître inuit.css dossier et a mis en évidence les fichiers .scss qui seront directement compilés. Aucun fichier avec un soulignement précédent ne générera son propre fichier .css, bien qu'il puisse être importé dans d'autres fichiers..
Je n'ai rien renommé dans ce cas, mais vous verrez que votre-projet.scss est configuré pour compiler dans son homonyme .css. Il ne me reste plus qu'à raccorder ce fichier css à mon index.html:
Mon propre projet inuit Tunngahugit (bienvenue, en Inuit)
Chaque fois que je sauvegarde mes fichiers de projet dans un éditeur de code, CodeKit recompile le projet pour moi et recharge la fenêtre du navigateur à la volée..
Étendre inuit.css est quelque chose que nous pouvons couvrir dans la deuxième partie de ce didacticiel, mais pour le moment, tout ce que vous devez savoir, c’est que c’est aussi simple que cela. votre-projet.scss vous dit:
/ ** * Elle est à vous, cap'n… Commencez à importer vos données ici. * /
