Änderungen von Dokument Theme-Konfigurator-Plugin

Von Version < 15.66 >

bearbeitet von awa
am 20.03.2020, 09:39

Auf Version < 15.68 >

bearbeitet von awa
am 20.03.2020, 09:43

< >

Änderungskommentar: Es gibt keinen Kommentar für diese Version

Rohform
Im Layout

Zusammenfassung

Seiteneigenschaften (1 geändert, 0 hinzugefügt, 0 gelöscht)

Details

Seiteneigenschaften

Inhalt

@@ -11,7
          +11,7 @@
  Die Bedienung des Theme-Konfigurators gliedert sich in zwei Abschnitte, die sich jeweils an unterschiedliche Nutzergruppen richten:
  ; Erstellen von Layout-Vorlagen
--: Dies richtet sich an technisch versierte Nutzer, die Vorlagen für Layouts erstellen möchten. In einer Vorlage wird etwa festgelegt, welche Eigenschaften (Farben, Schriftgrößen etc.) bearbeitbar sein sollen. Basierend auf einer Vorlage kann dann ein Layout erstellt werden, in dem jeder Eigenschaft entsprechende Werte zugewiesen werden (Farbe=rot, Schriftgröße=12px etc.). Hierzu sind grundlegende Kenntnisse über {{smallcaps}}Css{{/smallcaps}} und [[{{smallcaps}}Scss{{/smallcaps}}>>url:https://sass-lang.com/]] notwendig. Für Nutzer, die keine Vorlagen erstellen sollen oder dürfen, kann diese Möglichkeit über ein [[Rollenrecht>>doc:Formcycle.UserInterface.UserSettings.Roles]] entzogen werden.
++: Dies richtet sich an technisch versierte Nutzer, die Vorlagen für Layouts erstellen möchten. In einer Vorlage wird etwa festgelegt, welche Eigenschaften (Farben, Schriftgrößen etc.) bearbeitbar sein sollen. Basierend auf einer Vorlage kann dann ein Layout erstellt werden, in dem jeder Eigenschaft entsprechende Werte zugewiesen werden (Farbe=rot, Schriftgröße=12px etc.). Hierzu sind grundlegende Kenntnisse über {{smallcaps}}Css{{/smallcaps}} und [[{{smallcaps}}Scss{{/smallcaps}}>>url:https://sass-lang.com/||target="_blank"]] notwendig. Für Nutzer, die keine Vorlagen erstellen sollen oder dürfen, kann diese Möglichkeit über ein [[Rollenrecht>>doc:Formcycle.UserInterface.UserSettings.Roles]] entzogen werden.
  ; Erstellen von konkreten Layouts
  : Dies richtet sich an gestalterisch versierte Nutzer. Basierend auf einer Vorlage kann ein konkretes Layout erstellt werden. Es ist auch möglich, mehrere Layouts basierend auf einer Vorlage zu erstellen, etwa eine Variation in Rot und eine Variation in Blau. Nachdem ein Layout erstellt wurde, kann es entwender als [[Design (CSS)>>doc:Formcycle.UserInterface.FilesAndTemplates.Design]]-Vorlage für den {{designer/}} oder als {{smallcaps}}Css{{/smallcaps}}-[[Mandantdatei>>doc:Formcycle.UserInterface.FilesAndTemplates.Files]] abgespeichert werden.
@@ -144,7
          +144,7 @@
  Im {{smallcaps}}Scss{{/smallcaps}}-Tab im rechten Bereich kann eine entsprechende {{smallcaps}}Scss{{/smallcaps}}-Datei erstellt werden.
--Es können dabei sogenannte [[{{smallcaps}}Scss{{/smallcaps}}-Variablen>>url:https://sass-lang.com/documentation/variables]] verwendet werden. Der Wert der Variablen wird dann pro Layout entsprechend durch den Nutzer festgelegt. {{smallcaps}}Scss{{/smallcaps}}-Variablen beginnen immer mit einem Dollarzeichen ($) und sollten nicht mit [[{{smallcaps}}Css{{/smallcaps}}-Variablen>>url:https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties]] verwechselt werden.
++Es können dabei sogenannte [[{{smallcaps}}Scss{{/smallcaps}}-Variablen>>url:https://sass-lang.com/documentation/variables||target="_blank"]] verwendet werden. Der Wert der Variablen wird dann pro Layout entsprechend durch den Nutzer festgelegt. {{smallcaps}}Scss{{/smallcaps}}-Variablen beginnen immer mit einem Dollarzeichen ($) und sollten nicht mit [[{{smallcaps}}Css{{/smallcaps}}-Variablen>>url:https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties||target="_blank"]] verwechselt werden.
  Um die [{{smallcaps}}Scss{{/smallcaps}}-Variablen für ein Layout mit Werten zu befüllen, werden die Variablen mit ihren Werten der [{{smallcaps}}Scss{{/smallcaps}}-Datei vorangestellt:
@@ -256,7
          +256,7 @@
  {{/figure}}
  {{figure image="plugin_theme_config_template_settings_2_de.png"}}
--  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.
++  In den Einstellungen kann zudem weiter festgelegt werden, ob etwa [[Vendor-Präfix>>url:https://developer.mozilla.org/en-US/docs/Glossary/Vendor_Prefix||target="_blank"]] automatisch angefügt werden sollen oder diverse {{smallcaps}}Css{{/smallcaps}}-Features automatisch für ältere Browser kompatibel gemacht werden.
  {{/figure}}
  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:
@@ -293,7
          +293,7 @@
  :; NESTED
  :: Im {{smallcaps}}Scss{{/smallcaps}} verschachtelte Regeln Selektoren durch Einrückung im {{smallcaps}}Css{{/smallcaps}} dargestellt.
  ; Zu unterstützende Browser
--: Hier kann festgelegt werden, welche Browser unterstützt werden sollen. Dies hat etwa Auswirkungen darauf, welche {{smallcaps}}Css{{/smallcaps}}-Präfix automatisch hinzugefügt werden. Die Auswahl der Browser geschieht über eine sogenannte Browser-Query, zur Syntax siehe [[github.com/browserslist>>url:https://github.com/browserslist/browserslist#queries]]. Durch Betätigen der Schaltfläche //Browser aufzeigen// kann angezeigt werden, welche Browser letzlich bei einer Query herauskommen.
++: Hier kann festgelegt werden, welche Browser unterstützt werden sollen. Dies hat etwa Auswirkungen darauf, welche {{smallcaps}}Css{{/smallcaps}}-Präfix automatisch hinzugefügt werden. Die Auswahl der Browser geschieht über eine sogenannte Browser-Query, zur Syntax siehe [[github.com/browserslist>>url:https://github.com/browserslist/browserslist#queries||target="_blank"]]. Durch Betätigen der Schaltfläche //Browser aufzeigen// kann angezeigt werden, welche Browser letzlich bei einer Query herauskommen.
  ; Anzahl der Leerzeichen für die Einrückung
  : Falls in der Ausgabe Zeilen eingerückt werden, kann hier festgelegt werden, wieviele Leerzeichen pro Einrückungslevel verwendet werden sollen.
  ; Genaugikeit für nummerische Berechnungen
@@ -303,18
          +303,18 @@
  ==== Postcss-Einstellungen ====
--Hier können einige Einstellungen für [[postcss>>url:https://github.com/postcss/postcss]] getroffen werden, um das erzeugte {{smallcaps}}Css{{/smallcaps}} nachzubearbeiten.
++Hier können einige Einstellungen für [[postcss>>url:https://github.com/postcss/postcss||target="_blank"]] getroffen werden, um das erzeugte {{smallcaps}}Css{{/smallcaps}} nachzubearbeiten.
  ; Doppelte {{smallcaps}}Css{{/smallcaps}}-Regeln entfernen
  : 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.
--; Unterstützung für [[Polyfiller>>url:https://de.wikipedia.org/wiki/Polyfill]] für neue {{smallcaps}}Css{{/smallcaps}}-Features aktivieren
--: 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).
++; Unterstützung für [[Polyfiller>>url:https://de.wikipedia.org/wiki/Polyfill||target="_blank"]] für neue {{smallcaps}}Css{{/smallcaps}}-Features aktivieren
++: Wenn aktiviert, wird das [[postcss-preset-env>>url:https://github.com/csstools/postcss-preset-env||target="_blank"]]-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||target="_blank"]] für ein bestimmtes {{smallcaps}}Css{{/smallcaps}}-Features aktiviert ist, wird von den zu unterstützenden Browsern bestimmt (siehe oben).
  ; Minimale {{smallcaps}}Css{{/smallcaps}}-Stage für unterstützte Features
--: 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.
++: Bestimmt die [[{{smallcaps}}Css{{/smallcaps}}-Stage>>url:https://cssdb.org/#staging-process||target="_blank"]], die ein {{smallcaps}}Css{{/smallcaps}}-Feature wenigstens haben muss, um durch das [[postcss-preset-env>>url:https://github.com/csstools/postcss-preset-env||target="_blank"]]-Plugin potentiell mit einem Polyfill versehen zu werden.
  ==== Autoprefixer-Einstellungen ====
--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).
++In diesem Abschnitt kann das [[autprefixer>>url:https://github.com/postcss/autoprefixer||target="_blank"]]-Plugin für [[postcss>>url:https://github.com/postcss/postcss||target="_blank"]] konfiguriert werden. Diese fügt automatisch [[Vendor-Präfixe>>url:https://developer.mozilla.org/en-US/docs/Glossary/Vendor_Prefix||target="_blank"]] automatisch hinzu. Welche Präfixe hinzugefügt werden, hängt von den eingestellten Browsern ab (siehe oben).
  ; Automatisches Hinzufügen von Präfixen aktivieren
  : Wenn diese Option aktiviert ist, werden Vendor-Präfixe automatisch hinzugefügt.
@@ -321,13
          +321,13 @@
  ; Unbenötigte Präfixe entfernen
  : 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.
  ; Präfix für @supports-Regeln hinzufügen
--: Wenn diese Option aktiviert ist, werden auch Vendor-Präfixe für [[@supports>>url:https://developer.mozilla.org/en-US/docs/Web/CSS/@supports]]-Regeln hinzugefügt.
++: Wenn diese Option aktiviert ist, werden auch Vendor-Präfixe für [[@supports>>url:https://developer.mozilla.org/en-US/docs/Web/CSS/@supports||target="_blank"]]-Regeln hinzugefügt.
  ; {{smallcaps}}Css{{/smallcaps}} einrücken wenn nicht minifiziert (Visual Cascade)
  : Aktiviert die //cascade//-Option von //autprefixer// (Deklarationen am Doppelpunkt ausrichten).
  ; Präfixe für Flexbox-Eigenschaften hinzufügen
--: Wenn diese Option aktiviert ist, werden auch Vendor-Präfixe für [[Flexbox>>url:https://css-tricks.com/snippets/css/a-guide-to-flexbox/]]-Eigenschaften hinzugefügt.
++: Wenn diese Option aktiviert ist, werden auch Vendor-Präfixe für [[Flexbox>>url:https://css-tricks.com/snippets/css/a-guide-to-flexbox/||target="_blank"]]-Eigenschaften hinzugefügt.
  ; Präfixe für Rastereigenschaften (grid) hinzufügen
--: Wenn diese Option aktiviert ist, werden auch Vendor-Präfixe für [[Grid>>url:https://css-tricks.com/snippets/css/complete-guide-grid/]]-Eigenschaften hinzugefügt.
++: Wenn diese Option aktiviert ist, werden auch Vendor-Präfixe für [[Grid>>url:https://css-tricks.com/snippets/css/complete-guide-grid/||target="_blank"]]-Eigenschaften hinzugefügt.
  == Changelog

Änderungen von Dokument Theme-Konfigurator-Plugin

Zusammenfassung

Details

Navigation