Présentation de Bourbon Sass Mixins légers et plus

Bourbon est une excellente bibliothèque Sass mixin pour les concepteurs. Il adopte une approche minimaliste et s’attache sérieusement à créer un code de qualité tenant compte de la sémantique. La bibliothèque Bourbon encourage également les meilleures pratiques en matière de développement de code évolutif..

Une courte introduction

En réalité, loin d’être une simple bibliothèque de mixages, Bourbon est devenu une petite suite de projets gérés par les concepteurs de thinkbot. Dans les prochains tutoriels, je couvrirai tout ce qui suit:

• Bourbon
• Soigné
• Recharges
• Bitter

Pour l'instant, voici l'essentiel:

Bourbon fournit principalement un ensemble petit mais juteux de mixins et de fonctions extraits du code Sass de divers concepteurs. L'idée était de centraliser les mixins utiles et d'éviter de réinventer la roue tout le temps.

Soigné est un framework de grille légère pour Sass. Il est construit sur Bourbon et était motivé par la nécessité d’une approche sémantique des sites de mise en page..

Recharges est une collection de modèles de design, joliment stylés ou non. Ils sont également conçus avec Bourbon et Neat. Des exemples de code super utiles sont à votre disposition.

Bitter Il existe quelques styles d'échafaudage, des variables et un peu de structure pour les nouveaux projets Bourbon. Ils vous permettent de démarrer en un rien de temps.

Bourbon: Une bibliothèque Mixin pour Sass

Le premier Bourbon a été publié début 2011 par Philip LaPier, alors concepteur de produits numériques chez thinkbot. Le projet a débuté par la centralisation de divers mixins de différents concepteurs de la société..

Bourbon est aujourd'hui un Sass de premier plan bibliothèque pour les concepteurs. Il a une approche minimaliste et est sérieux au sujet de la création de code de qualité qui se soucie de sémantique. Je l’aime surtout parce qu’il encourage les meilleures pratiques pour développer un bon code qui évolue.

Ce bijou aide les concepteurs à écrire leur code plus rapidement et gère de nombreux détails essentiels (comme les préfixes de fournisseurs ennuyeux). Ses mixins agissent souvent comme des wrappers pour la sortie de CSS de qualité, mais restent aussi vanillés que possible en restant fidèles à la syntaxe CSS originale..

Mérite d'être souligné

• Bourbon est pur Sass, plate-forme agnostique et fonctionne avec tout projet Sass.
• C'est très proche de la syntaxe vanilla CSS.
• Ce n'est pas lié à Ruby (contrairement à Compass).
• Bourbon comprend des fonctions géniales.
• Il sous-traite les préfixes des vendeurs.
• C'est super léger.
• C'est sémantique.

Installer

Bon, passons à ça! Allumez votre terminal, accédez au répertoire de votre projet et installez Bourbon via RubyGems:

bash $ gem installer bourbon Remarque: Si vous n'êtes pas tout à fait à l'aise avec la ligne de commande, consultez notre série pour débutants La ligne de commande pour la conception Web

Accédez au répertoire des feuilles de style de votre projet et générez votre Bourbon dossier.

bash $ bourbon install

Cette commande génère un dossier bourbon contenant les fonctions, mixins, aides et paramètres nécessaires. Je vous recommande de ne pas toucher ce dossier. cela vous donnera une expérience beaucoup plus fluide de la mise à jour de Bourbon à l'avenir.

Terminez la configuration en important les fichiers Sass générés dans vos feuilles de style. Importez Bourbon en plus de votre application.sass fichier et assurez-vous d’importer les autres fichiers Sass suivants:

Dans application.sass:

css @import 'bourbon / bourbon' @import 'autres-sass-partials-under'

Présentation de Bourbon Mixins

Bourbon a une large gamme de mixins super utiles pour accélérer votre travail. En termes de design, il est prudent de dire que ses créateurs souhaitent prendre en charge vos propres décisions de conception sans vous imposer un style particulier. Nous vous encourageons à mélanger votre propre sauce, en utilisant ces mélanges comme base stable et relativement neutre..

Voici quelques mixins que je vous recommande de vérifier en premier:

• image de fond
• gradient linéaire
• rayon de la frontière
• rétine-image
• bloc en ligne
• transitions
• taille de la boîte
• des animations
• font-face
• Triangle
• clearfix
• position
• bouton
• Taille

Nous en apprendrons davantage sur les mixins Bourbon individuels dans les prochains tutoriels..

Présentation des fonctions Bourbon

Sass a déjà une tonne de fonctions intégrées. Ils vont de la manipulation de chaînes à la manipulation de l'opacité et des couleurs. Bourbon ajoute quelques améliorations sélectionnées et fournit des fonctions Sass très pratiques pour une variété de cas d'utilisation. Commencez par regarder dans cette sélection:

• gradient linéaire()
• échelle modulaire ()
• nombre d'or()
• ombre()
• teinte()
• em ()

Encore une fois, nous examinerons en détail les fonctions Bourbon plus tard dans la série..

Compléments Bourbon

Bourbon définit des ensembles de variables par défaut, petits mais utiles, par exemple:

Variables de pile de polices

• $ lucida-grande
• $ monospace
• $ helvetica
• $ verdana
• $ georgia

Au lieu de la manière traditionnelle de définir les piles de polices:

css font-family: "Helvetica Neue", Helvetica, Arial, sans-serif avec Bourbon, vous utilisez l'une des variables de famille de polices:

css font-family: $ helvetica

Variables de chronométrage

Bourbon fournit une tonne de variables de synchronisation, tout de suite. Un mixin comme transition a la syntaxe suivante:

"css .some-element + transition (tous les 5s $ easy-in-circ)

// Syntaxe SCSS // .some-element @include transition (tous les 5s $ ais-in-circ); // "

Le dernier paramètre définit sa timing à travers une variable. Vous pouvez ajuster le comportement de transition en fournissant l’une des 24 variables permettant de contrôler le minutage. Le GIF suivant illustre les options:

Conclusion

Faites plaisir à votre futur et à vos collègues et donnez-leur une chance à Bourbon. Ce bijou accorde une grande valeur au balisage sémantique, tout en étant léger et simple. Il vous servira bien avec votre conception et votre architecture CSS, plus il vous aidera à cultiver les meilleures pratiques pour créer un code superbe..

Rejoignez-moi dans la suite de cette série, lorsque je jetterai un œil plus profond aux mixins de Bourbon.