Bourbon Neat Grilles sémantiques, non concertées et réactives

Si vous utilisez Sass, aimez utiliser Bourbon et souhaitez utiliser un framework de réseau intelligent pour des mises en page légères, Neat pourrait très bien devenir votre compagnon de confiance dans un avenir proche. Dans cette brève introduction, je vais vous donner quelques raisons valables pour donner un coup de pouce à ce cadre de grille non-autorisé.

Bienvenue dans votre nouvel outil favori

Bourbon Neat a été conçu par Reda Lemeden et fait partie de la fantastique suite Bourbon. C'est un framework de grille léger et réactif, construit sur Sass et Bourbon. Le projet lui-même est soutenu par thinkbot et leurs concepteurs s'en occupent.

Un mot sur les cadres

Avant d’installer quoi que ce soit, laissez-moi vous donner quelques bonnes raisons d’examiner la question. Il existe d'innombrables cadres qui promettent de fournir un cadre stable pour développer vos conceptions. Et la plupart d'entre eux réussissent certainement d'une manière ou d'une autre. Mais dans quelle mesure? Demande toi:

• Serez-vous (facilement) capable de changer de framework à l'avenir?
• Cela vous pose-t-il des problèmes pour encombrer votre balisage??
• Est-il adapté aux projets de dimensionnement?
• Est-ce ridicule en taille?
• Vient-il avec une courbe d'apprentissage abrupte?
• Donne-t-il à vos sites une apparence générique??

Si les réponses à l’un des problèmes ci-dessus sonnent l’alarme, je tiens simplement à vous assurer que ces maux de tête sont facilement évitables de nos jours. Il est très rare de rencontrer un projet qui équilibre aussi bien ses bénéfices que Bourbon Neat (ou simplement «Neat» pour faire court). Pourquoi Voici quelques bonnes raisons:

• C'est super léger
• Il est à l'épreuve du futur
• C'est facile à utiliser
• C'est réactif
• C'est sémantique
• C'est évolutif
• C'est élégant

Bourbon vise également à vous fournir des options, pas des réponses. Ce que j’aime particulièrement, c’est que ce n’est pas une fabrique de styles génériques et prédéfinis. De cette façon, il aide les concepteurs à prendre leurs propres décisions en matière de conception sans entraver.

Et maintenant, un mot sur la sémantique

C'est un problème important mais je vais le rendre bref: moche cours de présentation et supplémentaire emballages vides divs que vous trouvez souvent dans les bibliothèques front-end sont des fantômes du passé (au moins ils devrait être des fantômes). Neat joue un rôle important dans le dépassement de ces mauvaises habitudes sémantiques. Il vous aide à écrire un balisage propre et discret et à séparer tous vos styles de grille de manière nette dans vos feuilles de style au moyen de mixins..

Qu'y a-t-il dans la boite?

Pourquoi avoir affaire à un cadre de grille? Eh bien, le design est tout au sujet des relations et les relations peuvent être difficiles. Les grilles les facilitent en vous aidant à lier des structures de manière plus significative et plus organisée. Ils simplifient, réduisent et stabilisent l'essence, ils aident à éliminer la graisse des motifs. Neat y parvient avec seulement quatorze mixins…

• reset-layout-direction
• direction-contexte
• changement de contexte
• contexte d'affichage
• conteneur extérieur
• colonnes span
• réinitialiser l'affichage
• parent de remplissage
• effacer tout
• oméga
• médias
• décalage
• tampon
• rangée

… Une seule fonction pour définir des points d'arrêt…

• nouveau point d'arrêt

… Et douze variables pour les paramètres:

• direction par défaut
• opacité de grille visuelle
• taille de la bordure
• visual-grid-index
• désactiver les avertissements
• couleur de grille visuelle
• option par défaut
• grilles-colonnes
• largeur maximale
• grille visuelle
• colonne
• gouttière

Boom, c'est ça! Assez discret, mais il vous équipe avec beaucoup de puissance!

Grilles réactives

Changement et le besoin de flexibilité sont des nécessités constantes à long terme. Les requêtes multimédia doivent être lisses et faciles à gérer, mais elles peuvent rapidement devenir un gâchis si elles ne sont pas traitées avec soin..

Bourbon Neat encourage un SEC approche pour gérer vos points d'arrêt avec sa fonction «nouveau point d'arrêt». Enregistrez les points d'arrêt dans les variables et réutilisez-les là où vous en avez besoin. Changer un tas de requêtes de médias dans un endroit est difficile à battre.

Pour être plus concret, laissez-moi vous donner un exemple. Voici un extrait de code Sass aléatoire utilisant la fonction «nouveau point d'arrêt» pour les requêtes sur les médias:

$ mobile: new-breakpoint (largeur maximale 500px 4) .sidebar + span-colonnes (3) + média ($ mobile) + span-colonnes (1) .content + span-colonnes (9) + média ($ mobile) + span-colonnes (3) 

Pour l'instant, ne vous préoccupez pas trop des mixins utilisés dans cet exemple. Dans les prochains tutoriels, je vais plonger plus profondément dans le vif du sujet. Ce qui devrait être évident dans cet exemple, cependant, est la facilité d'utilisation si vous décidez de modifier vos requêtes multimédia. Grâce à l'utilisation de variables Sass et à cette fonction, vous disposez d'un emplacement cohérent faisant autorité pour modifier et peaufiner votre présentation réactive, sans toucher chaque élément individuellement..

Installation

Maintenant que vous savez dans quoi vous vous engagez, installons cette beauté:

Remarque: Sass doit être installé avant de commencer.)

Étape 1: Installez Bourbon

Jetez un coup d’œil à mon tutoriel sur Bourbon si vous devez suivre cette étape.

Étape 2: Installez la gemme Neat

Cela se fait via RubyGems, comme suit:

bijou installer soigné 

Étape 3: Installez Neat

Via la ligne de commande, accédez au répertoire Sass de votre choix, puis exécutez:

installation soignée 

Ceci installera tous les mixins, paramètres et fonctions nécessaires dans votre répertoire désigné..

Étape 4: Importer Neat dans votre feuille de style Sass

@import 'bourbon / bourbon' @import 'paramètres de la grille' @import 'soigné / soigné' 

Remarque: L'ordre d'importation est important ici. Parce que Neat a été construit sur Bourbon, vous devez d'abord importer Bourbon. La même chose vaut pour son paramètres de la grille.

Installation avec des rails

Étape 1:

Si vous voulez utiliser Neat with Rails, vous devez ajouter:

bijou soigné 

à votre Gemfile.

Étape 2:

Puis lancez:

installation groupée 

dans votre terminal.

Étape 3:

Dans “application.sass”, vous devrez ensuite ajouter:

@import 'bourbon' @import 'paramètres de la grille' @import 'soigné' 

et vous êtes prêt à partir. Rappelez-vous cependant que @importation ne joue pas bien avec les directives Sprockets et vous devrez donc supprimer leurs références. Dans «application.sass», «require», «require_tree» et «require_self» doivent disparaître..

CLI soignée

Dernier point, mais non des moindres, les experts de la société thinkbot nous ont fourni une interface de ligne de commande agréable. Il est livré avec trois commandes explicites:

installation soignée mise à jour soignée suppression soignée 

Clôture 0,02 $

Utiliser des outils intelligents comme celui-ci est une joie de travailler avec des grilles. Ce cadre fait un excellent travail dans la planification du bonheur des développeurs (à court et à long terme).

Dans le prochain tutoriel, nous examinerons plus en détail comment utiliser Neat..