Von Version < 15.46 >
bearbeitet von awa
am 20.03.2020, 09:02
Auf Version < 15.40 >
bearbeitet von awa
am 19.03.2020, 17:01
< >
Änderungskommentar: Es gibt keinen Kommentar für diese Version

Zusammenfassung

Details

Seiteneigenschaften
Inhalt
... ... @@ -118,6 +118,10 @@
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 +
121 121  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.
122 122  
123 123  {{figure image="plugin_theme_config_new_template_de.png"}}
... ... @@ -203,34 +203,6 @@
203 203  
204 204  === Editorkonfiguration
205 205  
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 -Im ersten Tab auf der rechten Seite wird festgelegt, welche {{smallcaps}}Css{{/smallcaps}}-Variablen letzlich durch den Nutzer bearbeitet werden können, wenn dieser Layout erstellt, das auf der Vorlage beruht. Für jede Variable wird festgelegt,
211 -
212 -* mit welchem Editor die Variable bearbeitet werden kann (wie etwa Texteditor, Dateieditor, Pixeleditor); und
213 -* an welcher Stelle der Oberfläche der Editor später erscheinen wird.
214 -
215 -Die Konfiguration funktioniert ähnlich zum {{designer /}}:
216 -
217 -* Standardmäßig werden alle Editoren untereinander angeordnet. Über die entsprechende Einstellung (siehe unten um Abschnitt //Einstellungen zur Ansicht//) ist es möglich, Editoren auch nebeneinander anzuordnen. Diese Option sollte mit Bedacht genutz werden, um den Nutzre nicht mit zu vielen Information auf einmal zu überlasten.
218 -* Alle Editoren werden in Fieldsets gruppiert. Dies sorgt für eine klarere Gliederung und erhöht die Lesbarkeit.
219 -
220 -Editoren werden wie folgt hinzugefügt:
221 -
222 -* Wurde eine neue Layout-Vorlage angelegt, gibt es zunächst nur einen Knopf: //Neue Gruppe//. Hiermit wird eine neue Gruppe (Fieldset) angelegt.
223 -* In dieser Gruppe gibt es nur erneut einen Knopf: //Neuer Editor//. Dieser fügt einen neuen Texteditor mit Standardeinstellungen zur Gruppe hinzu.
224 -* Um noch eine neue Gruppe anzulegen, kann auf den {{icon name="plus"/}}-Knopf gedrückt werden. Dieser erscheint, sobald man mit der Maus über den Freiraum zwischen zwei Gruppen fährt (beziehungsweies über den Freiraum überhalb der ersten und unterhalb der letzten Gruppe).
225 -* Um noch einen neuen Editor in einer Gruppe anzulegen, kann auf den {{icon name="plus"/}}-Knopf gedrückt werden. Dieser erscheint, sobald man mit der Maus über den Freiraum zwischen zwei Editoren fährt (beziehungsweies über den Freiraum überhalb des ersten und unterhalb des letzten Editors).
226 -
227 -An jedem Editor sind nun folgende Einstellungen möglich:
228 -
229 -; Variablenname und Anzeigename festlegen
230 -: Für jeden Editor muss festgelegt werden, welche Variable er bearbeitet und welcher Beschreibungstext beim Erstellen eines neuen Layouts angelegt wird. Dazu wird auf den blauen Beschreibungstext oben am Editor geklickt. Es öffnet sich ein Eingabefeld. Hier wird der Variablenname und der Anzeigename eingetragen, getrennt mit einm Doppelpunkt: {{code language="none"}}<variable-name>:<Display Name>{{/code}}. Hinweis: Es kann hier zu keinen Verwechslungen kommen, da {{smallcaps}}Scss{{/smallcaps}}-Variablen keinen Doppelpunkt enthalten dürfen. Der Anzeigename darf Doppelpunkte erhalten, der Variablenname wird durch den ersten Doppeltpunkt abgetrennt.
231 -; Standardwert festlegen
232 -: Um den Standardwert für die Variable festzulegen, kann der Wert direkt über den Editor eingegeben werden.
233 -
234 234  * Editoren-Typ, Breite, weitere Optionen, mehrspaltig?
235 235  
236 236  === Einstellungen
... ... @@ -240,7 +240,7 @@
240 240  {{/figure}}
241 241  
242 242  {{figure image="plugin_theme_config_template_settings_2_de.png"}}
243 - 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.
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.
244 244  {{/figure}}
245 245  
246 246  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:
... ... @@ -290,8 +290,8 @@
290 290  Hier können einige Einstellungen für [[postcss>>url:https://github.com/postcss/postcss]] getroffen werden, um das erzeugte {{smallcaps}}Css{{/smallcaps}} nachzubearbeiten.
291 291  
292 292  ; Doppelte {{smallcaps}}Css{{/smallcaps}}-Regeln entfernen
293 -: 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.
294 -; Unterstützung für [[Polyfiller>>url:https://de.wikipedia.org/wiki/Polyfill]] für neue {{smallcaps}}Css{{/smallcaps}}-Features aktivieren
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>url:https://de.wikipedia.org/wiki/Polyfill]] für neue {{smallcaps}}Css{{/smallcaps}}-Features aktivieren
295 295  : 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).
296 296  ; Minimale {{smallcaps}}Css{{/smallcaps}}-Stage für unterstützte Features
297 297  : 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.
... ... @@ -298,61 +298,11 @@
298 298  
299 299  ==== Autoprefixer-Einstellungen ====
300 300  
301 -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).
302 -
303 303  ; Automatisches Hinzufügen von Präfixen aktivieren
304 -: Wenn diese Option aktiviert ist, werden Vendor-Präfixe automatisch hinzugefügt.
305 305  ; Unbenötigte Präfixe entfernen
306 -: 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.
307 307  ; Präfix für @supports-Regeln hinzufügen
308 -: 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.
309 309  ; {{smallcaps}}Css{{/smallcaps}} einrücken wenn nicht minifiziert (Visual Cascade)
310 -: Aktiviert die //cascade//-Option von //autprefixer// (Deklarationen am Doppelpunkt ausrichten).
311 311  ; Präfixe für Flexbox-Eigenschaften hinzufügen
312 -: 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.
313 313  ; Präfixe für Rastereigenschaften (grid) hinzufügen
314 -: 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.
315 315  
316 316  == Changelog
317 -
318 -=== 0.6.1
319 -
320 -* NPM-Abhängigkeiten aktualisiert, inklusive aktueller Browser-Liste
321 -* Anpassungen an 031-extended.css auf Modern-Theme-SCSS-Vorlage übertragen.
322 -
323 -=== 0.6.0
324 -
325 -* Gebaut gegen FORMCYCLE 6.3.0
326 -* Es kann global eine Theme als globales Modern Theme gewählt werden
327 -* Ein Theme kann sowohl als Mandantdatei als auch auch CSS-Template gespeichert werden. Zudem kann es auch nur als Modern-Theme gespeichert werden.
328 -* Volle Breite für Formularvorschau. Die Auswahl des Formulars für die Vorschau kommt in Overlday-Dialog bei Klick auf das Zahnrad rechts oben.
329 -* Beim Installieren des Plugins wird neben einer Modern-Theme-Editorkonfiguration auch eine Processing-Konfiguration erzeugt, falls diese noch nicht existiert.
330 -* Kleinere Bug-Fixes
331 -
332 -=== 0.5.0
333 -
334 -* Kleine Anpassungen UI
335 -* Für Vorschau-Formular können HTML-Parameter gesetzt werden
336 -* `Disable base theme` und `Disable base theme` sind nun Eigenschaften der Editorkonfiguration
337 -* Neue Eigenschaft `Disable form theme`
338 -* `postcss-discard-duplicates`-Plugin für postcss hinzugefügt
339 -* Bei SCSS-Import-URLs kann an die URL der Parameter `previewOnly` gehangen werden. Die Dateien werden nur für die Vorschau inkludiert, nicht im transpilierten CSS.
340 -* Änderungen der Sytnax bei Import im SCSS. Der Pfad muss eine gültige URI sein: `@import "client/current/file.scss". Zzudem können nun auch `thpc` und `thed`-Dateien direkt importiert werden.
341 -
342 -=== 0.4.0
343 -
344 -* Anpassung Styling & Layout
345 -* Möglichkeit für einspaltige Darstellungen analog zum Designer
346 -
347 -=== 0.3.0
348 -
349 -* Postprocessing / Prefixing für CSS
350 -* Import / Export überarbeitet, Konflikresolution
351 -
352 -=== 0.2.0
353 -
354 -* Unterstützung der Auswahl von mehreren Dateien
355 -
356 -=== 0.1.0
357 -
358 -* Initialer Release. Gebaut gegen V6.1-SNAPSHOT, scheint auch in V6.0 zu funktionieren.
Copyright 2000-2025