... |
... |
@@ -118,10
+118,6 @@ |
118 |
118 |
|
119 |
119 |
== Erstellen einer Layout-Vorlage |
120 |
120 |
|
121 |
|
-plugin_theme_config_editor_config_de.png |
122 |
|
-plugin_theme_config_template_settings_1_de.png |
123 |
|
-plugin_theme_config_template_settings_2_de.png |
124 |
|
- |
125 |
125 |
Eine Layout-Vorlage besteht aus zwei Teilen. Zum einen muss eine {{smallcaps}}Scss{{/smallcaps}}-Datei erstellte werden, in der die entsprechenden Layout-Regeln enthalten sind. {{smallcaps}}Scss{{/smallcaps}} kann Variablen enthalten, deren Werte später durch den Nutzer festgelegt werden, wenn dieser ein neues Layout erstellt. Zum zweiten muss festgelegt werden, welche Variablen editierbar sein sollen und mit welchem Editoren die einzelnen Variablen bearbeitet werden sollen (etwa Texteditor, Pixel-Editor, Farbenwähler, Dateiwähler etc.). Optional können auch noch einige Einstellungen zur Transpilation des {{smallcaps}}Scss{{/smallcaps}} in {{smallcaps}}Css{{/smallcaps}} vorgenommen werden. |
126 |
126 |
|
127 |
127 |
{{figure image="plugin_theme_config_new_template_de.png"}} |
... |
... |
@@ -207,6
+207,10 @@ |
207 |
207 |
|
208 |
208 |
=== Editorkonfiguration |
209 |
209 |
|
|
206 |
+{{figure image="plugin_theme_config_editor_config_de.png"}} |
|
207 |
+ Im ersten Tab auf der rechten Seite kann festgelegt werden, mit welchen Editoren welche {{smallcaps}}Scss{{/smallcaps}}-Variablen bearbeitet werden sollen. Zudem wird hier auch die Reihenfolge der Editoren festgelegt. |
|
208 |
+{{/figure}} |
|
209 |
+ |
210 |
210 |
* Editoren-Typ, Breite, weitere Optionen, mehrspaltig? |
211 |
211 |
|
212 |
212 |
=== Einstellungen |
... |
... |
@@ -216,7
+216,7 @@ |
216 |
216 |
{{/figure}} |
217 |
217 |
|
218 |
218 |
{{figure image="plugin_theme_config_template_settings_2_de.png"}} |
219 |
|
- In den Einstellungen kann zudem weiter festgelegt werden, ob etwa Browser-Präfix automatisch angefügt werden sollen oder diverse {{smallcaps}}Css{{/smallcaps}}-Features automatisch für ältere Browser kompatibel gemacht werden. |
|
219 |
+ In den Einstellungen kann zudem weiter festgelegt werden, ob etwa [[Vendor-Präfix>>url:https://developer.mozilla.org/en-US/docs/Glossary/Vendor_Prefix]] automatisch angefügt werden sollen oder diverse {{smallcaps}}Css{{/smallcaps}}-Features automatisch für ältere Browser kompatibel gemacht werden. |
220 |
220 |
{{/figure}} |
221 |
221 |
|
222 |
222 |
Im Tab //Einstellungen// im rechten Bereich können einige fortgeschrittene Einstellungen getroffen werden, welche unter anderem beeinflussen, wie genau das {{smallcaps}}Scss{{/smallcaps}} in {{smallcaps}}Css{{/smallcaps}} transpiliert wird. Die Einstellungen gliedern sich in vier Unterbereiche: |
... |
... |
@@ -266,17
+266,22 @@ |
266 |
266 |
Hier können einige Einstellungen für [[postcss>>url:https://github.com/postcss/postcss]] getroffen werden, um das erzeugte {{smallcaps}}Css{{/smallcaps}} nachzubearbeiten. |
267 |
267 |
|
268 |
268 |
; Doppelte {{smallcaps}}Css{{/smallcaps}}-Regeln entfernen |
269 |
|
-: Wenn diese Optiona aktiviert ist, werden doppelte {{smallcaps}}Css{{/smallcaps}}-Regeln entfernt. In der Regel ist dies unproblematisch. Wenn Selektoren sich gegenseitig überschreiben, kann dies in Einzelfällen das Layout beeinflussen. |
270 |
|
-; Unterstützung für Polyfiller für neue {{smallcaps}}Css{{/smallcaps}}-Features aktivieren |
271 |
|
-: Wenn aktiviert, wird das [[postcss-preset-env>>url:https://github.com/csstools/postcss-preset-env]]-Plugin für postcss aktiviert. Damit können aktuelle {{smallcaps}}Css{{/smallcaps}}-Features auch in älteren Browsern genutzt werden. |
|
269 |
+: Wenn diese Option aktiviert ist, werden doppelte {{smallcaps}}Css{{/smallcaps}}-Regeln entfernt. In der Regel ist dies unproblematisch. Wenn Selektoren sich gegenseitig überschreiben, kann dies in Einzelfällen das Layout beeinflussen. |
|
270 |
+; Unterstützung für [[Polyfiller>>url:https://de.wikipedia.org/wiki/Polyfill]] für neue {{smallcaps}}Css{{/smallcaps}}-Features aktivieren |
|
271 |
+: Wenn aktiviert, wird das [[postcss-preset-env>>url:https://github.com/csstools/postcss-preset-env]]-Plugin für postcss aktiviert. Damit können aktuelle {{smallcaps}}Css{{/smallcaps}}-Features auch in älteren Browsern genutzt werden. Ob ein [[Polyfill>>url:https://de.wikipedia.org/wiki/Polyfill]] für ein bestimmtes {{smallcaps}}Css{{/smallcaps}}-Features aktiviert ist, wird von den zu unterstützenden Browsern bestimmt (siehe oben). |
272 |
272 |
; Minimale {{smallcaps}}Css{{/smallcaps}}-Stage für unterstützte Features |
273 |
|
-: Bestimmt die {{smallcaps}}Css{{/smallcaps}}-Stage, die ein {{smallcaps}}Css{{/smallcaps}}-Feature wenigstens haben muss, um durch das [[postcss-preset-env>>url:https://github.com/csstools/postcss-preset-env]]-Plugin potentiell mit einem Pol |
|
273 |
+: Bestimmt die [[{{smallcaps}}Css{{/smallcaps}}-Stage>>url:https://cssdb.org/#staging-process]], die ein {{smallcaps}}Css{{/smallcaps}}-Feature wenigstens haben muss, um durch das [[postcss-preset-env>>url:https://github.com/csstools/postcss-preset-env]]-Plugin potentiell mit einem Polyfill versehen zu werden. |
274 |
274 |
|
275 |
275 |
==== Autoprefixer-Einstellungen ==== |
276 |
276 |
|
|
277 |
+In diesem Abschnitt kann das [[autprefixer>>url:https://github.com/postcss/autoprefixer]]-Plugin für [[postcss>>url:https://github.com/postcss/postcss]] konfiguriert werden. Diese fügt automatisch [[Vendor-Präfixe>>url:https://developer.mozilla.org/en-US/docs/Glossary/Vendor_Prefix]] automatisch hinzu. Welche Präfixe hinzugefügt werden, hängt von den eingestellten Browsern ab (siehe oben). |
|
278 |
+ |
277 |
277 |
; Automatisches Hinzufügen von Präfixen aktivieren |
|
280 |
+: Wenn diese Option aktiviert ist, werden Vendor-Präfixe automatisch hinzugefügt. |
278 |
278 |
; Unbenötigte Präfixe entfernen |
|
282 |
+: Wenn diese Option aktiviert ist, werden unbenötigte Vendor-Präfixe automatisch entfernt. Etwa werden Präfixe für alte Browser entfernt, die nicht mehr unterstützt werden brauchen. |
279 |
279 |
; Präfix für @supports-Regeln hinzufügen |
|
284 |
+: Wenn diese Option aktiviert ist, werdne |
280 |
280 |
; {{smallcaps}}Css{{/smallcaps}} einrücken wenn nicht minifiziert (Visual Cascade) |
281 |
281 |
; Präfixe für Flexbox-Eigenschaften hinzufügen |
282 |
282 |
; Präfixe für Rastereigenschaften (grid) hinzufügen |