Wiki source code of Theme-Konfigurator-Plugin

Hide last authors

version	line-number	content
30.4	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)
30.2	2
15.69	3	{{content/}}
1.1	4
30.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.
14.4	7	{{/figure}}
	8
30.4	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.
1.1	10
30.4	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.
14.3	12
30.4	13	The theme configuration plugin can be used by two different groups of users:
14.3	14
30.4	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.
16.5	17
30.4	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]].
14.3	20
30.4	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/}}.
14.4	22
30.4	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.
14.9	24
30.4	25	== General notes ==
1.1	26
30.4	27	=== Role permissions ==
14.7	28
30.4	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.
14.7	30
30.4	31	=== Fullscreen mode ===
14.4	32
30.4	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.
14.4	34
14.28	35	=== Export ===
	36
30.4	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.
14.28	38
30.4	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.
14.28	40
30.4	41	=== Files ===
14.28	42
30.4	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.
14.10	45	{{/figure}}
	46
30.4	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.
14.7	48
30.4	49	The files that are created plugins may have the following file extensions:
14.8	50
	51	; .scss
30.4	52	: Stands for //Sassy CSS//. These are {{smallcaps}}Scss{{/smallcaps}} files that contain the implementation of a layout.
14.8	53	; .thed
30.4	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.
14.8	55	; .thpc
30.4	56	: Stands for //theme processing (configuration)//. A {{smallcaps}}Json{{/smallcaps}} file that contains the values for each configurable propertz (variable). Corresponds to a layout.
14.8	57	; .css
30.4	58	: Stands for //cascading style sheet//. A {{smallcaps}}Css{{/smallcaps}} file generated from a layout.
14.8	59
30.4	60	=== Fixing missing or invalid references ===
1.1	61
30.4	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.
14.10	64	{{/figure}}
	65
30.4	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.
14.10	67
30.4	68	== Creating a layout ==
1.1	69
30.4	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.
14.17	72	{{/figure}}
	73
30.4	74	=== Basic actions ===
14.22	75
30.4	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.
14.18	78	{{/figure}}
14.17	79
30.4	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/}}
15.62	82	{{/figure}}
	83
30.4	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
14.18	85
30.4	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.
14.18	87
30.4	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/}}.
14.26	89
30.4	90	The actionbar to the bottom offers three actions:
14.21	91
30.4	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.
14.22	98
30.4	99	=== Preview section ===
14.18	100
30.4	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.
14.19	103	{{/figure}}
	104
30.4	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}}.
14.19	106
30.4	107	=== Editing section ===
14.21	108
30.4	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/}}.
15.59	111	{{/figure}}
	112
30.4	113	The editing section to the right lets you edit the layout. The layout settings consist of two parts.
14.18	114
30.4	115	The first part, corresponding to the first fieldset, contains some general settings regarding the layout:
14.25	116
30.4	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]].
14.25	121
30.4	122	If the layout is saved as the default modern theme, a note to that effect also appears there (see above for details).
14.26	123
30.4	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.
14.25	125
30.4	126	== Creating a layout template ==
1.1	127
30.4	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}}.
14.33	129
30.4	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.
14.33	132	{{/figure}}
	133
30.4	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.
14.33	135
30.4	136	Click on the layout template in the list to the left to edit it.
14.34	137
30.4	138	=== SCSS template ===
14.33	139
30.4	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.
15.9	142	{{/figure}}
	143
30.4	144	The {{smallcaps}}Scss{{/smallcaps}} lets you edit the {{smallcaps}}Scss{{/smallcaps}} file of the layout template.
15.10	145
30.4	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"]].
15.10	147
30.4	148	To set the values of each variable, this plugin adds the appropriate variables declarations when transpiling the {{smallcaps}}Scss{{/smallcaps}} file:
15.11	149
	150	{{code language="scss"}}
15.13	151	// Generated automatically by the system
15.11	152	$color: red;
	153	$fontSize: 16px;
	154	$fontFamily: "Liberation Sans";
15.13	155
	156	// Your SCSS rules and styles come here
	157	// ...
