Share
Tout au long de cette série, nous avons parcouru de nombreuses catégories de plugins PostCSS, offrant de nombreux avantages pour votre développement CSS. Mais certains des meilleurs plugins PostCSS ne rentrent pas dans les catégories que nous avons couvertes dans nos précédentes séries.
Dans ce tutoriel, vous allez découvrir cinq de ces «goodies divers». Nous couvrirons:
Commençons!
Comme toujours, la première chose à faire est de configurer votre projet pour utiliser Gulp ou Grunt, selon vos préférences. Si vous n'avez pas encore de préférence pour l'un ou l'autre, je vous recommande d'utiliser Gulp, car vous aurez besoin de moins de code pour atteindre les mêmes objectifs. Vous devriez donc le trouver un peu plus simple à utiliser..
Vous pouvez lire comment configurer des projets Gulp ou Grunt pour PostCSS dans les tutoriels précédents.
respectivement.
Toutefois, si vous ne souhaitez pas configurer votre projet à partir de zéro, vous pouvez télécharger les fichiers source joints à ce didacticiel et extraire le projet de démarrage Gulp ou Grunt fourni dans un dossier de projet vide. Puis avec un terminal ou une invite de commande pointée sur le dossier, exécutez la commande npm installer.
Nous devrons maintenant installer cinq plugins dans votre projet. Que vous utilisiez Gulp ou Grunt, exécutez la commande suivante dans votre dossier de projet pour installer les plugins que nous utiliserons:
npm installe perdu postcss-colorblind postcss-pxtorem postcss-style-guide --save-dev
En plus de ces cinq, nous utiliserons également rtlcss, mais comme cela fonctionne un peu différemment des autres plug-ins PostCSS, nous l'utilisons via les plug-ins correspondants Gulp ou Grunt..
Si vous utilisez Gulp, installez gulp-rtlcss à l'aide de la commande suivante:
npm installer gulp-rtlcss gulp-renommer --save-dev
Et si vous utilisez Grunt, installez grunt-rtlcss avec la commande:
npm installer grunt-rtlcss --save-dev
Nous sommes maintenant prêts à charger les plugins dans votre projet.
Si vous utilisez Gulp, ajoutez ces variables sous les variables déjà présentes dans le fichier:
Accentsconagua
var lost = require ('lost'); var colorblind = require ('postcss-colorblind'); var pxtorem = require ('postcss-pxtorem'); var styleGuide = require ('postcss-style-guide'); var rtlcss = require ('gulp-rtlcss'); var rename = require ('gulp-rename');Maintenant, ajoutez chacun de ces nouveaux noms de variables dans votre processeurs tableau:
processeurs var = [lost, // colorblind, pxtorem, styleGuide];
Remarque: daltonien est commenté, ce qui sera expliqué plus tard.
Faites un test rapide pour vérifier que tout fonctionne en exécutant la commande gulp css puis en vérifiant qu'un nouveau fichier “style.css” est apparu dans le dossier “dest” de votre projet.
Si vous utilisez Grunt, mettez à jour le processeurs objet, qui est imbriqué sous le options objet, à ce qui suit:
processeurs: [require ('lost') (), // require ('postcss-colorblind') (), require ('postcss-pxtorem') (), require ('postcss-style-guide') ()]Remarque: require ('postcss-colorblind') (), est commenté, ce qui sera expliqué plus tard.
Faites un test rapide pour vérifier que tout fonctionne en exécutant la commande grunt postcss puis en vérifiant qu'un nouveau fichier “style.css” est apparu dans le dossier “dest” de votre projet.
Lost est un système de génération de grille entièrement basé sur PostCSS de Cory Simmons, le créateur de Jeet, un autre système de grille très réussi écrit en Stylus. Il possède une longue liste de fonctionnalités impressionnantes, mais son déploiement est très simple..
Commencez par créer un fichier nommé «index.html» dans votre dossier «dest». Nous allons mettre en place une grille de base dans ce fichier. Ajoutez-y le code suivant:
Zone principale
Barre latérale
Ajoutez ensuite ce code à votre "src / style.css" pour configurer une grille de base à deux colonnes, avec une colonne de zone principale et une colonne de barre latérale:
@la gouttière 1,618rem; .row centre perdu: 75rem; .main lost-column: 3/5; .sidebar lost-column: 2/5;
Décomposons ce que nous avons fait ici.
Premièrement, nous utilisons un @perdu at-rule pour définir notre propre valeur pour l’une des options de Lost: la taille de la gouttière. Par défaut, les gouttières (espaces entre les colonnes) sont 30px. J'aime toujours utiliser 1.618rem pour l'espacement dans les conceptions, j'ai donc défini cela comme étant la nouvelle taille de gouttière avec la ligne @la gouttière 1,618rem;.
Ensuite, nous avons configuré un .rangée classe que nous allons envelopper nos colonnes. Cela nécessite seulement d'utiliser la propriété centre perdu et en spécifiant une largeur pour la ligne. Le plugin se chargera de configurer un largeur maximale sur la classe, en la centrant et en la nettoyant.
Après cela, dans le .principale et .barre latérale classes, nous avons créé nos colonnes.
Lost ne vous empêche pas de travailler avec un nombre prédéterminé de colonnes, par exemple douze ou seize; vous pouvez avoir autant de colonnes que vous voulez. Les largeurs de colonne sont déterminées à l'aide de la propriété colonne perdue et définir une fraction comme valeur. Dans notre code le .principale la classe utilise un paramètre de 3/5 il faudra donc 3 colonnes sur 5, et le .barre latérale les usages 2/5 il faudra donc 2 ou 5 colonnes.
Compilez votre fichier et dans votre fichier «dest / style.css», vous devriez maintenant voir ce code:
.rangée * zoom: 1; largeur maximale: 75rem; marge gauche: auto; marge droite: auto; .row: before content: "; display: table; .row: after content:"; affichage: table; clarifier les deux; .main width: calc (99.99% * 3/5 - (1.618rem - 1.618rem * 3/5)); .main: nth-child (n) float: left; marge droite: 1.618rem; clair: aucun; .main: dernier-enfant marge-droite: 0; .main: nième enfant (5n) marge droite: 0; .main: nième enfant (5n + 1) clair: gauche; .sidebar width: calc (99,99% * 2/5 - (1,618rem - 1,618rem * 2/5)); .sidebar: nth-child (n) float: left; marge droite: 1.618rem; clair: aucun; .sidebar: last-child margin-right: 0; .sidebar: nth-child (5n) marge-droite: 0; .sidebar: nth-child (5n + 1) clear: left;
Et lorsqu'il est visualisé dans un navigateur, votre fichier «dest / index.html» devrait maintenant présenter une disposition en deux colonnes, comme ceci:
Il est un peu difficile de voir exactement ce qui se passe avec notre grille ici, raison pour laquelle Lost fournit également lost-utility: edit; mettre en évidence votre grille pour une visualisation facile pendant le développement.
Ajoutez ceci à chacune des classes que nous avons créées jusqu'à présent:
.rangée centre-perdu: 75rem; lost-utility: edit; .main lost-column: 3/5; lost-utility: edit; .sidebar lost-column: 2/5; lost-utility: edit;
Maintenant, lorsque vous recompilez et actualisez votre page, vous devriez voir votre grille surlignée comme ceci:
Rendons cela un peu plus clair pour le revoir avec un style supplémentaire (ce qui nous aidera également pour les sections suivantes de ce tutoriel). Mettez à jour votre fichier «src / style.css» avec les éléments suivants, en ajoutant quelques extras tels que le rembourrage dans les colonnes et quelques couleurs d'arrière-plan et de texte:
@la gouttière 1,618rem; * box-sizing: border-box; html, body height: 100%; marge: 0; famille de polices: "Open Sans"; html padding: 0; body padding: 1.618rem; arrière-plan: # 16a085; .row centre-perdu: 75rem; .main, .sidebar padding: 1.618rem; hauteur min .: 500px; .main lost-column: 3/5; fond blanc; couleur: # 232323; .sidebar lost-column: 2/5; arrière-plan: # 2c3e50; Couleur blanche;
Compilez à nouveau votre CSS et rechargez votre page. Vous devriez maintenant avoir une disposition classique en deux colonnes comme celle-ci:
Ce que nous avons couvert ici efface la surface de ce qui peut être fait avec Lost, alors assurez-vous de lire toutes les autres fonctionnalités à l'adresse suivante: https://github.com/corysimmons/lost
Le daltonisme affecte une plus grande partie des visiteurs de votre site que vous ne le pensez probablement. Par exemple, le type le plus courant de daltonisme est la deutéranomalie, touchant 6% des hommes et 0,4% des femmes. Pour mettre cela en perspective, on estime que IE9 et IE10 combinés sont utilisés par environ 4% du trafic Web total. On pourrait penser que si nous pouvons consacrer beaucoup de temps à la prise en charge de navigateurs spécifiques, nous pouvons consacrer un temps égal à la prise en charge des utilisateurs.
Le plugin postcss-colorblind de Brian Holt aide énormément à évaluer dans quelle mesure un dessin est accessible aux personnes souffrant de daltonisme, car il vous permet de voir par vous-même à quoi ressemblerait votre jeu de couleurs si vous aviez la même perception visuelle. Il vous permet de générer des versions de votre feuille de style qui simulent huit types différents de daltonisme. Voyons comment vous pouvez l'utiliser.
Nous allons d’abord ajouter quelques couleurs supplémentaires à notre conception jusqu’à présent pour nous aider à voir plus clairement l’effet des différentes feuilles de style que nous sommes sur le point de générer. Nous ajouterons cinq tuiles de style métropolitain en ajoutant le code HTML suivant sous la ligne que nous avons déjà dans notre fichier «dest / index.htm»:
C'est une tuileC'est une tuileC'est une tuileC'est une tuileC'est une tuile
Maintenant, ajoutez le code suivant à votre fichier «src / style.css» pour styler ces tuiles avec cinq couleurs différentes:
.row margin-bottom: 1.618rem; .tile lost-column: 1/5; rembourrage: 3.75rem 1.618rem; text-align: center; taille de la police: 1.25rem; Couleur blanche; .tile: nth de type (1) background: # f39c12; .tile: nth-of-type (2) background: # c0392b; .tile: nth-of-type (3) background: # 8e44ad; .tile: nth-de-type (4) background: # 2980b9; .tile: nth-of-type (5) background: # d35400;
Après la compilation, votre fichier devrait maintenant ressembler à ceci dans un navigateur:
Vous avez peut-être remarqué que lors de la configuration de notre processeurs tableau plus tôt l'entrée pour daltonien a été commenté. En effet, dès que le plug-in est actif, il applique la simulation daltonien à votre feuille de style. Vous ne souhaitez donc pas l'activer tant que vous n'êtes pas prêt à l'utiliser. Décommentez-le dans le processeurs tableau maintenant.
Pour simuler l’un des huit types de daltonisme, passez l’option méthode pour ce plugin dans votre Gulpfile ou Gruntfile, avec le nom du type de daltonisme que vous voulez vérifier.
Par exemple, pour simuler une deutéranomalie, définissez cette option:
/ * Gulpfile * / colorblind (méthode: 'deutéranomalie'), / * Gruntfile * / require ('postcss-colorblind') (méthode: 'deutéranomalie')Maintenant, recompilez votre feuille de style et actualisez votre page pour afficher votre conception comme le fait une personne atteinte de deutéranomalie:
Vous remarquerez que les couleurs sont remarquablement différentes. Une personne atteinte de deutéranomalie voit le rouge et le vert différemment. Ainsi, vous remarquerez que le bleu est presque identique, les rouges et les verts sont assez différents..
Pour visualiser la protanopie, définissez cette option:
/ * Gulpfile * / colorblind (méthode: 'protanopia'), / * Gruntfile * / require ('postcss-colorblind') (méthode: 'protanopia')Recompilez votre feuille de style et vous verrez maintenant ceci:
Une personne atteinte de protanopie ne voit essentiellement pas le rouge, et voit le vert différemment. Vous remarquerez à nouveau que les bleus puissants ne sont pas trop affectés, mais que le violet est devenu bleu pur et que les couleurs restantes sont devenues des variations des mêmes couleurs brun jaunâtre. Il est devenu très difficile de distinguer les deux carreaux de couleur rouge et orange.
Cette capacité à générer tous les différents types de simulations daltoniens est incroyablement perspicace et nous aide à nous assurer que les schémas de couleurs que nous avons choisis ne reposent pas sur la perception d'une teinte particulière et sont donc accessibles à tous..
Pour en savoir plus sur postcss-colorblind, rendez-vous sur: https://github.com/btholt/postcss-colorblind
Dans presque tous les modèles, il existe de très bonnes raisons pour rem unité à jouer un rôle de premier plan. Cependant, il est difficile de penser à rem unités, et beaucoup plus facile de penser en px unités lors de la création de mises en page. Le plugin postcss-pxtorem aide à ce speedbump en convertissant automatiquement px unités à rem des unités.
Le plugin utilise une liste blanche de propriétés auxquelles il s’applique, donc par défaut px les unités seront converties en rem lorsqu'il est utilisé sur:
Vous pouvez ajouter des propriétés supplémentaires à cette liste blanche en définissant une prop_white_list option. Mettez à jour votre fichier Gulpfile ou Gruntfile pour ajouter le largeur propriété comme celle-ci:
/ * Gulpfile * / pxtorem (prop_white_list: ['width', 'font', 'font-size', 'line-height', 'letter-espacement']), / * Gruntfile * / require ('postcss- pxtorem ') (prop_white_list: [' width ',' font ',' font-size ',' line-height ',' letter-spacing ']),Ajoutez maintenant le code suivant à votre fichier «src / style.css» afin que nous puissions tester le processus de conversion:
.convert_this width: 500px; taille de police: 18px;
Compilez votre fichier et dans votre fichier «dest / style.css», vous devriez maintenant voir le résultat rem valeurs:
.convert_this width: 31.25rem; taille de police: 1.125rem;
Pour en savoir plus sur postcss-pxtorem, rendez-vous sur: https://github.com/cuth/postcss-pxtorem
Si vous vous adressez à un public international, vous devrez peut-être prendre en charge les scripts lus de droite à gauche plutôt que de gauche à droite, tels que l'arabe et l'hébreu, par exemple. Lorsque l'orientation du script est inversée, la mise en page de votre site doit l'être également, de sorte que la conception complète ait un sens pour ceux qui regardent d'abord le côté droit de l'écran..
Le plug-in rtlcss de Mohammad Younes facilite beaucoup le processus de création d'une disposition de droite à gauche, car il peut automatiquement numériser votre feuille de style et convertir son orientation, en remplaçant le mot "gauche" par "droite" et inversement..
Ce plugin fonctionne en fait un peu différemment des autres plugins PostCSS, en ce sens que nous ne pouvons pas l'ajouter à notre processeurs tableau. Au lieu de cela, lors de la configuration de notre projet, nous avons installé les plugins Gulp et Grunt pour rtlcss, et nous allons configurer des tâches distinctes pour l'exécuter..
Si vous utilisez Gulp, ajoutez ce code à votre fichier Gulp:
gulp.task ('rtl', function () return gulp.src ('./ dest / style.css') .pipe (rtlcss ()) .pipe (renommer (suffixe: '-rtl')). pipe (gulp.dest ('./ dest')););Si vous utilisez Grunt, ajoutez cette ligne après votre grunt.loadNpmTasks ligne:
grunt.loadNpmTasks ('grunt-rtlcss');Puis ajoutez une virgule , après votre postcss tâche, et coller dans cette nouvelle rtlcss tâche:
rtlcss: 'default': dest: 'dest / style-rtl.css', src: 'dest / style.css'
Maintenant, si vous utilisez Gulp, lancez la commande avaler rtl, et si vous utilisez Grunt, lancez la commande grunt rtlcss générer une feuille de style de droite à gauche nommée «style-rtl.css» dans votre dossier «dest».
Modifiez votre fichier «dest / index.html» pour charger «style-rtl.css» au lieu de «style.css», actualisez votre site et vous devriez voir que votre mise en page a été retournée:
Vous remarquerez que le texte est toujours aligné, mais vous pouvez facilement y remédier en ajoutant simplement text-align: left; dans votre feuille de style par défaut, que rtlcss convertira en text-align: right;.
En savoir plus sur rtlcss et ses homologues Gulp et Grunt à:
Le plugin postcss-style-guide est un outil fantastique créé par Masaaki Morishita. Il vous permet de générer automatiquement un guide de style basé sur votre feuille de style. Tout ce que vous avez à faire est d’ajouter des commentaires à votre CSS, et ces commentaires seront analysés en tant que Markdown et utilisés pour remplir votre guide de style..
La première chose à faire est de configurer quelques options pour notre guide de style. Nous allons définir le nom de notre projet afin qu'il puisse être affiché dans l'en-tête du guide de style, et nous allons également utiliser un thème personnalisé nommé 1column.
Pour installer le thème personnalisé que nous allons utiliser dans votre projet, exécutez la commande suivante:
npm installer psg-theme-1column --save-dev
Maintenant, mettez à jour votre Gulpfile ou Gruntfile pour passer un prénom et thème options comme suit:
/ * Gulpfile * / styleGuide (nom: 'Guide de style automatique', thème: '1 colonne') / * Gruntfile * / require ('postcss-style-guide') (nom: 'Guide de style automatique', thème: '1column')La façon dont postcss-styleguide fonctionne consiste à rechercher vos commentaires dans votre feuille de style et à transformer chacun de ceux-ci en une entrée de styleguide. Il supposera que tout commentaire concerne le CSS qui le suit, jusqu'à un autre commentaire ou jusqu'à la fin du document..
Pour cette raison, tout CSS que vous souhaitez mettre en valeur dans votre guide de style doit être placé au bas de votre feuille de style. Nous allons avoir nos carreaux de couleur apparaissent dans le guide de style, ainsi qu'un h1 élément, donc nous aurons besoin de deux à la fin de notre document.
Commencez par déplacer toutes les classes qui affectent nos carreaux vers le bas de votre feuille de style; c'est le .tuile classe et les cinq .mosaïque: n-de-type () modes. Ensuite, ajoutez également un peu de code pour contrôler h1 éléments de sorte que le bas de votre feuille de style ressemble à ceci (le .mosaïque: n-de-type () les styles ne sont pas affichés pour économiser de l'espace):
h1 taille de la police: 42px; .tile lost-column: 1/5; rembourrage: 3.75rem 1.618rem; text-align: center; taille de la police: 1.25rem; Couleur blanche;
Nous pouvons maintenant ajouter des commentaires pour décrire ces styles. Tout code HTML ajouté à ces commentaires sera rendu sous forme de code HTML dans le guide de style, et le code CSS qui suit un commentaire apparaîtra dans une zone d'affichage..
Ajoutez des commentaires à votre feuille de style décrivant le h1 le style et le .tuile classe, et en incluant quelques exemples html, vous vous retrouvez ainsi:
/ * C'est le style h1Titre 1
* / h1 taille de la police: 42px; / * Ceux-ci utilisent la classe .tile* / .tile lost-column: 1/5; rembourrage: 3.75rem 1.618rem; text-align: center; taille de la police: 1.25rem; Couleur blanche;C'est une tuileC'est une tuileC'est une tuileC'est une tuileC'est une tuile
Maintenant, compilez votre feuille de style, regardez dans le dossier racine de votre projet et ouvrez le fichier “styleguide.html” que vous trouverez dans un navigateur:
Hey presto, guide de style instantané!
Pour le moment, cela semble un peu génial car il a repris la couleur de fond du corps vert de notre feuille de style. Ce que nous voulons, c'est que notre contenu soit sur un fond blanc, et nous pouvons obtenir le guide de style pour extraire un autre code de notre feuille de style afin que cela se produise..
La zone centrale de ce modèle styleguide utilise un section élément, donc au dessus de le commentaire décrivant votre h1 élément, ajoutez ce code:
section padding: 1rem; fond blanc;
Recompilez votre code, actualisez votre guide de style et vous verrez qu'il utilise maintenant le style que nous venons d'ajouter à section éléments et ressemble à ceci:
Là, beaucoup mieux.
En savoir plus sur postcss-style-guide à l'adresse: https://github.com/morishitter/postcss-style-guide
Résumant tout ce que nous avons couvert ci-dessus:
px unités, mais les ont automatiquement convertis en rem unités en cours de traitement.Lors de la prochaine et dernière installation de cette plongée profonde PostCSS, vous apprendrez à exploiter l'un des plus grands avantages offerts par PostCSS; cela étant la possibilité de l'utiliser pour créer tout type de fonctionnalité que vous souhaitez.
Vous apprendrez à créer votre propre plugin de base et à partir de là, espérons-le, à créer encore plus de plugins pour tous les besoins futurs..
Je te vois dans le dernier tutoriel!
