Theme configurator plugin - FORMCYCLE Wiki

author	version	line-number	content
1	[[Plugin download>>url:https://customer.formcycle.eu/index.php/apps/files/?dir=/FORMCYCLE%20-%20Plugins%20Customer/plugin-bundle-theme-config&fileid=11565\|\|target="_blank"]] (requires login)
2
3	{{content/}}
4
5	{{figure image="plugin_theme_config_home_en.png" width="600"}}
6	The theme configuratior menu as it appears when this plugin was installed for the first time. By default, a layout template with a corresponding layout for the {{formcycle/}} modern theme is already available.
7	{{/figure}}
8
9	The theme configurator plugin provides you with a user interface for editing various layout settings, such as the font size, color and paddings of a form.
10
11	You should install this plugin as a system plugin, although it is also possible to install it as a client plugin, provided that you do not install different version of this plugin in different clients. This plugin itself requires no additional configuration. Once installed, a new entry //Theme configurator// is added to the main menu at the left-hand side. Please note that you may have to sign out and sign in again.
12
13	The theme configuration plugin can be used by two different groups of users:
14
15	; Create layout templates
16	: This step should be performed by users with the appropriate technical knowledge. A template contains information regarding which properties (colors, font sizes etc.) can be edited and which type editor is used, as well as the implementation of the layout in the form of {{smallcaps}}Css{{/smallcaps}} declarations. Users can then create a layout based on a template and configure a value for each property (color=red, font size=12px etc.). Creating a template requires a working knowledge of {{smallcaps}}Css{{/smallcaps}} and [[{{smallcaps}}Scss{{/smallcaps}}>>url:https://sass-lang.com/\|\|rel="noopener noreferrer" target="_blank"]]. In case you do not want a users to create or modify a template, you can use a [[role permission>>doc:Formcycle.UserInterface.UserSettings.Roles]] to prevent them from doing so.
17
18	; Create layouts
19	: This step should be performed by users with the appropriate knowledge of good design. You can create a layout based on an existing template, and fine-tune the settings it offers, such as colors and font sizes. You can also create multiple layout based on a template, such as a variation of a layout in red, and a variation in green. Once a layout was created, you can save it either as a [[Design (CSS)>>doc:Formcycle.UserInterface.FilesAndTemplates.Design]] template for the {{designer/}}, or as a {{smallcaps}}Css{{/smallcaps}} [[client file>>doc:Formcycle.UserInterface.FilesAndTemplates.Files]].
20
21	When this plugin is installed, a new layout template with a corresponding layout is created automatically. It contains the built-in //modern theme// provided by {{formcycle/}}.
22
23	From a technical point of view, this plugin lets you create {{smallcaps}}Scss{{/smallcaps}} files that may contain {{smallcaps}}Scss{{/smallcaps}} variables and offers a UI with a quick preview feature for assigning a value to each variable.
24
25	== General notes ==
26
27	=== Role permissions ==
28
29	This plugin adds a few new permission to the [[role settings>>doc:Formcycle.UserInterface.UserSettings.Roles]]. This lets you control which users should be able to access the theme configurator and which of these users can additionally create or edit layout templates.
30
31	=== Fullscreen mode ===
32
33	The theme configurator contains many settings and as such, it requires quite a bit of screen space. You can click on the expand icon ({{icon name="compress"/}}) to the top right to switch to fullscreen mode.
34
35	=== Export ===
36
37	To the left you can find a list of available layout templates, along with the created layouts. Hover over an item in that list with the mouse, and a download button ({{icon name="download"/}}) shows up. Click on that button to download that layout or layout template. In case you download a layout template, you can also select the layout to include in the exported {{smallcaps}}Zip{{/smallcaps}} file.
38
39	Furthermore, you can also press the upload button ({{icon name="upload"/}}) in the action bar to the top left. This lets you import a layout or layout template you exported previously. In case this would overwrite any existing layouts or layout templates, a dialog shows and asks you whether you want to overwrite existing items or create a new layout or layout template.
40
41	=== Files ===
42
43	{{figure image="plugin_theme_config_client_files_en.png"}}
44	This plugin saves the created layouts and layout templates as client files. These files are created automatically and should not be edited manually.
45	{{/figure}}
46
47	The layouts and layout templates that you created are saved as [[client files>>doc:Formcycle.UserInterface.FilesAndTemplates.Files]]. You should not edit these files manually. You could, however, download these files and upload them in another {{formcycle/}} system.
48
49	The files that are created plugins may have the following file extensions:
50
51	; .scss
52	: Stands for //Sassy CSS//. These are {{smallcaps}}Scss{{/smallcaps}} files that contain the implementation of a layout.
53	; .thed
54	: Stands for //theme editor (configuration)//. A {{smallcaps}}Json{{/smallcaps}} file that contains the editable properties (variables) of the {{smallcaps}}Scss{{/smallcaps}} file and which editor should be used for each variable. Corresponds to layout template.
55	; .thpc
56	: Stands for //theme processing (configuration)//. A {{smallcaps}}Json{{/smallcaps}} file that contains the values for each configurable propertz (variable). Corresponds to a layout.
57	; .css
58	: Stands for //cascading style sheet//. A {{smallcaps}}Css{{/smallcaps}} file generated from a layout.
59
60	=== Fixing missing or invalid references ===
61
62	{{figure image="plugin_theme_config_error_resolution_en.png"}}
63	In case a configuration file contains invalid values, an appropriate dialog appears with a warning and possible options. In the illustration above, a layout was selected that belongs to a layout template for which the {{smallcaps}}Scss{{/smallcaps}} file is missing. You can either create a new {{smallcaps}}Scss{{/smallcaps}} file or delete the layout. Alternatively you can also abort the process. If you do and you select the layout again, the same dialog will show up unless you have fixed the error in some other way.
64	{{/figure}}
65
66	The layout and layout configuration files reference other files. For example, the layout contains a (soft) reference to the layout file. It is possible for somebody to delete the referenced file. If that happens and you select a layout or layout template with missing references, a dialog shows up. It tells you exactly what is wrong and offers several options to fix it, such as by selecting another layout template or creating a new one.
67
68	== Creating a layout ==
69
70	{{figure image="plugin_theme_config_layout_settings_en.png"}}
71	Click on a layout in the list to the left to edit it. In the section to the right you can see all properties offered by the layout template. Change any property and the preview area in the middle is updated to reflect the new value of the property.
72	{{/figure}}
73
74	=== Basic actions ===
75
76	{{figure image="plugin_theme_config_new_layout_en.png"}}
77	Use the buttons in the list to the left to create a new layout based on an existing template.
78	{{/figure}}
79
80	{{figure image="plugin_theme_config_default_modern_theme_en.png"}}
81	You can also mark one layout as the default modern theme. If you do, it will overwrite the default modern theme provided by {{formcycle/}}. Whether a form uses the modern theme can be set for each form, see the //form// tab of the properties panel in the {{designer/}}
82	{{/figure}}
83
84	To create a new layout based on an existing template, click on the button //New theme// with a plus icon ({{icon name="plus"/}}) in the list to left. This opens a new dialog where you can enter a name for the layout
85
86	Once you have created the new layout, you can find it in the list to the left, below the layout template. Click on the layout to edit it.
87
88	When you hover over a layout with the mouse, an activation icon ({{icon name="power-off"/}}) appear. Click on that icon to mark the layout as the default modern theme. This overwrites the builtin modern theme provided by {{formcycle/}} and is applied to all forms that make user of the modern theme. Whether a form makes use of the modern theme, see the properties panel to the right of the {{designer/}}, in the form tab. Please note that at most one layout can be marked as the default modern theme. Technical note: Marking a layout as the default modern theme creates a client file with the name //031-extended.css//, which overwrites the file of the same name provided by {{formcycle/}}.
89
90	The actionbar to the bottom offers three actions:
91
92	; Update preview
93	: Updates the form preview in the center, so that it reflects the current properties of the layout. By default, the preview is updated automatically once you change any property. Use this button in case that fails.
94	; Download {{smallcaps}}Css{{/smallcaps}}
95	: If necessary, you can download a copy of the {{smallcaps}}Css{{/smallcaps}} that is generated from the current layout.
96	; Save
97	: Saves the current layout with all configured properties. In case the layout should also be saved as a {{smallcaps}}Css{{/smallcaps}} client file or Design (CSS) template (see the properties section to the right), these files and templates are also created or updated now.
98
99	=== Preview section ===
100
101	{{figure image="plugin_theme_config_preview_settings_en.png"}}
102	The preview section shows how a form would look like with the current layout. By default, a demo form is used, but you can also select an existing form.
103	{{/figure}}
104
105	The section in the center contains the form preview. It shows a form and how that form would look like with the current layout. By default, a demo form is used that does not exist in the system. To select an existing form, click on the blue gear icon to the top right ({{icon name="gear"/}}) and select the form. As an advanced setting, you can also append additionalt {{smallcaps}}Url{{/smallcaps}} parameter to the form {{smallcaps}}Url{{/smallcaps}}.
106
107	=== Editing section ===
108
109	{{figure image="plugin_theme_config_css_design_files_en.png"}}
110	You can save a layout either as a client file or as a [[Design (CSS)>>doc:Formcycle.UserInterface.FilesAndTemplates.Design]] template. The latter can be used as a theme for the {{designer/}}.
111	{{/figure}}
112
113	The editing section to the right lets you edit the layout. The layout settings consist of two parts.
114
115	The first part, corresponding to the first fieldset, contains some general settings regarding the layout:
116
117	; Save as Design (CSS) template
118	: When this option is enabled, the layout is saved as a template for the {{designer/}}, and appears in the menu [[Design (CSS)>>doc:Formcycle.UserInterface.FilesAndTemplates.Design]].
119	; Save as client file
120	: When this option is enabled, the layout is saved as a {{smallcaps}}Css{{/smallcaps}} file in the [[client files>>doc:Formcycle.UserInterface.FilesAndTemplates.Files]].
121
122	If the layout is saved as the default modern theme, a note to that effect also appears there (see above for details).
123
124	The second parts contains the actual properties of the layout that affect how the form will look like, and corresponds to all remaining fieldsets. Which fieldsets and properties are available depends on the layout template. Usually you can edit colors, font sizes, logo images and more.
125
126	== Creating a layout template ==
127
128	A layout template consists of two parts. First of all, you need to create a {{smallcaps}}Scss{{/smallcaps}} files that contains the rules and declarations required for the layout. The {{smallcaps}}Scss{{/smallcaps}} may contain variables that are later configurable by the user, when they create a new layout. Secondly, you need to choose which variable are editable and which editor should be used for each variable (such as a text editor, pixel editor, color picker etc.). Thirdlz, you can optionally adjust some settings regarding the transpilation of the {{smallcaps}}Scss{{/smallcaps}} into {{smallcaps}}Css{{/smallcaps}}.
129
130	{{figure image="plugin_theme_config_new_template_en.png"}}
131	Click on the plus icon in the action bar to the top left to create a new layout template. The name of the layout template should usually be the same as the name of the {{smallcaps}}Scss{{/smallcaps}} file.
132	{{/figure}}
133
134	To create a new layout template, click on the plus icon ({{icon name="plus"/}}) to the top left. This opens a dialog where you need to enter a name for the layout and a name for the {{smallcaps}}Scss{{/smallcaps}} file. Unless required otherwise, you should use the same names.
135
136	Click on the layout template in the list to the left to edit it.
137
138	=== SCSS template ===
139
140	{{figure image="plugin_theme_config_template_scss_en.png"}}
141	The {{smallcaps}}Scss{{/smallcaps}} tab lets you edit the {{smallcaps}}Scss{{/smallcaps}} file used by the layout template. You can use {{smallcaps}}Scss{{/smallcaps}} variables, that are later configured by the user when they create a new layout. Use the //!default// rule to specify a default value for a variable.
142	{{/figure}}
143
144	The {{smallcaps}}Scss{{/smallcaps}} lets you edit the {{smallcaps}}Scss{{/smallcaps}} file of the layout template.
145
146	You can make use of [[{{smallcaps}}Scss{{/smallcaps}} variables>>url:https://sass-lang.com/documentation/variables\|\|rel="noopener noreferrer" target="_blank"]]. The value of each variable can then be set by the user when they create a new layout based on this template. {{smallcaps}}Scss{{/smallcaps}} variables always start with a dollar sign ($) and should not be confused with [[{{smallcaps}}Css{{/smallcaps}} variables>>url:https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties\|\|rel="noopener noreferrer" target="_blank"]].
147
148	To set the values of each variable, this plugin adds the appropriate variables declarations when transpiling the {{smallcaps}}Scss{{/smallcaps}} file:
149
150	{{code language="scss"}}
151	// Generated automatically by the system
152	$color: red;
153	$fontSize: 16px;
154	$fontFamily: "Liberation Sans";
155
156	// Your SCSS rules and styles come here
157	// ...
158	{{/code}}
159
160	We recommend you set a default value for each variable in the {{smallcaps}}Scss{{/smallcaps}} file. Anybody who reads the {{smallcaps}}Scss{{/smallcaps}} will find it easier to see which variables are available. Make sure you add the //default// rule to the variable declarations, or they will override the layout settings:
161
162	{{code language="scss"}}
163	// Declare your variables at the beginning of the SCSS file
164	// Not required, but good practice
165	$color: red !default;
166	$fontSize: 16px !default;
167	$fontFamily: "Liberation Sans" !default;
168
169	// Rules and styles come here
170	body {
171	color: $color;
172	font-size: $fontSize;
173	font-family: $fontFamily;
174	}
175
176	// ...
177	{{/code}}
178
179	Finally, you can also import other {{smallcaps}}Scss{{/smallcaps}} files:
180
181	{{code language="scss"}}
182	// You can import an SCSS file from the files of the current client
183	@import "client/current/file.scss";
184
185	// You can also import a file from another client
186	// Select a client by its name, alias, ID, or UUID
187	@import "client/name/demo/file.scss";
188	@import "client/alias/demo/file.scss";
189	@import "client/id/152/file.scss";
190	@import "client/uuid/c33c63c7-8047-4727-bcda-8d07e2c36d4d/file.scss";
191
192	// You can also import a CSS file
193	@import "client/current/file.css";
194
195	// You can also import another layout template
196	// It is transpiled with the default variable settings before being imported
197	@import "client/current/file.thed";
198
199	// You can also import another layout
200	// It is transpiled with the variable settings before being imported
201	@import "client/current/file.thpc";
202
203	// Import a file only when transpiling for a preview
204	// A SCSS file is transpiled (a) when the user clicks the save
205	// button, which also saves the result a client file or design template.
206	// And (b), when the user has changed an option in the UI and we want to
207	// to update the preview in the center section of the UI.
208	@import "client/current/file.scss?previewOnly";
209	{{/code}}
210
211	=== Editor configuration ===
212
213	{{figure image="plugin_theme_config_editor_config_en.png"}}
214	The first tab in the section to the right lets you choose which variables are editable and which editors should be used. You can also modify the order of the editors here.
215	{{/figure}}
216
217	The editor configuration can be found in the first tab of the section to the right. Here you can configure which {{smallcaps}}Css{{/smallcaps}} variables are editable by the user when they create a new layout based on this template. For each variable, you can select
218
219	* the editor that is used for editing the variable's value (such as a text editor, file editor, or pixel editor); and
220	* the position of the editor in the user interface.
221
222	The configuration is somewhat similar to how forms are designed in the {{designer/}} and supports drag & drop.
223
224	* By default, all editors are placed vertically, one editor on each line. If you activate the advanced option (see the view settings below), editors can also be placed next to each other. We recommend to use this option sparingly, as it quickly results in visual clutter.
225	* All editors are grouped in fieldsets. This enforces a clearer structure and makes the relevant settings easier to find.
226
227	To add an editor, proceed as follows:
228
229	* When you just created a new layout template, there is only one button: //New group//. This adds a new group (fieldset).
230	* This group now contains another button: //New editor//. This adds a new text editor with the default settings to the group.
231	* To add another group, click on the plus icon {{icon name="plus"/}} that appears when you hover over the free space between two groups with the mouse.
232	* To add another editor to a group, click on the plus icon ({{icon name="plus"/}}) that appears when you hover over the free space between two editors.
233
234	You can change the following settings for each editor:
235
236	; Set the variable name and display name
237	: For each editor you need to select a variable and a display name. The display name is what is shown to the user when they create a new layout. To edit the variable and display name, click on the blue label to the top left of the editor. This opens an input field. Enter the new variable name and display name, separated by a colon: {{code language="none"}}<variable-name>:<Display Name>{{/code}}. Note: This is unambiguous due to a colon not being allowed in {{smallcaps}}Scss{{/smallcaps}} variables.
238	; Change the editor type
239	: When you hover over the editor with the mouse, a settings bar appears to the top right. Here you can choose the type of the editor. Several predefined editors are available, such as simple text editors, color pickers, pixel editors or file choosers. Some generic editors require additional settings. If they do, a gear icon ({{icon name="gear"/}}) appears next to the editor type selection. Click on that icon to open an overlay with the additional settings. For example, the //DecimalRangeEditor// contains additional settings for the minimum and maximum value as well as the step size.
240	; Define a default value
241	: To define a default value for the variable, just use the editor to enter a value.
242	; Add or change the help text
243	: Optionally you can add a help text to each editor. This help text is later shown to the user when they edit a layout. To add a help text or change an existing help text, click on the blue question mark icon ({{icon name="question-circle"/}}) to the left of the editor. gedrückt werden. This open an input field where you can edit the help text.
244	; Change the width of the editor.
245	: Applicable only when multiple editors are placed next to each other. When you hover over the editor with the mouse, a settings bar appears to the top right. Here you can also change the relative width of the editor. This width is relative to the other editors placed in the same line as this editor.
246	; Move and editor to another location
247	: You can move an editor to another location via drag & drop. Use the grab icon ({{icon name="arrows"/}}) to initiate a drag.
248	; Delete an editor
249	: Hover over an editor with the mouse. This brings up an action bar to the top right of the editor with a trash icon ({{icon name="trash"/}}). Click on that icon to delete the editor.
250
251	=== Transpilation settings ===
252
253	{{figure image="plugin_theme_config_template_settings_1_en.png"}}
254	These settings let you fine tune how the {{smallcaps}}Scss{{/smallcaps}} is converted into {{smallcaps}}Css{{/smallcaps}}.
255	{{/figure}}
256
257	{{figure image="plugin_theme_config_template_settings_2_en.png"}}
258	There are also some settings available regarding [[vendor prefixes>>url:https://developer.mozilla.org/en-US/docs/Glossary/Vendor_Prefix\|\|target="_blank"]] and various new {{smallcaps}}Css{{/smallcaps}} features.
259	{{/figure}}
260
261	The //settings// tab lets you edit several advanced settings that affect how the {{smallcaps}}Scss{{/smallcaps}} is transpiled into {{smallcaps}}Css{{/smallcaps}}. It consists of four sections as described below.
262
263	==== View settings ====
264
265	Here you can find settings regarding the preview and the layout of the variable editors.
266
267	; Allow multiple editors on each row
268	: By default, all editors are place vertically, one editor per line. When this option is enabled, you can place editors next to each other. We recommend you use this option with care as multiple editors in a line can quickly result in visual clutter.
269	; Disable base theme for preview
270	: When this option is enabled, the base {{smallcaps}}Css{{/smallcaps}} provided by {{formcycle/}} is disabled for the preview. Whether this option should be enabled depends on whether your {{smallcaps}}Scss{{/smallcaps}} builds upon the base {{smallcaps}}Css{{/smallcaps}} or is meant to be used standalone.
271	; Disable modern theme for preview
272	: When this options is enabled, the modern them {{smallcaps}}Scss{{/smallcaps}} provided by {{formcycle/}} is disabled for the preview. Whether this options should be enabled depends on whether your {{smallcaps}}Scss{{/smallcaps}} builds upon the modern theme {{smallcaps}}Css{{/smallcaps}} or requires only the base {{smallcaps}}Css{{/smallcaps}}.
273	; Disable form theme for preview
274	: When this option is enabled, the theme as selected in the {{designer/}} is disabled for the preview.
275
276	==== CSS output options ====
277
278	{{figure image="plugin_theme_config_template_browserlist_en.png"}}
279	A browserslist query lets you select the browsers you would like to support. To see which browsers correspond to a given browserslist query, click on the button next to the browserslist query.
280	{{/figure}}
281
282	This section lets you configure basic settings for the {{smallcaps}}Scss{{/smallcaps}} transpilation, such as whether the result should be minified and which browsers you would like to target.
283
284	; {{smallcaps}}Css{{/smallcaps}} output style
285	: Defines whether the created {{smallcaps}}Css{{/smallcaps}} should be minified or be kept readable.
286	:; COMPACT
287	:: Each selector rule with all its declarations is output on a single line.
288	:; COMPRESSED
289	:: Attempts to reduce the size of the generated {{smallcaps}}Css{{/smallcaps}} as much as possible, such as by removing superfluous new lines and spaces. This usually results in a file with a single line.
290	:; EXPANDED
291	:: All nested rules in the {{smallcaps}}Scss{{/smallcaps}} are resolved and are output with any indentation. Each rule is written to a new line.
292	:; NESTED
293	:: Attempts to preserve the visul nesting of rules in the {{smallcaps}}Scss{{/smallcaps}} by applying an appropriate indentation to each rule and declaration that is output.
294	; Browsers to support
295	: Here you can choose which browsers you would like to support. This affect, for example, which vendor prefixes are added automatically. Browsers are specified as a so-called browser query, see [[github.com/browserslist>>url:https://github.com/browserslist/browserslist#queries\|\|rel="noopener noreferrer" target="_blank"]] for details on the syntax of a query. Press the button //List browsers// to check whether your query is correct and which browsers it corresponds to.
296	; Number of spaces for indenting
297	: In case the output needs to be indented, this defines the number of spaces per indendation level.
298	; Precision for numerical calculations
299	: The precision (number of decimal places) for numerical calculations that need to be performed during the transpilation process, such as when different {{smallcaps}}Css{{/smallcaps}} units need to be added and converted.
300	; Preserver source commments
301	: When this option is enabled, comments in the {{smallcaps}}Scss{{/smallcaps}} are preserved.
302
303	==== Postcss settings ====
304
305	Here you can change some settings regarind the [[postcss>>url:https://github.com/postcss/postcss\|\|rel="noopener noreferrer" target="_blank"]] postprocessor.
306
307	; Remove duplicate {{smallcaps}}Css{{/smallcaps}} rules
308	: When this option is enabled, duplicate {{smallcaps}}Css{{/smallcaps}} rules are removed. This is usually not an issue, but may change the semantics in a few edge cases, such as when rules overwrite each other.
309	; Add [[polyfills>>url:https://en.wikipedia.org/wiki/Polyfill_(programming)\|\|rel="noopener noreferrer" target="_blank"]] for new {{smallcaps}}Css{{/smallcaps}} features automatically.
310	: When this option is enabled, the [[postcss-preset-env>>url:https://github.com/csstools/postcss-preset-env\|\|rel="noopener noreferrer" target="_blank"]] plugin for postcss is enabled. This plugin converts some new {{smallcaps}}Css{{/smallcaps}} features so that they can be used in old browsers. Whether a certain polyfill is enabled depends on the list of browsers to support (see above).
311	; Minimal {{smallcaps}}Css{{/smallcaps}} stage for supported features
312	: Defines the minimal [[{{smallcaps}}Css{{/smallcaps}}-Stage>>url:https://cssdb.org/#staging-process\|\|rel="noopener noreferrer" target="_blank"]] of a {{smallcaps}}Css{{/smallcaps}} feature to be eligible for being polyfilled by [[postcss-preset-env>>url:https://github.com/csstools/postcss-preset-env\|\|rel="noopener noreferrer" target="_blank"]].
313
314	==== Autoprefixer settings ====
315
316	This section lets you change several settings of the [[autprefixer>>url:https://github.com/postcss/autoprefixer\|\|rel="noopener noreferrer" target="_blank"]] plugin for [[postcss>>url:https://github.com/postcss/postcss\|\|rel="noopener noreferrer" target="_blank"]]. This plugin appends [[vendor prefixes>>url:https://developer.mozilla.org/en-US/docs/Glossary/Vendor_Prefix\|\|rel="noopener noreferrer" target="_blank"]] automatically. Which prefixes are added depends on the list of browsers to support (see above).
317
318	; Add required prefixes automatically
319	: When enabled, vendor prefixes are added automatically so you do not have to include them in you {{smallcaps}}Scss{{/smallcaps}}.
320	; Remove superfluous prefixes
321	: When enabled, vendor prefixes are removed when they are not needed by any of the targetted browsers.
322	; Add prefixes for @supports rules
323	: When this option is enabled, vendor prefixes for the [[@supports>>url:https://developer.mozilla.org/en-US/docs/Web/CSS/@supports\|\|rel="noopener noreferrer" target="_blank"]] rule are added.
324	; Align {{smallcaps}}Css{{/smallcaps}} when not minified(Visual Cascade)
325	: Activates the //cascade// option of //autprefixer// (aignining declarations at the colon).
326	; Adding prefixes for flexbox properties
327	: When this option is enabled, vendor prefixes for the [[flexbox>>url:https://css-tricks.com/snippets/css/a-guide-to-flexbox/\|\|rel="noopener noreferrer" target="_blank"]] properties are added.
328	; Adding prefixes for grid layout properties
329	: When this option is enabled, vendor prefixes for [[grid>>url:https://css-tricks.com/snippets/css/complete-guide-grid/\|\|rel="noopener noreferrer" target="_blank"]] properties are added.
330
331	== Changelog ==
332
333	=== 0.8.0 ===
334
335	* Modifications for {{formcycle/}} version 6.5.x. This version is not compatible with version 6.4.x.
336
337	=== 0.7.1 ===
338
339	* The layout that ships with this plugin is not marked as the default modern theme anymore. This change is due to the fact that otherwise the file //031-extended.css// would be created automatically when the plugin is initialized (such as when the FORMCYCLE server is restarted or updates). CSS client files are always included in all forms, which is usually not desired.
340
341	=== 0.7.0 ===
342
343	* Modifications for {{formcycle/}} version 6.4.x.
344	* Fix a bug issue that occasionally resulted in an eror page when selecting a layout template
345	* Fix several UI bugs.
346	* Update browserslist.
347
348	=== 0.6.1 ===
349
350	* Update browserslist.
351	* Update the modern theme template.
352
353	=== 0.6.0 ===
354
355	* Modifications for {{formcycle/}} version 6.3.x.
356	* It is now possible to select a layout as the standard modern theme.
357	* A layout can now be saved both as a client files as well as a Design (CSS) template.
358	* Forms in the preview now make use of all the available width. Change the form to preview by clicking on the gear icon to the top right.
359	* When the plugin is installed, a layout for the modern theme is created as well (in addition to a layout template).
360	* Fix several bugs.
361
362	=== 0.5.0 ===
363
364	* Several small changes to the user interface.
365	* Allow adding {{smallcaps}}Url{{/smallcaps}} paramters to the form preview {{smallcaps}}Url{{/smallcaps}}.
366	* Whether the base and modern theme should be disabled can now be set globally for each layout template.
367	* New setting for disabling the form theme in the preview
368	* Added the //postcss-discard-duplicates// to postcss
369	* When importing other {{smallcaps}}Scss{{/smallcaps}} files, you can add the parameter //previewOnly// to the import {{smallcaps}}Url{{/smallcaps}}. The import is then applied only when the file is transpiled for the form preview.
370	* Changed the syntax for importing other {{smallcaps}}Scss{{/smallcaps}} file: the path must now be a valid {{smallcaps}}Uri{{/smallcaps}}: {{code language="none"}}@import "client/current/file.scss{{/code}}.
371	* Allow layout templates to be imported directly
372
373	=== 0.4.0 ===
374
375	* Small changed to the user interface.
376	* Add an option to prevent editors from being placed next to each other
377
378	=== 0.3.0 ===
379
380	* Allow the generated {{smallcaps}}Css{{/smallcaps}} to be postprocessed and prefixed.
381	* Rework the import and export dialogs.
382	* Add dialogs for resolving invalid or missing references.
383
384	=== 0.2.0 ===
385
386	* Support multiple items to be selected for exporting
387
388	=== 0.1.0 ===
389
390	* Initial release.
391	* Supports {{formcycle/}} starting at version 6.1.x.

1

[[**Plugin download**>>url:https://customer.formcycle.eu/index.php/apps/files/?dir=/FORMCYCLE%20-%20Plugins%20Customer/plugin-bundle-theme-config&fileid=11565||target="_blank"]] (requires login)

The theme configuratior menu as it appears when this plugin was installed for the first time. By default, a layout template with a corresponding layout for the {{formcycle/}} modern theme is already available.

7

8

9

The theme configurator plugin provides you with a user interface for editing various layout settings, such as the font size, color and paddings of a form.

10

11

You should install this plugin as a system plugin, although it is also possible to install it as a client plugin, provided that you do not install different version of this plugin in different clients. This plugin itself requires no additional configuration. Once installed, a new entry //Theme configurator// is added to the main menu at the left-hand side. Please note that you may have to sign out and sign in again.

12

13

The theme configuration plugin can be used by two different groups of users:

14

15

; Create layout templates

16

: This step should be performed by users with the appropriate technical knowledge. A template contains information regarding which properties (colors, font sizes etc.) can be edited and which type editor is used, as well as the implementation of the layout in the form of {{smallcaps}}Css{{/smallcaps}} declarations. Users can then create a layout based on a template and configure a value for each property (color=red, font size=12px etc.). Creating a template requires a working knowledge of {{smallcaps}}Css{{/smallcaps}} and [[{{smallcaps}}Scss{{/smallcaps}}>>url:https://sass-lang.com/||rel="noopener noreferrer" target="_blank"]]. In case you do not want a users to create or modify a template, you can use a [[role permission>>doc:Formcycle.UserInterface.UserSettings.Roles]] to prevent them from doing so.

17

18

; Create layouts

19

: This step should be performed by users with the appropriate knowledge of good design. You can create a layout based on an existing template, and fine-tune the settings it offers, such as colors and font sizes. You can also create multiple layout based on a template, such as a variation of a layout in red, and a variation in green. Once a layout was created, you can save it either as a [[Design (CSS)>>doc:Formcycle.UserInterface.FilesAndTemplates.Design]] template for the {{designer/}}, or as a {{smallcaps}}Css{{/smallcaps}} [[client file>>doc:Formcycle.UserInterface.FilesAndTemplates.Files]].

20

21

When this plugin is installed, a new layout template with a corresponding layout is created automatically. It contains the built-in //modern theme// provided by {{formcycle/}}.

22

23

From a technical point of view, this plugin lets you create {{smallcaps}}Scss{{/smallcaps}} files that may contain {{smallcaps}}Scss{{/smallcaps}} variables and offers a UI with a quick preview feature for assigning a value to each variable.

== General notes ==

=== Role permissions ==

28

29

This plugin adds a few new permission to the [[role settings>>doc:Formcycle.UserInterface.UserSettings.Roles]]. This lets you control which users should be able to access the theme configurator and which of these users can additionally create or edit layout templates.

30

31

=== Fullscreen mode ===

32

33

The theme configurator contains many settings and as such, it requires quite a bit of screen space. You can click on the expand icon ({{icon name="compress"/}}) to the top right to switch to fullscreen mode.

=== Export ===

To the left you can find a list of available layout templates, along with the created layouts. Hover over an item in that list with the mouse, and a download button ({{icon name="download"/}}) shows up. Click on that button to download that layout or layout template. In case you download a layout template, you can also select the layout to include in the exported {{smallcaps}}Zip{{/smallcaps}} file.

38

39

Furthermore, you can also press the upload button ({{icon name="upload"/}}) in the action bar to the top left. This lets you import a layout or layout template you exported previously. In case this would overwrite any existing layouts or layout templates, a dialog shows and asks you whether you want to overwrite existing items or create a new layout or layout template.

=== Files ===

This plugin saves the created layouts and layout templates as client files. These files are created automatically and should not be edited manually.

45

46

47

The layouts and layout templates that you created are saved as [[client files>>doc:Formcycle.UserInterface.FilesAndTemplates.Files]]. You should not edit these files manually. You could, however, download these files and upload them in another {{formcycle/}} system.

48

49

The files that are created plugins may have the following file extensions:

50

51

; .scss

52

: Stands for //Sassy CSS//. These are {{smallcaps}}Scss{{/smallcaps}} files that contain the implementation of a layout.

53

; .thed

54

: Stands for //theme editor (configuration)//. A {{smallcaps}}Json{{/smallcaps}} file that contains the editable properties (variables) of the {{smallcaps}}Scss{{/smallcaps}} file and which editor should be used for each variable. Corresponds to layout template.

55

; .thpc

56

: Stands for //theme processing (configuration)//. A {{smallcaps}}Json{{/smallcaps}} file that contains the values for each configurable propertz (variable). Corresponds to a layout.

57

; .css

58

: Stands for //cascading style sheet//. A {{smallcaps}}Css{{/smallcaps}} file generated from a layout.

59

60

=== Fixing missing or invalid references ===

61

62

63

In case a configuration file contains invalid values, an appropriate dialog appears with a warning and possible options. In the illustration above, a layout was selected that belongs to a layout template for which the {{smallcaps}}Scss{{/smallcaps}} file is missing. You can either create a new {{smallcaps}}Scss{{/smallcaps}} file or delete the layout. Alternatively you can also abort the process. If you do and you select the layout again, the same dialog will show up unless you have fixed the error in some other way.

64

65

66

The layout and layout configuration files reference other files. For example, the layout contains a (soft) reference to the layout file. It is possible for somebody to delete the referenced file. If that happens and you select a layout or layout template with missing references, a dialog shows up. It tells you exactly what is wrong and offers several options to fix it, such as by selecting another layout template or creating a new one.

67

68

== Creating a layout ==

69

70

71

Click on a layout in the list to the left to edit it. In the section to the right you can see all properties offered by the layout template. Change any property and the preview area in the middle is updated to reflect the new value of the property.

72

73

74

=== Basic actions ===

75

76

77

Use the buttons in the list to the left to create a new layout based on an existing template.

78

79

80

{{figure image="plugin_theme_config_default_modern_theme_en.png"}}

81

You can also mark one layout as the default modern theme. If you do, it will overwrite the default modern theme provided by {{formcycle/}}. Whether a form uses the modern theme can be set for each form, see the //form// tab of the properties panel in the {{designer/}}

82

83

84

To create a new layout based on an existing template, click on the button //New theme// with a plus icon ({{icon name="plus"/}}) in the list to left. This opens a new dialog where you can enter a name for the layout

85

86

Once you have created the new layout, you can find it in the list to the left, below the layout template. Click on the layout to edit it.

87

88

When you hover over a layout with the mouse, an activation icon ({{icon name="power-off"/}}) appear. Click on that icon to mark the layout as the default modern theme. This overwrites the builtin modern theme provided by {{formcycle/}} and is applied to all forms that make user of the modern theme. Whether a form makes use of the modern theme, see the properties panel to the right of the {{designer/}}, in the form tab. Please note that at most one layout can be marked as the default modern theme. Technical note: Marking a layout as the default modern theme creates a client file with the name //031-extended.css//, which overwrites the file of the same name provided by {{formcycle/}}.

89

90

The actionbar to the bottom offers three actions:

91

92

; Update preview

93

: Updates the form preview in the center, so that it reflects the current properties of the layout. By default, the preview is updated automatically once you change any property. Use this button in case that fails.

94

; Download {{smallcaps}}Css{{/smallcaps}}

95

: If necessary, you can download a copy of the {{smallcaps}}Css{{/smallcaps}} that is generated from the current layout.

96

; Save

97

: Saves the current layout with all configured properties. In case the layout should also be saved as a {{smallcaps}}Css{{/smallcaps}} client file or Design (CSS) template (see the properties section to the right), these files and templates are also created or updated now.

98

99

=== Preview section ===

100

101

102

The preview section shows how a form would look like with the current layout. By default, a demo form is used, but you can also select an existing form.

103

104

105

The section in the center contains the form preview. It shows a form and how that form would look like with the current layout. By default, a demo form is used that does not exist in the system. To select an existing form, click on the blue gear icon to the top right ({{icon name="gear"/}}) and select the form. As an advanced setting, you can also append additionalt {{smallcaps}}Url{{/smallcaps}} parameter to the form {{smallcaps}}Url{{/smallcaps}}.

106

107

=== Editing section ===

108

109

110

You can save a layout either as a client file or as a [[Design (CSS)>>doc:Formcycle.UserInterface.FilesAndTemplates.Design]] template. The latter can be used as a theme for the {{designer/}}.

111

112

113

The editing section to the right lets you edit the layout. The layout settings consist of two parts.

114

115

The first part, corresponding to the first fieldset, contains some general settings regarding the layout:

116

117

; Save as Design (CSS) template

118

: When this option is enabled, the layout is saved as a template for the {{designer/}}, and appears in the menu [[Design (CSS)>>doc:Formcycle.UserInterface.FilesAndTemplates.Design]].

119

; Save as client file

120

: When this option is enabled, the layout is saved as a {{smallcaps}}Css{{/smallcaps}} file in the [[client files>>doc:Formcycle.UserInterface.FilesAndTemplates.Files]].

121

122

If the layout is saved as the default modern theme, a note to that effect also appears there (see above for details).

123

124

The second parts contains the actual properties of the layout that affect how the form will look like, and corresponds to all remaining fieldsets. Which fieldsets and properties are available depends on the layout template. Usually you can edit colors, font sizes, logo images and more.

125

126

== Creating a layout template ==

127

128

A layout template consists of two parts. First of all, you need to create a {{smallcaps}}Scss{{/smallcaps}} files that contains the rules and declarations required for the layout. The {{smallcaps}}Scss{{/smallcaps}} may contain variables that are later configurable by the user, when they create a new layout. Secondly, you need to choose which variable are editable and which editor should be used for each variable (such as a text editor, pixel editor, color picker etc.). Thirdlz, you can optionally adjust some settings regarding the transpilation of the {{smallcaps}}Scss{{/smallcaps}} into {{smallcaps}}Css{{/smallcaps}}.

129

130

131

Click on the plus icon in the action bar to the top left to create a new layout template. The name of the layout template should usually be the same as the name of the {{smallcaps}}Scss{{/smallcaps}} file.

132

133

134

To create a new layout template, click on the plus icon ({{icon name="plus"/}}) to the top left. This opens a dialog where you need to enter a name for the layout and a name for the {{smallcaps}}Scss{{/smallcaps}} file. Unless required otherwise, you should use the same names.

135

136

Click on the layout template in the list to the left to edit it.

137

138

=== SCSS template ===

139

140

141

The {{smallcaps}}Scss{{/smallcaps}} tab lets you edit the {{smallcaps}}Scss{{/smallcaps}} file used by the layout template. You can use {{smallcaps}}Scss{{/smallcaps}} variables, that are later configured by the user when they create a new layout. Use the //!default// rule to specify a default value for a variable.

142

143

144

The {{smallcaps}}Scss{{/smallcaps}} lets you edit the {{smallcaps}}Scss{{/smallcaps}} file of the layout template.

145

146

You can make use of [[{{smallcaps}}Scss{{/smallcaps}} variables>>url:https://sass-lang.com/documentation/variables||rel="noopener noreferrer" target="_blank"]]. The value of each variable can then be set by the user when they create a new layout based on this template. {{smallcaps}}Scss{{/smallcaps}} variables always start with a dollar sign ($) and should not be confused with [[{{smallcaps}}Css{{/smallcaps}} variables>>url:https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties||rel="noopener noreferrer" target="_blank"]].

147

148

To set the values of each variable, this plugin adds the appropriate variables declarations when transpiling the {{smallcaps}}Scss{{/smallcaps}} file:

149

150

151

// Generated automatically by the system

152

$color: red;

153

$fontSize: 16px;

154

$fontFamily: "Liberation Sans";

155

156

// Your SCSS rules and styles come here

// ...

We recommend you set a default value for each variable in the {{smallcaps}}Scss{{/smallcaps}} file. Anybody who reads the {{smallcaps}}Scss{{/smallcaps}} will find it easier to see which variables are available. Make sure you add the //default// rule to the variable declarations, or they will override the layout settings:

161

162

163

// Declare your variables at the beginning of the SCSS file

164

// Not required, but good practice

165

$color: red !default;

166

$fontSize: 16px !default;

167

$fontFamily: "Liberation Sans" !default;

168

169

// Rules and styles come here

170

body {

171

color: $color;

172

font-size: $fontSize;

173

font-family: $fontFamily;

}

// ...

Finally, you can also import other {{smallcaps}}Scss{{/smallcaps}} files:

180

181

182

// You can import an SCSS file from the files of the current client

183

@import "client/current/file.scss";

184

185

// You can also import a file from another client

186

// Select a client by its name, alias, ID, or UUID

187

@import "client/name/demo/file.scss";

188

@import "client/alias/demo/file.scss";

189

@import "client/id/152/file.scss";

190

@import "client/uuid/c33c63c7-8047-4727-bcda-8d07e2c36d4d/file.scss";

191

192

// You can also import a CSS file

193

@import "client/current/file.css";

194

195

// You can also import another layout template

196

// It is transpiled with the default variable settings before being imported

197

@import "client/current/file.thed";

198

199

// You can also import another layout

200

// It is transpiled with the variable settings before being imported

201

@import "client/current/file.thpc";

202

203

// Import a file only when transpiling for a preview

204

// A SCSS file is transpiled (a) when the user clicks the save

205

// button, which also saves the result a client file or design template.

206

// And (b), when the user has changed an option in the UI and we want to

207

// to update the preview in the center section of the UI.

208

@import "client/current/file.scss?previewOnly";

209

210

211

=== Editor configuration ===

212

213

214

The first tab in the section to the right lets you choose which variables are editable and which editors should be used. You can also modify the order of the editors here.

215

216

217

The editor configuration can be found in the first tab of the section to the right. Here you can configure which {{smallcaps}}Css{{/smallcaps}} variables are editable by the user when they create a new layout based on this template. For each variable, you can select

218

219

* the editor that is used for editing the variable's value (such as a text editor, file editor, or pixel editor); and

220

* the position of the editor in the user interface.

221

222

The configuration is somewhat similar to how forms are designed in the {{designer/}} and supports drag & drop.

223

224

* By default, all editors are placed vertically, one editor on each line. If you activate the advanced option (see the view settings below), editors can also be placed next to each other. We recommend to use this option sparingly, as it quickly results in visual clutter.

225

* All editors are grouped in fieldsets. This enforces a clearer structure and makes the relevant settings easier to find.

226

227

To add an editor, proceed as follows:

228

229

* When you just created a new layout template, there is only one button: //New group//. This adds a new group (fieldset).

230

* This group now contains another button: //New editor//. This adds a new text editor with the default settings to the group.

231

* To add another group, click on the plus icon {{icon name="plus"/}} that appears when you hover over the free space between two groups with the mouse.

232

* To add another editor to a group, click on the plus icon ({{icon name="plus"/}}) that appears when you hover over the free space between two editors.

233

234

You can change the following settings for each editor:

235

236

; Set the variable name and display name

237

: For each editor you need to select a variable and a display name. The display name is what is shown to the user when they create a new layout. To edit the variable and display name, click on the blue label to the top left of the editor. This opens an input field. Enter the new variable name and display name, separated by a colon: {{code language="none"}}<variable-name>:<Display Name>{{/code}}. Note: This is unambiguous due to a colon not being allowed in {{smallcaps}}Scss{{/smallcaps}} variables.

238

; Change the editor type

239

: When you hover over the editor with the mouse, a settings bar appears to the top right. Here you can choose the type of the editor. Several predefined editors are available, such as simple text editors, color pickers, pixel editors or file choosers. Some generic editors require additional settings. If they do, a gear icon ({{icon name="gear"/}}) appears next to the editor type selection. Click on that icon to open an overlay with the additional settings. For example, the //DecimalRangeEditor// contains additional settings for the minimum and maximum value as well as the step size.

240

; Define a default value

241

: To define a default value for the variable, just use the editor to enter a value.

242

; Add or change the help text

243

: Optionally you can add a help text to each editor. This help text is later shown to the user when they edit a layout. To add a help text or change an existing help text, click on the blue question mark icon ({{icon name="question-circle"/}}) to the left of the editor. gedrückt werden. This open an input field where you can edit the help text.

244

; Change the width of the editor.

245

: Applicable only when multiple editors are placed next to each other. When you hover over the editor with the mouse, a settings bar appears to the top right. Here you can also change the relative width of the editor. This width is relative to the other editors placed in the same line as this editor.

246

; Move and editor to another location

247

: You can move an editor to another location via drag & drop. Use the grab icon ({{icon name="arrows"/}}) to initiate a drag.

248

; Delete an editor

249

: Hover over an editor with the mouse. This brings up an action bar to the top right of the editor with a trash icon ({{icon name="trash"/}}). Click on that icon to delete the editor.

250

251

=== Transpilation settings ===

252

253

{{figure image="plugin_theme_config_template_settings_1_en.png"}}

254

These settings let you fine tune how the {{smallcaps}}Scss{{/smallcaps}} is converted into {{smallcaps}}Css{{/smallcaps}}.

255

256

257

{{figure image="plugin_theme_config_template_settings_2_en.png"}}

258

There are also some settings available regarding [[vendor prefixes>>url:https://developer.mozilla.org/en-US/docs/Glossary/Vendor_Prefix||target="_blank"]] and various new {{smallcaps}}Css{{/smallcaps}} features.

259

260

261

The //settings// tab lets you edit several advanced settings that affect how the {{smallcaps}}Scss{{/smallcaps}} is transpiled into {{smallcaps}}Css{{/smallcaps}}. It consists of four sections as described below.

262

263

==== View settings ====

264

265

Here you can find settings regarding the preview and the layout of the variable editors.

266

267

; Allow multiple editors on each row

268

: By default, all editors are place vertically, one editor per line. When this option is enabled, you can place editors next to each other. We recommend you use this option with care as multiple editors in a line can quickly result in visual clutter.

269

; Disable base theme for preview

270

: When this option is enabled, the base {{smallcaps}}Css{{/smallcaps}} provided by {{formcycle/}} is disabled for the preview. Whether this option should be enabled depends on whether your {{smallcaps}}Scss{{/smallcaps}} builds upon the base {{smallcaps}}Css{{/smallcaps}} or is meant to be used standalone.

271

; Disable modern theme for preview

272

: When this options is enabled, the modern them {{smallcaps}}Scss{{/smallcaps}} provided by {{formcycle/}} is disabled for the preview. Whether this options should be enabled depends on whether your {{smallcaps}}Scss{{/smallcaps}} builds upon the modern theme {{smallcaps}}Css{{/smallcaps}} or requires only the base {{smallcaps}}Css{{/smallcaps}}.

273

; Disable form theme for preview

274

: When this option is enabled, the theme as selected in the {{designer/}} is disabled for the preview.

275

276

==== CSS output options ====

277

278

{{figure image="plugin_theme_config_template_browserlist_en.png"}}

279

A browserslist query lets you select the browsers you would like to support. To see which browsers correspond to a given browserslist query, click on the button next to the browserslist query.

280

281

282

This section lets you configure basic settings for the {{smallcaps}}Scss{{/smallcaps}} transpilation, such as whether the result should be minified and which browsers you would like to target.

283

284

; {{smallcaps}}Css{{/smallcaps}} output style

285

: Defines whether the created {{smallcaps}}Css{{/smallcaps}} should be minified or be kept readable.

286

:; COMPACT

287

:: Each selector rule with all its declarations is output on a single line.

288

:; COMPRESSED

289

:: Attempts to reduce the size of the generated {{smallcaps}}Css{{/smallcaps}} as much as possible, such as by removing superfluous new lines and spaces. This usually results in a file with a single line.

290

:; EXPANDED

291

:: All nested rules in the {{smallcaps}}Scss{{/smallcaps}} are resolved and are output with any indentation. Each rule is written to a new line.

292

:; NESTED

293

:: Attempts to preserve the visul nesting of rules in the {{smallcaps}}Scss{{/smallcaps}} by applying an appropriate indentation to each rule and declaration that is output.

294

; Browsers to support

295

: Here you can choose which browsers you would like to support. This affect, for example, which vendor prefixes are added automatically. Browsers are specified as a so-called browser query, see [[github.com/browserslist>>url:https://github.com/browserslist/browserslist#queries||rel="noopener noreferrer" target="_blank"]] for details on the syntax of a query. Press the button //List browsers// to check whether your query is correct and which browsers it corresponds to.

296

; Number of spaces for indenting

297

: In case the output needs to be indented, this defines the number of spaces per indendation level.

298

; Precision for numerical calculations

299

: The precision (number of decimal places) for numerical calculations that need to be performed during the transpilation process, such as when different {{smallcaps}}Css{{/smallcaps}} units need to be added and converted.

300

; Preserver source commments

301

: When this option is enabled, comments in the {{smallcaps}}Scss{{/smallcaps}} are preserved.

302

303

==== Postcss settings ====

304

305

Here you can change some settings regarind the [[postcss>>url:https://github.com/postcss/postcss||rel="noopener noreferrer" target="_blank"]] postprocessor.

306

307

; Remove duplicate {{smallcaps}}Css{{/smallcaps}} rules

308

: When this option is enabled, duplicate {{smallcaps}}Css{{/smallcaps}} rules are removed. This is usually not an issue, but may change the semantics in a few edge cases, such as when rules overwrite each other.

309

; Add [[polyfills>>url:https://en.wikipedia.org/wiki/Polyfill_(programming)||rel="noopener noreferrer" target="_blank"]] for new {{smallcaps}}Css{{/smallcaps}} features automatically.

310

: When this option is enabled, the [[postcss-preset-env>>url:https://github.com/csstools/postcss-preset-env||rel="noopener noreferrer" target="_blank"]] plugin for postcss is enabled. This plugin converts some new {{smallcaps}}Css{{/smallcaps}} features so that they can be used in old browsers. Whether a certain polyfill is enabled depends on the list of browsers to support (see above).

311

; Minimal {{smallcaps}}Css{{/smallcaps}} stage for supported features

312

: Defines the minimal [[{{smallcaps}}Css{{/smallcaps}}-Stage>>url:https://cssdb.org/#staging-process||rel="noopener noreferrer" target="_blank"]] of a {{smallcaps}}Css{{/smallcaps}} feature to be eligible for being polyfilled by [[postcss-preset-env>>url:https://github.com/csstools/postcss-preset-env||rel="noopener noreferrer" target="_blank"]].

313

314

==== Autoprefixer settings ====

315

316

This section lets you change several settings of the [[autprefixer>>url:https://github.com/postcss/autoprefixer||rel="noopener noreferrer" target="_blank"]] plugin for [[postcss>>url:https://github.com/postcss/postcss||rel="noopener noreferrer" target="_blank"]]. This plugin appends [[vendor prefixes>>url:https://developer.mozilla.org/en-US/docs/Glossary/Vendor_Prefix||rel="noopener noreferrer" target="_blank"]] automatically. Which prefixes are added depends on the list of browsers to support (see above).

317

318

; Add required prefixes automatically

319

: When enabled, vendor prefixes are added automatically so you do not have to include them in you {{smallcaps}}Scss{{/smallcaps}}.

320

; Remove superfluous prefixes

321

: When enabled, vendor prefixes are removed when they are not needed by any of the targetted browsers.

322

; Add prefixes for @supports rules

323

: When this option is enabled, vendor prefixes for the [[@supports>>url:https://developer.mozilla.org/en-US/docs/Web/CSS/@supports||rel="noopener noreferrer" target="_blank"]] rule are added.

324

; Align {{smallcaps}}Css{{/smallcaps}} when not minified(Visual Cascade)

325

: Activates the //cascade// option of //autprefixer// (aignining declarations at the colon).

326

; Adding prefixes for flexbox properties

327

: When this option is enabled, vendor prefixes for the [[flexbox>>url:https://css-tricks.com/snippets/css/a-guide-to-flexbox/||rel="noopener noreferrer" target="_blank"]] properties are added.

328

; Adding prefixes for grid layout properties

329

: When this option is enabled, vendor prefixes for [[grid>>url:https://css-tricks.com/snippets/css/complete-guide-grid/||rel="noopener noreferrer" target="_blank"]] properties are added.

== Changelog ==

=== 0.8.0 ===

* Modifications for {{formcycle/}} version 6.5.x. This version is not compatible with version 6.4.x.

=== 0.7.1 ===

* The layout that ships with this plugin is not marked as the default modern theme anymore. This change is due to the fact that otherwise the file //031-extended.css// would be created automatically when the plugin is initialized (such as when the FORMCYCLE server is restarted or updates). CSS client files are always included in all forms, which is usually not desired.

=== 0.7.0 ===

* Modifications for {{formcycle/}} version 6.4.x.

344

* Fix a bug issue that occasionally resulted in an eror page when selecting a layout template

345

* Fix several UI bugs.

346

* Update browserslist.

=== 0.6.1 ===

* Update browserslist.

351

* Update the modern theme template.

=== 0.6.0 ===

* Modifications for {{formcycle/}} version 6.3.x.

356

* It is now possible to select a layout as the standard modern theme.

357

* A layout can now be saved both as a client files as well as a Design (CSS) template.

358

* Forms in the preview now make use of all the available width. Change the form to preview by clicking on the gear icon to the top right.

359

* When the plugin is installed, a layout for the modern theme is created as well (in addition to a layout template).

* Fix several bugs.

=== 0.5.0 ===

* Several small changes to the user interface.

365

* Allow adding {{smallcaps}}Url{{/smallcaps}} paramters to the form preview {{smallcaps}}Url{{/smallcaps}}.

366

* Whether the base and modern theme should be disabled can now be set globally for each layout template.

367

* New setting for disabling the form theme in the preview

368

* Added the //postcss-discard-duplicates// to postcss

369

* When importing other {{smallcaps}}Scss{{/smallcaps}} files, you can add the parameter //previewOnly// to the import {{smallcaps}}Url{{/smallcaps}}. The import is then applied only when the file is transpiled for the form preview.

370

* Changed the syntax for importing other {{smallcaps}}Scss{{/smallcaps}} file: the path must now be a valid {{smallcaps}}Uri{{/smallcaps}}: {{code language="none"}}@import "client/current/file.scss{{/code}}.

371

* Allow layout templates to be imported directly

=== 0.4.0 ===

* Small changed to the user interface.

376

* Add an option to prevent editors from being placed next to each other

377

378