15.11	158	{{/code}}
	159
30.4	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:
15.11	161
15.13	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
30.4	179	Finally, you can also import other {{smallcaps}}Scss{{/smallcaps}} files:
15.13	180
15.14	181	{{code language="scss"}}
15.17	182	// You can import an SCSS file from the files of the current client
	183	@import "client/current/file.scss";
15.16	184
15.17	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";
15.16	191
15.17	192	// You can also import a CSS file
	193	@import "client/current/file.css";
15.16	194
15.17	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";
15.16	198
15.17	199	// You can also import another layout
	200	// It is transpiled with the variable settings before being imported
15.25	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";
15.14	209	{{/code}}
	210
30.4	211	=== Editor configuration ===
14.33	212
30.4	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.
15.41	215	{{/figure}}
	216
30.4	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
15.46	218
30.4	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.
15.46	221
30.4	222	The configuration is somewhat similar to how forms are designed in the {{designer/}} and supports drag & drop.
15.46	223
30.4	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.
15.46	226
30.4	227	To add an editor, proceed as follows:
15.46	228
30.4	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.
15.46	233
30.4	234	You can change the following settings for each editor:
15.46	235
30.4	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.
15.46	250
30.4	251	=== Transpilation settings ===
14.33	252
30.4	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}}.
15.37	255	{{/figure}}
	256
30.4	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.
15.37	259	{{/figure}}
	260
30.4	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.
15.25	262
30.4	263	==== View settings ====
15.25	264
30.4	265	Here you can find settings regarding the preview and the layout of the variable editors.
15.32	266
30.4	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.
15.29	275
30.4	276	==== CSS output options ====
15.29	277
30.4	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.
15.36	280	{{/figure}}
	281
30.4	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.
15.37	283
30.4	284	; {{smallcaps}}Css{{/smallcaps}} output style
	285	: Defines whether the created {{smallcaps}}Css{{/smallcaps}} should be minified or be kept readable.
15.33	286	:; COMPACT
30.4	287	:: Each selector rule with all its declarations is output on a single line.
15.33	288	:; COMPRESSED
30.4	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.
15.33	290	:; EXPANDED
30.4	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.
15.33	292	:; NESTED
30.4	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.
15.32	302
30.4	303	==== Postcss settings ====
15.29	304
30.4	305	Here you can change some settings regarind the [[postcss>>url:https://github.com/postcss/postcss\|\|rel="noopener noreferrer" target="_blank"]] postprocessor.
15.37	306
30.4	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"]].
15.37	313
30.4	314	==== Autoprefixer settings ====
15.29	315
30.4	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).
15.43	317
30.4	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.
15.29	330
30.4	331	== Changelog ==
15.45	332
30.4	333	=== 0.8.0 ===
	334
	335	* Modifications for {{formcycle/}} version 6.5.x. This version is not compatible with version 6.4.x.
	336
30.3	337	=== 0.7.1 ===
	338
30.4	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.
30.3	340
15.69	341	=== 0.7.0 ===
15.64	342
30.4	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.
15.64	347
15.69	348	=== 0.6.1 ===
15.45	349
30.4	350	* Update browserslist.
	351	* Update the modern theme template.
15.45	352
15.69	353	=== 0.6.0 ===
15.45	354
30.4	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.
15.45	361
15.69	362	=== 0.5.0 ===
15.45	363
30.4	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
15.45	372
15.69	373	=== 0.4.0 ===
15.45	374
30.4	375	* Small changed to the user interface.
	376	* Add an option to prevent editors from being placed next to each other
15.45	377
15.69	378	=== 0.3.0 ===
15.45	379
30.4	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.
15.45	383
15.69	384	=== 0.2.0 ===
15.45	385
30.4	386	* Support multiple items to be selected for exporting
15.45	387
15.69	388	=== 0.1.0 ===
15.45	389
30.4	390	* Initial release.
	391	* Supports {{formcycle/}} starting at version 6.1.x.

Wiki source code of Theme-Konfigurator-Plugin

Navigation