Share
In dieser ganzen Serie haben wir viele verschiedene Kategorien von PostCSS-Plugins durchlaufen, die alle möglichen Vorteile für Ihre CSS-Entwicklung bieten. Aber einige der besten PostCSS-Plugins passen nicht in die Kategorien, die wir in unseren vorherigen Serieneinträgen behandelt haben.
In diesem Tutorial lernen Sie fünf dieser "verschiedenen Leckereien". Wir behandeln:
Lass uns anfangen!
Wie immer müssen Sie als Erstes Ihr Projekt einrichten, um entweder Gulp oder Grunt zu verwenden, je nach Ihren Vorlieben. Wenn Sie für das eine oder das andere nicht bereits eine Präferenz haben, empfehle ich die Verwendung von Gulp, da Sie weniger Code benötigen, um die gleichen Ziele zu erreichen, so dass Sie mit dem Arbeiten ein bisschen einfacher sein sollten.
Wie Sie Gulp- oder Grunt-Projekte für PostCSS einrichten, erfahren Sie in den vorherigen Tutorials
beziehungsweise.
Wenn Sie Ihr Projekt jedoch nicht manuell einrichten möchten, können Sie die an dieses Tutorial angehängten Quelldateien herunterladen und entweder das bereitgestellte Gulp- oder Grunt-Starterprojekt in einen leeren Projektordner extrahieren. Führen Sie dann den Befehl mit einer Terminal- oder Eingabeaufforderung auf den Ordner aus npm installieren.
Nun müssen wir fünf Plugins in Ihr Projekt installieren. Unabhängig davon, ob Sie Gulp oder Grunt verwenden, führen Sie den folgenden Befehl in Ihrem Projektordner aus, um die verwendeten Plugins zu installieren:
npm install verloren postcss-colorblind postcss-pxtorem postcss-style-guide --save-dev
Neben diesen fünf verwenden wir auch rtlcss, aber da es ein wenig anders funktioniert als andere PostCSS-Plugins, werden wir es über die entsprechenden Gulp- oder Grunt-Plugins verwenden.
Wenn Sie Gulp verwenden, installieren Sie gulp-rtlcss mit dem Befehl:
npm install gulp-rtlcss gulp-umbenennen --save-dev
Und wenn Sie Grunt verwenden, installieren Sie Grunt-rtlcss mit dem Befehl:
npm install grunt-rtlcss --save-dev
Nun können wir die Plugins in Ihr Projekt laden.
Wenn Sie Gulp verwenden, fügen Sie diese Variablen unter den bereits in der Datei vorhandenen Variablen hinzu:
Accentsconagua
var lost = required ('lost'); var colorblind = required ('postcss-colorblind'); var pxtorem = required ('postcss-pxtorem'); var styleGuide = required ('postcss-style-guide'); var rtlcss = required ('gulp-rtlcss'); var umbenennen = erfordern ('gulp-umbenennen');Fügen Sie nun jeden dieser neuen Variablennamen in Ihre hinzu Prozessoren Array:
var-Prozessoren = [verloren, // Farbenblind, Pxtorem, StyleGuide];
Hinweis: farbenblind ist auskommentiert, was später erläutert wird.
Führen Sie einen kurzen Test durch, indem Sie den Befehl ausführen Schluck Css Vergewissern Sie sich, dass eine neue Datei „style.css“ im Ordner „dest“ Ihres Projekts angezeigt wurde.
Wenn Sie Grunt verwenden, aktualisieren Sie die Prozessoren Objekt, das unter dem verschachtelt ist Optionen Objekt zu Folgendem:
Prozessoren: [Requise ('lost') (), // Required ('Postcss-Colorblind') (), Required ('Postcss-Pxtorem') (), Required ('Postcss-Style-Guide') ()]Hinweis: erfordern ('postcss-colorblind') (), ist auskommentiert, was später erläutert wird.
Führen Sie einen kurzen Test durch, indem Sie den Befehl ausführen grunzen postcss Vergewissern Sie sich, dass eine neue Datei „style.css“ im Ordner „dest“ Ihres Projekts angezeigt wurde.
Lost ist ein vollständig auf PostCSS basierendes Grid-Generierungssystem von Cory Simmons, dem Entwickler von Jeet, einem weiteren sehr erfolgreichen Grid-System, das in Stylus geschrieben wurde. Es verfügt über eine lange Liste beeindruckender Funktionen, die Bereitstellung ist jedoch sehr unkompliziert.
Erstellen Sie zunächst eine Datei mit dem Namen "index.html" in Ihrem "dest" -Ordner. Wir werden in dieser Datei ein grundlegendes Rasterlayout einrichten. Fügen Sie den folgenden Code hinzu:
Hauptbereich
Seitenleiste
Fügen Sie dann diesen Code zu Ihrer "src / style.css" hinzu, um ein grundlegendes zweispaltiges Rasterlayout mit einer Hauptspalten- und Seitenleisten-Spalte einzurichten:
@Rostrinne 1.618rem; .row verlorenes Zentrum: 75rem; .main verlorene Spalte: 3/5; .sidebar verlorene Spalte: 2/5;
Lassen Sie uns zusammenbrechen, was wir hier gemacht haben.
Zuerst haben wir ein @hat verloren at-rule, um unseren eigenen Wert für eine von Losts Optionen festzulegen: Rinnengröße. Standardmäßig sind Zwischenstege (Lücken zwischen Spalten) 30px. Ich benutze immer gerne 1.618rem für Abstände in Designs, also habe ich die neue Rinnengröße mit der Linie festgelegt @Rostrinne 1.618rem;.
Als nächstes haben wir ein eingerichtet .Reihe Klasse, die wir um unsere Spalten wickeln. Dies erfordert nur die Verwendung der Eigenschaft verlorenes Zentrum und Festlegen einer Breite für die Zeile. Das Plugin sorgt für die Einstellung a maximale Breite auf die Klasse zentrieren und löschen.
Danach im .Main und .Seitenleiste Klassen haben wir unsere Spalten erstellt.
Lost beschränkt Sie nicht darauf, mit einer vorgegebenen Anzahl von Spalten wie zwölf oder sechzehn zu arbeiten. Sie können eine beliebige Anzahl von Spalten haben. Spaltenbreiten werden mithilfe der Eigenschaft bestimmt verlorene Spalte und einen Bruch als Wert einstellen. In unserem Code die .Main Klasse verwendet eine Einstellung von 3/5 es wird also 3 von 5 Spalten und die .Seitenleiste Verwendet 2/5 Es dauert also 2 von 5 Spalten.
Kompilieren Sie Ihre Datei und in Ihrer "dest / style.css" -Datei sollten Sie jetzt diesen Code sehen:
.Zeile * Zoom: 1; Max-Breite: 75rem; Rand links: auto; Rand rechts: auto; .row: before content: "; display: table; .row: after content:"; Anzeige: Tisch; Lösche beide; .Hauptbreite: berechnet (99,99% * 3/5 - (1.618rem - 1.618rem * 3/5)); .main: nth-child (n) float: left; Rand rechts: 1.618rem; klar: keine; .main: last-child margin-right: 0; .main: nth-child (5n) margin-right: 0; .main: nth-child (5n + 1) clear: left; .Sidebar Breite: berechnet (99,99% * 2/5 - (1.618rem - 1.618rem * 2/5)); .sidebar: nth-child (n) float: left; Rand rechts: 1.618rem; klar: keine; .sidebar: last-child margin-right: 0; .sidebar: nth-child (5n) margin-right: 0; .sidebar: n-te Kind (5n + 1) clear: left;
Wenn Sie in einem Browser angezeigt werden, sollte Ihre "dest / index.html" -Datei nun ein zweispaltiges Layout wie das folgende aufweisen:
Es ist ein bisschen schwer zu sehen, was genau hier mit unserem Grid vor sich geht, weshalb es auch Lost gibt Lost-Utility: bearbeiten; um Ihr Raster für eine einfache Visualisierung während der Entwicklung hervorzuheben.
Fügen Sie dies zu allen Klassen hinzu, die wir bisher erstellt haben:
.Reihe verlorenes Zentrum: 75rem; Lost-Utility: bearbeiten; .main verlorene Spalte: 3/5; Lost-Utility: bearbeiten; .sidebar verlorene Spalte: 2/5; Lost-Utility: bearbeiten;
Wenn Sie jetzt Ihre Seite neu kompilieren und aktualisieren, sollte Ihr Raster folgendermaßen hervorgehoben sein:
Lassen Sie uns das alles etwas klarer machen, um es mit etwas mehr Styling wieder zu sehen (was uns auch in späteren Abschnitten in diesem Tutorial helfen wird). Aktualisieren Sie Ihre Datei "src / style.css" wie folgt: Fügen Sie einige Extras hinzu, z. B. Auffüllen in den Spalten sowie einige Hintergrund- und Textfarben:
@Rostrinne 1.618rem; * box-size: border-box; html, Körper Höhe: 100%; Marge: 0; Schriftfamilie: "Open Sans"; html padding: 0; body padding: 1.618rem; Hintergrund: # 16a085; .row verlorenes Zentrum: 75rem; .main, .sidebar padding: 1.618rem; min-Höhe: 500px; .main verlorene Spalte: 3/5; Hintergrund: weiß; Farbe: # 232323; .sidebar verlorene Spalte: 2/5; Hintergrund: # 2c3e50; Farbe weiß;
Kompilieren Sie Ihr CSS erneut und laden Sie Ihre Seite neu. Jetzt sollten Sie ein klassisches zweispaltiges Layout haben:
Was wir hier besprochen haben, greift nur die Oberfläche dessen, was mit Lost möglich ist, also lesen Sie auf jeden Fall alle anderen Funktionen unter: https://github.com/corysimmons/lost
Farbblindheit wirkt sich auf einen größeren Teil der Besucher Ihrer Website aus, als Sie vielleicht ahnen. Beispielsweise ist die häufigste Form der Farbenblindheit die Deuteranomalie, die 6% aller Männer und 0,4% der Frauen betrifft. Um dies in die richtige Perspektive zu bringen, wird geschätzt, dass IE9 und IE10 zusammen von rund 4% des gesamten Internetverkehrs genutzt werden. Man könnte sagen, dass wir, wenn wir einen erheblichen Zeitaufwand in die Unterstützung bestimmter Browser investieren können, gleich viel Zeit in die Unterstützung von Menschen investieren können.
Das Postcss-Colorblind-Plugin von Brian Holt hilft unermesslich bei der Beurteilung, wie zugänglich ein Design für Menschen mit verschiedenen Formen der Farbenblindheit ist, da Sie selbst sehen können, wie Ihre Farbschemata aussehen würden, wenn Sie dieselbe visuelle Wahrnehmung hätten. Sie können damit Versionen Ihres Stylesheets generieren, die acht verschiedene Arten von Farbenblindheit simulieren. Mal sehen, wie du es benutzen kannst.
Zunächst fügen wir unserem Design einige zusätzliche Farben hinzu, damit wir die Auswirkungen der verschiedenen Stylesheets, die wir erzeugen, deutlicher erkennen können. Wir fügen fünf "Metro-Style" -Felder hinzu, indem Sie die folgende HTML-Datei unterhalb der Zeile hinzufügen, die wir bereits in unserer Datei "dest / index.htm" haben:
Dies ist eine FlieseDies ist eine FlieseDies ist eine FlieseDies ist eine FlieseDies ist eine Fliese
Fügen Sie nun der Datei "src / style.css" den folgenden Code hinzu, um diese Kacheln mit fünf verschiedenen Farben zu gestalten:
.Zeile Rand unten: 1.618rem; .tile verlorene Spalte: 1/5; Polsterung: 3.75rem 1.618rem; Text ausrichten: Mitte; Schriftgröße: 1.25rem; Farbe weiß; .tile: nth-of-type (1) background: # f39c12; .tile: nth-of-type (2) background: # c0392b; .tile: nth-of-type (3) background: # 8e44ad; .tile: nth-of-type (4) Hintergrund: # 2980b9; .tile: nth-of-type (5) background: # d35400;
Nach dem Kompilieren sollte Ihre Datei jetzt in einem Browser so aussehen:
Sie haben das vielleicht schon bemerkt, als wir unser System eingerichtet haben Prozessoren Array früher der Eintrag für farbenblind wurde auskommentiert. Das heißt, sobald das Plugin aktiv ist, wird die Farbenblend-Simulation auf Ihr Stylesheet angewendet, sodass Sie es erst aktivieren möchten, wenn Sie es verwenden können. Kommentiere es in der Prozessoren Array jetzt.
Um eine der acht Arten von Farbenblindheit zu simulieren, übergeben Sie die Option Methode für dieses Plugin in Ihrer Gulpfile oder Gruntfile zusammen mit dem Namen der Art der Farbenblindheit, die Sie überprüfen möchten.
Um beispielsweise eine Deuteranomalie zu simulieren, setzen Sie diese Option:
/ * Gulpfile * / colorblind (method: 'deuteranomaly'), / * gruntfile * / required ('postcss-colorblind') (method: 'deuteranomaly')Kompilieren Sie nun Ihr Stylesheet neu und aktualisieren Sie Ihre Seite. Sie sehen Ihr Design als Person mit Deuteranomalie:
Sie werden feststellen, dass die Farben deutlich anders aussehen. Eine Person mit Deuteranomalie sieht Rot und Grün anders. Wenn Sie also feststellen, dass das Blau fast gleich ist, sind Rot und Grün recht unterschiedlich.
Um die Protanopie zu visualisieren, setzen Sie diese Option:
/ * Gulpfile * / colorblind (method: 'protanopia'), / * Gruntfile * / required ('postcss-colorblind') (method: 'protanopia')Kompilieren Sie Ihr Stylesheet neu und Sie sehen Folgendes:
Eine Person mit Protanopie sieht im Wesentlichen überhaupt kein Rot und sieht Grün anders. Sie werden wieder bemerken, dass die kräftigen Blues nicht zu stark beeinflusst werden, aber Purpur ist zu reinem Blau geworden, und die übrigen Farben sind zu Variationen derselben gelblich-bräunlichen Farben geworden. Es ist sehr schwierig geworden, die roten und zwei orangefarbenen Kacheln voneinander zu unterscheiden.
Diese Möglichkeit, alle verschiedenen Arten von Farbenblind-Simulationen zu generieren, ist unglaublich aufschlussreich und hilft uns sicherzustellen, dass die von uns gewählten Farbschemata nicht auf der Wahrnehmung eines bestimmten Farbtons beruhen und somit für alle zugänglich sind.
Weitere Informationen zu postcss-colorblind finden Sie unter: https://github.com/btholt/postcss-colorblind
In fast allen Ausführungen gibt es sehr gute Gründe für die rem Einheit, um eine herausragende Rolle zu spielen. Es ist jedoch schwer zu denken rem Einheiten und viel einfacher zu denken px Einheiten beim Erstellen von Layouts. Das postcss-pxtorem-Plugin hilft bei diesem Speedbump, indem es automatisch konvertiert px Einheiten zu rem Einheiten.
Das Plugin verwendet eine weiße Liste von Eigenschaften, für die es gilt, also standardmäßig px Einheiten werden in konvertiert rem wenn verwendet auf:
Sie können dieser Whitelist zusätzliche Eigenschaften hinzufügen, indem Sie a setzen prop_white_list Möglichkeit. Aktualisieren Sie Ihre Gulpfile oder Gruntfile, um die Datei hinzuzufügen Breite Eigenschaft wie so:
/ * Gulpfile * / pxtorem (prop_white_list: ['width', 'font', 'font-size', 'Zeilenhöhe', 'letter-spacing']), / * Gruntfile * / required ('postcss- pxtorem ') (prop_white_list: [' width ',' font ',' font-size ',' Zeilenhöhe ',' Buchstabenabstand ']),Fügen Sie der Datei "src / style.css" nun folgenden Code hinzu, damit wir den Konvertierungsprozess testen können:
.convert_this width: 500px; Schriftgröße: 18px;
Kompilieren Sie Ihre Datei und in Ihrer Datei "dest / style.css" sollten Sie jetzt das Ergebnis sehen rem Werte:
.convert_this width: 31.25rem; Schriftgröße: 1.125rem;
Weitere Informationen zu postcss-pxtorem finden Sie unter: https://github.com/cuth/postcss-pxtorem
Wenn Sie ein globales Publikum ansprechen, müssen Sie möglicherweise Skripts unterstützen, die von rechts nach links und nicht von links nach rechts gelesen werden, z. B. Arabisch und Hebräisch. Wenn die Ausrichtung des Skripts umgedreht wird, sollte auch das Layout Ihrer Website geändert werden, sodass das gesamte Design für diejenigen sinnvoll ist, die zuerst auf die rechte Seite des Bildschirms schauen.
Das rtlcss-Plugin von Mohammad Younes erleichtert das Erstellen eines Layouts von rechts nach links, da es Ihr Stylesheet automatisch scannen und seine Ausrichtung konvertieren kann. Dabei wird das Wort "links" durch "rechts" und umgekehrt ersetzt.
Dieses Plugin funktioniert etwas anders als andere PostCSS Plugins, da wir es nicht zu unseren hinzufügen können Prozessoren Array. Stattdessen haben wir während unseres Projekt-Setups die Gulp- und Grunt-Plugins für rtlcss installiert, und wir werden separate Aufgaben einrichten, um sie auszuführen.
Wenn Sie Gulp verwenden, fügen Sie diesen Code zu Ihrer Gulpfile hinzu:
gulp.task ('rtl', function () return gulp.src ('./ dest / style.css') .pipe (rtlcss ()) .pipe (umbenennen (Suffix: '-rtl')). Pipe (gulp.dest ('./ dest')););Wenn Sie Grunt verwenden, fügen Sie diese Zeile nach dem vorhandenen ein grunt.loadNpmTasks Linie:
grunt.loadNpmTasks ('grunt-rtlcss');Dann fügen Sie ein Komma hinzu , nach ihrem postcss Aufgabe und fügen Sie in diesem neuen RTLCSS Aufgabe:
rtlcss: 'default': dest: 'dest / style-rtl.css', src: 'dest / style.css'
Wenn Sie Gulp jetzt verwenden, führen Sie den Befehl aus Schluck RTL, und wenn Sie Grunt verwenden, führen Sie den Befehl aus grunzen rtlcss um ein Stylesheet von rechts nach links mit dem Namen "style-rtl.css" in Ihrem "dest" -Ordner zu erzeugen.
Bearbeiten Sie Ihre "dest / index.html" -Datei, um "style-rtl.css" anstelle von "style.css" zu laden. Aktualisieren Sie Ihre Site, und Sie sollten sehen, dass Ihr Layout umgedreht wurde:
Sie werden feststellen, dass der Text noch links ausgerichtet ist. Dies kann jedoch durch einfaches Hinzufügen behoben werden Text ausrichten: links; in Ihrem Standard-Stylesheet, in das rtlcss konvertiert wird Textausrichtung: rechts;.
Weitere Informationen zu rtlcss und seinen Kollegen zu Gulp und Grunt finden Sie unter:
Das Postcss-Style-Guide-Plugin ist ein fantastisches Tool, das von Masaaki Morishita erstellt wurde. Sie können einen Styleguide basierend auf Ihrem Stylesheet automatisch generieren. Alles, was Sie tun müssen, ist, einige Kommentare zu Ihrem CSS hinzuzufügen. Diese Kommentare werden als Markdown analysiert und dazu verwendet, Ihren Styleguide aufzufüllen.
Als Erstes konfigurieren wir einige Optionen für unseren Styleguide. Wir werden den Namen unseres Projekts so festlegen, dass es in der Kopfzeile des Styleguides angezeigt werden kann, und wir werden auch ein benutzerdefiniertes Design mit dem Namen 1column verwenden.
Führen Sie den folgenden Befehl aus, um das benutzerdefinierte Design zu installieren, das wir in Ihrem Projekt verwenden werden:
npm install psg-theme-1column --save-dev
Aktualisieren Sie nun Ihre Gulpfile oder Gruntfile, um eine Name und Thema Optionen wie folgt:
/ * Gulpfile * / styleGuide (name: 'Auto Style Guide', Thema: '1column') / * Gruntfile * / required ('postcss-style-guide') (name: 'Auto Style Guide', Thema: '1 Spalte')Postcss-styleguide funktioniert so, dass es nach Kommentaren in Ihrem Stylesheet sucht und jeden gefundenen in einen Styleguide-Eintrag verwandelt. Es wird davon ausgegangen, dass sich jeder Kommentar auf das nachfolgende CSS bezieht, bis hin zu einem anderen Kommentar oder dem Ende des Dokuments.
Aus diesem Grund sollten Sie alle CSS, die Sie in Ihrem styleguide darstellen möchten, an das Ende Ihres Stylesheets verschieben. Wir werden unsere farbigen Kacheln im Styleguide sowie eine h1 Element, also brauchen wir beide am Ende unseres Dokuments.
Beginnen Sie damit, alle Klassen, die unsere Kacheln betreffen, an den unteren Rand Ihres Stylesheets zu verschieben. das ist das .Fliese Klasse und die fünf .tile: nth-of-type () Stile. Dann fügen Sie auch einen kleinen Code zur Kontrolle hinzu h1 Elemente, so dass der untere Teil Ihres Stylesheets so aussieht (das .tile: nth-of-type () Stile werden nicht gezeigt, um Platz zu sparen):
h1 font-size: 42px; .tile verlorene Spalte: 1/5; Polsterung: 3.75rem 1.618rem; Text ausrichten: Mitte; Schriftgröße: 1.25rem; Farbe weiß;
Jetzt können wir einige Kommentare hinzufügen, um diese Stile zu beschreiben. Jede in diesen Kommentaren hinzugefügte HTML-Datei wird im Styleguide als HTML-Datei dargestellt. Das einem Kommentar folgende CSS wird in einem Anzeigefeld angezeigt.
Fügen Sie Ihrem Stylesheet einige Kommentare hinzu, die das beschreiben h1 Stil und die .Fliese Klasse und einige Beispiel-HTML, so dass Sie am Ende mit den folgenden:
/ * Dies ist der h1-StilÜberschrift 1
* / h1 Schriftgröße: 42px; / * Diese verwenden die .tile-Klasse* / .tile verlorene Spalte: 1/5; Polsterung: 3.75rem 1.618rem; Text ausrichten: Mitte; Schriftgröße: 1.25rem; Farbe weiß;Dies ist eine FlieseDies ist eine FlieseDies ist eine FlieseDies ist eine FlieseDies ist eine Fliese
Jetzt kompilieren Sie Ihr Stylesheet, schauen Sie in den Stammordner Ihres Projekts und öffnen Sie die Datei "styleguide.html", die Sie dort in einem Browser finden:
Hey Presto, sofortiger Styleguide!
Im Moment sieht es etwas funky aus, weil es die grüne Hintergrundfarbe von unserem Stylesheet aufgenommen hat. Wir möchten, dass unser Inhalt auf einem weißen Hintergrund angezeigt wird, und wir können den Styleguide dazu bringen, anderen Code aus unserem Stylesheet zu holen, um dies zu ermöglichen.
Der zentrale Bereich dieser Styleguide-Vorlage verwendet a Sektion Element, so über der Kommentar, der Ihre beschreibt h1 Element, fügen Sie diesen Code hinzu:
Abschnitt Polsterung: 1rem; Hintergrund: weiß;
Kompilieren Sie Ihren Code neu, aktualisieren Sie Ihren Styleguide, und Sie werden sehen, dass er jetzt das Styling verwendet, das wir gerade hinzugefügt haben Sektion Elemente und sieht so aus:
Dort viel besser.
Weitere Informationen zum Postcss-Style-Guide finden Sie unter: https://github.com/morishitter/postcss-style-guide
Zusammenfassend alles, was wir oben beschrieben haben:
px Einheiten, aber lassen Sie sie automatisch in konvertieren rem Einheiten während der Verarbeitung.In der nächsten und letzten Installation dieses PostCSS Deep Dive lernen Sie, wie Sie einen der größten Vorteile von PostCSS freischalten können. Dies ist die Fähigkeit, es zu verwenden, um jede Art von Funktionalität zu erstellen, die Sie möchten.
Sie lernen, wie Sie Ihr eigenes grundlegendes Plugin erstellen, und von dieser Basis aus werden Sie hoffentlich viele weitere Plugins für zukünftige Anforderungen erstellen.
Wir sehen uns im letzten Tutorial!
