From 215d55775593fafe62103b3cbb6c0ba655c1434f Mon Sep 17 00:00:00 2001 From: Florian Hartl Date: Wed, 24 Nov 2021 15:10:17 +0100 Subject: [PATCH 1/3] NCP-26: Refactoring and improving UX --- ...ypes.FlexCollection.AdvancedFeatures.yaml} | 5 +- ...deTypes.FlexCollection.BasicFeatures.yaml} | 4 +- ...s.FlexCollection.IntermediateFeatures.yaml | 5 ++ Configuration/NodeTypes.FlexCollection.yaml | 9 ++- ...Types.FlexContainer.AdvancedFeatures.yaml} | 4 +- ...NodeTypes.FlexContainer.BasicFeatures.yaml | 5 ++ .../NodeTypes.FlexContainer.Default.yaml | 7 -- ...es.FlexContainer.IntermediateFeatures.yaml | 6 ++ .../NodeTypes.Override.Content.Column.yaml | 7 +- README.md | 74 +++++++++++++++---- .../de/NodeTypes/FlexOrderMixin.xlf | 16 ++-- Resources/Private/Translations/en/General.xlf | 2 +- .../en/NodeTypes/FlexOrderMixin.xlf | 12 +-- 13 files changed, 107 insertions(+), 49 deletions(-) rename Configuration/{NodeTypes.FlexCollection.Advanced.yaml => NodeTypes.FlexCollection.AdvancedFeatures.yaml} (73%) rename Configuration/{NodeTypes.FlexCollection.Default.yaml => NodeTypes.FlexCollection.BasicFeatures.yaml} (74%) create mode 100644 Configuration/NodeTypes.FlexCollection.IntermediateFeatures.yaml rename Configuration/{NodeTypes.FlexContainer.Advanced.yaml => NodeTypes.FlexContainer.AdvancedFeatures.yaml} (93%) create mode 100644 Configuration/NodeTypes.FlexContainer.BasicFeatures.yaml delete mode 100644 Configuration/NodeTypes.FlexContainer.Default.yaml create mode 100644 Configuration/NodeTypes.FlexContainer.IntermediateFeatures.yaml diff --git a/Configuration/NodeTypes.FlexCollection.Advanced.yaml b/Configuration/NodeTypes.FlexCollection.AdvancedFeatures.yaml similarity index 73% rename from Configuration/NodeTypes.FlexCollection.Advanced.yaml rename to Configuration/NodeTypes.FlexCollection.AdvancedFeatures.yaml index d24417c..47d2fc4 100644 --- a/Configuration/NodeTypes.FlexCollection.Advanced.yaml +++ b/Configuration/NodeTypes.FlexCollection.AdvancedFeatures.yaml @@ -1,6 +1,5 @@ # advanced settings for flex cols not for every editor -'TechDivision.NodeTypes.FlexColumnLayouts:FlexCollection.Advanced': +'TechDivision.NodeTypes.FlexColumnLayouts:FlexCollection.AdvancedFeatures': abstract: true superTypes: - 'TechDivision.NodeTypes.FlexColumnLayouts:FlexBasisMixin': true - 'TechDivision.NodeTypes.FlexColumnLayouts:FlexShrinkMixin': true + 'TechDivision.NodeTypes.FlexColumnLayouts:FlexShrinkMixin': true \ No newline at end of file diff --git a/Configuration/NodeTypes.FlexCollection.Default.yaml b/Configuration/NodeTypes.FlexCollection.BasicFeatures.yaml similarity index 74% rename from Configuration/NodeTypes.FlexCollection.Default.yaml rename to Configuration/NodeTypes.FlexCollection.BasicFeatures.yaml index cf750b8..b53cb3f 100644 --- a/Configuration/NodeTypes.FlexCollection.Default.yaml +++ b/Configuration/NodeTypes.FlexCollection.BasicFeatures.yaml @@ -1,6 +1,6 @@ # useful flex col properties for every editor -'TechDivision.NodeTypes.FlexColumnLayouts:FlexCollection.Default': +'TechDivision.NodeTypes.FlexColumnLayouts:FlexCollection.BasicFeatures': abstract: true superTypes: 'TechDivision.NodeTypes.FlexColumnLayouts:FlexOrderMixin': true - 'TechDivision.NodeTypes.FlexColumnLayouts:VisualMixin': true + 'TechDivision.NodeTypes.FlexColumnLayouts:VisualMixin': true \ No newline at end of file diff --git a/Configuration/NodeTypes.FlexCollection.IntermediateFeatures.yaml b/Configuration/NodeTypes.FlexCollection.IntermediateFeatures.yaml new file mode 100644 index 0000000..f88139c --- /dev/null +++ b/Configuration/NodeTypes.FlexCollection.IntermediateFeatures.yaml @@ -0,0 +1,5 @@ +# Intermediate settings for flex cols not for every editor +'TechDivision.NodeTypes.FlexColumnLayouts:FlexCollection.IntermediateFeatures': + abstract: true + superTypes: + 'TechDivision.NodeTypes.FlexColumnLayouts:FlexBasisMixin': true \ No newline at end of file diff --git a/Configuration/NodeTypes.FlexCollection.yaml b/Configuration/NodeTypes.FlexCollection.yaml index 7803bcd..2b03567 100644 --- a/Configuration/NodeTypes.FlexCollection.yaml +++ b/Configuration/NodeTypes.FlexCollection.yaml @@ -5,8 +5,13 @@ abstract: true superTypes: 'Neos.Neos:ContentCollection': true - 'TechDivision.NodeTypes.FlexColumnLayouts:FlexCollection.Default': true - 'TechDivision.NodeTypes.FlexColumnLayouts:FlexCollection.Advanced': true + 'TechDivision.NodeTypes.FlexColumnLayouts:FlexCollection.BasicFeatures': true +###### Uncomment or extend the [nodeType] below to activate the [Intermediate ] or [Advanced ] features. ###### +# 'TechDivision.NodeTypes.FlexColumnLayouts:FlexCollection.IntermediateFeatures': true +# 'TechDivision.NodeTypes.FlexColumnLayouts:FlexCollection.AdvancedFeatures': true + + + # add flex collection to every column nodetype 'TechDivision.NodeTypes.FlexColumnLayouts:FlexCollection.FirstColumn': diff --git a/Configuration/NodeTypes.FlexContainer.Advanced.yaml b/Configuration/NodeTypes.FlexContainer.AdvancedFeatures.yaml similarity index 93% rename from Configuration/NodeTypes.FlexContainer.Advanced.yaml rename to Configuration/NodeTypes.FlexContainer.AdvancedFeatures.yaml index 9680dc5..60e3434 100644 --- a/Configuration/NodeTypes.FlexContainer.Advanced.yaml +++ b/Configuration/NodeTypes.FlexContainer.AdvancedFeatures.yaml @@ -1,7 +1,7 @@ # Advanced settings for flex grid not useful for every editor -'TechDivision.NodeTypes.FlexColumnLayouts:FlexContainer.Advanced': +'TechDivision.NodeTypes.FlexColumnLayouts:FlexContainer.AdvancedFeatures': abstract: true superTypes: 'TechDivision.NodeTypes.FlexColumnLayouts:FlexJustifyMixin': true 'TechDivision.NodeTypes.FlexColumnLayouts:FlexWrapMixin': true - 'TechDivision.NodeTypes.FlexColumnLayouts:FlexAlignContentMixin': true #Only multi-line flex containers ever have free space in the cross-axis + 'TechDivision.NodeTypes.FlexColumnLayouts:FlexAlignContentMixin': true #Only multi-line flex containers ever have free space in the cross-axis \ No newline at end of file diff --git a/Configuration/NodeTypes.FlexContainer.BasicFeatures.yaml b/Configuration/NodeTypes.FlexContainer.BasicFeatures.yaml new file mode 100644 index 0000000..6301aa3 --- /dev/null +++ b/Configuration/NodeTypes.FlexContainer.BasicFeatures.yaml @@ -0,0 +1,5 @@ +# useful flex grid properties for every editor +'TechDivision.NodeTypes.FlexColumnLayouts:FlexContainer.BasicFeatures': + abstract: true + superTypes: + 'TechDivision.NodeTypes.FlexColumnLayouts:VisualMixin': true \ No newline at end of file diff --git a/Configuration/NodeTypes.FlexContainer.Default.yaml b/Configuration/NodeTypes.FlexContainer.Default.yaml deleted file mode 100644 index 4b88ef5..0000000 --- a/Configuration/NodeTypes.FlexContainer.Default.yaml +++ /dev/null @@ -1,7 +0,0 @@ -# useful flex grid properties for every editor -'TechDivision.NodeTypes.FlexColumnLayouts:FlexContainer.Default': - abstract: true - superTypes: - 'TechDivision.NodeTypes.FlexColumnLayouts:FlexDirectionMixin': true - 'TechDivision.NodeTypes.FlexColumnLayouts:FlexAlignItemsMixin': true - 'TechDivision.NodeTypes.FlexColumnLayouts:VisualMixin': true diff --git a/Configuration/NodeTypes.FlexContainer.IntermediateFeatures.yaml b/Configuration/NodeTypes.FlexContainer.IntermediateFeatures.yaml new file mode 100644 index 0000000..719a720 --- /dev/null +++ b/Configuration/NodeTypes.FlexContainer.IntermediateFeatures.yaml @@ -0,0 +1,6 @@ +# Intermediate settings for flex grid not useful for every editor +'TechDivision.NodeTypes.FlexColumnLayouts:FlexContainer.IntermediateFeatures': + abstract: true + superTypes: + 'TechDivision.NodeTypes.FlexColumnLayouts:FlexDirectionMixin': true + 'TechDivision.NodeTypes.FlexColumnLayouts:FlexAlignItemsMixin': true \ No newline at end of file diff --git a/Configuration/NodeTypes.Override.Content.Column.yaml b/Configuration/NodeTypes.Override.Content.Column.yaml index 0caf7bb..5b2e6d4 100644 --- a/Configuration/NodeTypes.Override.Content.Column.yaml +++ b/Configuration/NodeTypes.Override.Content.Column.yaml @@ -1,8 +1,9 @@ # override with extended properties for default flex container 'Neos.NodeTypes.ColumnLayouts:Column': - superTypes: - 'TechDivision.NodeTypes.FlexColumnLayouts:FlexContainer.Default': true - 'TechDivision.NodeTypes.FlexColumnLayouts:FlexContainer.Advanced': true + 'TechDivision.NodeTypes.FlexColumnLayouts:FlexContainer.BasicFeatures': true +###### Uncomment or extend the [nodeType] below to activate the [Intermediate ] or [Advanced ] features. ###### +# 'TechDivision.NodeTypes.FlexColumnLayouts:FlexContainer.IntermediateFeatures': true +# 'TechDivision.NodeTypes.FlexColumnLayouts:FlexContainer.AdvancedFeatures': true ui: inspector: groups: diff --git a/README.md b/README.md index f852053..a0da8fe 100644 --- a/README.md +++ b/README.md @@ -5,7 +5,7 @@ It extends your standard Neos-ColumnLayouts with flex properties so you can adju ## Get started 1. Install the package via packagist: Add `"techdivision/flexcolumnlayouts" : "~2.0"` to the require section of the composer.json or run `composer require techdivision/flexcolumnlayouts`. 2. If needed (i.e. nothing follow the instructions under "TailwindCSS" or "Bootstrap4" -3. Apply a node migration, if you want to use this feature on existing nodes. +3. Apply a node migration, if you want to use this feature on existing nodes. ## For editors You find a whole lot of settings now in your multi column nodes. @@ -16,7 +16,7 @@ Flex is sometimes better understood if you [try it out](https://yoksel.github.io ### NodeType level -Here you can see, how it looks like on NodeType level: You have plenty of options to adjust your columns +Here you can see, how it looks like on NodeType level: You have plenty of options to adjust your columns IF YOU EXTEND ALL ADVANCED FEATURES WITH SUPERTYPES [Go to Extend Flex-Properties With More Advanced Features section](#extend-flex-properties-with-more-advanced-features) ![NodeType level](Documentation/assets/FlexColumnLayouts-NodeType.png "NodeType level") @@ -42,14 +42,12 @@ Here you can see, how it looks like on Column level: There you can override your * Inline-Styles: background-color, text-color and background-image (experimental, just inline-styling - too specific to generalize) ### Principle -The idea behind this package is to have a full set of options for flex layouts available, so you can: +The idea behind this package is to have a full extendable set of options for flex layouts available, so you can: 1. Do some experiments 2. Check which layouts improve experience, readability and layout on your website 3. Build new NodeTypes from that template -Having all those options at hand might be too complicated for some editors, but gives a great toolbox for advanced ones. - -**We consider it rather useful for prototyping or advanced editors.** +Having all those options at hand might be too complicated for some editors, but gives a great toolbox for advanced ones. Therefore we keep the default features as simple as possible. [Go to Extend Flex-Properties With More Advanced Features section](#extend-flex-properties-with-more-advanced-features) ## For developers @@ -160,31 +158,77 @@ e.g. you want to remove the md breakpoint and edit some labels to increase the u label: 'Desktop (xl) >= 1400px' ``` -## Disable flex-properties -On default all flex properties enabled. To provide a better usability for editors, you are able to deactivate them. -Feel free to them them if you need one or more. -### Flex Grid (suggestion for editors) +## Out-of-the-box Flex-Properties +On Default only the basic features are enabled, to keep it simple but essential features for a better usability for editors. + + +### Extend flex-properties with more advanced features +To activate the [ Intermediate ] and [ Advanced ] features, you could activate them by extending the superTypes as follows: + + +#### Flex Grid: +##### Basic (suggestion for editors) +```yaml +'Neos.NodeTypes.ColumnLayouts:Column': + superTypes: + 'TechDivision.NodeTypes.FlexColumnLayouts:FlexContainer.BasicFeatures': true +``` + +##### Intermediate +```yaml +'Neos.NodeTypes.ColumnLayouts:Column': + superTypes: + 'TechDivision.NodeTypes.FlexColumnLayouts:FlexContainer.BasicFeatures': true + 'TechDivision.NodeTypes.FlexColumnLayouts:FlexContainer.IntermediateFeatures': true +``` +##### Advanced ```yaml 'Neos.NodeTypes.ColumnLayouts:Column': superTypes: - 'TechDivision.NodeTypes.FlexColumnLayouts:FlexContainer.Advanced': false - 'TechDivision.NodeTypes.FlexColumnLayouts:FlexJustifyMixin': true + 'TechDivision.NodeTypes.FlexColumnLayouts:FlexContainer.BasicFeatures': true + 'TechDivision.NodeTypes.FlexColumnLayouts:FlexContainer.IntermediateFeatures': true + 'TechDivision.NodeTypes.FlexColumnLayouts:FlexContainer.AdvancedFeatures': true ``` Consider the loading order of your loaded packages! -### Flex Column (suggestion for editors) + + +#### Flex Column: +##### Basic (suggestion for editors) ```yaml 'TechDivision.NodeTypes.FlexColumnLayouts:FlexCollection': superTypes: - 'TechDivision.NodeTypes.FlexColumnLayouts:FlexCollection.Advanced': false - 'TechDivision.NodeTypes:Mixin.Layout': true + 'TechDivision.NodeTypes.FlexColumnLayouts:FlexCollection.BasicFeatures': true ``` +##### Intermediate +```yaml +'TechDivision.NodeTypes.FlexColumnLayouts:FlexCollection': + superTypes: + 'TechDivision.NodeTypes.FlexColumnLayouts:FlexCollection.BasicFeatures': true + 'TechDivision.NodeTypes.FlexColumnLayouts:FlexCollection.IntermediateFeatures': true +``` + +##### Advanced +```yaml +'TechDivision.NodeTypes.FlexColumnLayouts:FlexCollection': + superTypes: + 'TechDivision.NodeTypes.FlexColumnLayouts:FlexCollection.BasicFeatures': true + 'TechDivision.NodeTypes.FlexColumnLayouts:FlexCollection.IntermediateFeatures': true + 'TechDivision.NodeTypes.FlexColumnLayouts:FlexCollection.AdvancedFeatures': true +``` + +Consider the loading order of your loaded packages! + + + + + ## Disable nesting of grids ```yaml 'TechDivision.NodeTypes.FlexColumnLayouts:FlexCollection': diff --git a/Resources/Private/Translations/de/NodeTypes/FlexOrderMixin.xlf b/Resources/Private/Translations/de/NodeTypes/FlexOrderMixin.xlf index fe82169..dce5c34 100644 --- a/Resources/Private/Translations/de/NodeTypes/FlexOrderMixin.xlf +++ b/Resources/Private/Translations/de/NodeTypes/FlexOrderMixin.xlf @@ -3,27 +3,27 @@ - position of Column - Position der Spalte + Order of column + Reihenfolge der Spalten - This setting will affect the position of the columns. E.g. if the last column has the position 'on first position' it will be placed on the first slot of the flex container. This is useful for different ordering at different breakpoints. Further Documentation: https://yoksel.github.io/flex-cheatsheet/#section-order + This setting will affect the position of the columns. E.g. if the last column has the position 'on 1st position' it will be placed on the first slot of the flex container. This is useful for different ordering at different breakpoints. Further Documentation: https://yoksel.github.io/flex-cheatsheet/#section-order Die Einstellung betrifft die Anordnung der einzelnen Spalten. Z.b. wenn die letzte Spalte die Position 'an erster Position' erhält, wird diese als erste Position im Flex-Container angezeigt. Das ist dahingehend hilfreich um verschiedene Positionen auf verschiedenen Breakpoints einzustellen. Weiterführende Dokumentation: https://yoksel.github.io/flex-cheatsheet/#section-order - running column number - fortlaufende Spaltennummer + none + none - on first position + on 1st position an erster Position - on second position + on 2nd position an zweiter Position - on third position + on 3rd position an dritter Position diff --git a/Resources/Private/Translations/en/General.xlf b/Resources/Private/Translations/en/General.xlf index b08a419..5d2bcdd 100644 --- a/Resources/Private/Translations/en/General.xlf +++ b/Resources/Private/Translations/en/General.xlf @@ -15,5 +15,5 @@ Four column content - TechDivision.NodeTypes.FlexColumnLayouts:General:grid.with.threecolumn + diff --git a/Resources/Private/Translations/en/NodeTypes/FlexOrderMixin.xlf b/Resources/Private/Translations/en/NodeTypes/FlexOrderMixin.xlf index 4863cf8..f8e088a 100644 --- a/Resources/Private/Translations/en/NodeTypes/FlexOrderMixin.xlf +++ b/Resources/Private/Translations/en/NodeTypes/FlexOrderMixin.xlf @@ -3,22 +3,22 @@ - position of column + Order of column - This setting will affect the position of the columns. E.g. if the last column has the position 'on first position' it will be placed on the first slot of the flex container. This is useful for different ordering at different breakpoints. Documentation: https://yoksel.github.io/flex-cheatsheet/#section-order + This setting will affect the position of the columns. E.g. if the last column has the position 'on 1st position' it will be placed on the first slot of the flex container. This is useful for different ordering at different breakpoints. Documentation: https://yoksel.github.io/flex-cheatsheet/#section-order - running column number + none - on first position + on 1st position - on second position + on 2nd position - on third position + on 3rd position on last position From 9c2183f9f612a3e5187c2f9d897afe37530841b6 Mon Sep 17 00:00:00 2001 From: Florian Hartl Date: Fri, 26 Nov 2021 09:42:23 +0100 Subject: [PATCH 2/3] NCP-26: Refactoring, advanced has intermediate feature too --- Configuration/NodeTypes.FlexCollection.AdvancedFeatures.yaml | 1 + Configuration/NodeTypes.FlexContainer.AdvancedFeatures.yaml | 1 + Configuration/NodeTypes.Override.Content.Column.yaml | 3 ++- 3 files changed, 4 insertions(+), 1 deletion(-) diff --git a/Configuration/NodeTypes.FlexCollection.AdvancedFeatures.yaml b/Configuration/NodeTypes.FlexCollection.AdvancedFeatures.yaml index 47d2fc4..a97a3dc 100644 --- a/Configuration/NodeTypes.FlexCollection.AdvancedFeatures.yaml +++ b/Configuration/NodeTypes.FlexCollection.AdvancedFeatures.yaml @@ -2,4 +2,5 @@ 'TechDivision.NodeTypes.FlexColumnLayouts:FlexCollection.AdvancedFeatures': abstract: true superTypes: + 'TechDivision.NodeTypes.FlexColumnLayouts:FlexCollection.IntermediateFeatures': true 'TechDivision.NodeTypes.FlexColumnLayouts:FlexShrinkMixin': true \ No newline at end of file diff --git a/Configuration/NodeTypes.FlexContainer.AdvancedFeatures.yaml b/Configuration/NodeTypes.FlexContainer.AdvancedFeatures.yaml index 60e3434..98e787b 100644 --- a/Configuration/NodeTypes.FlexContainer.AdvancedFeatures.yaml +++ b/Configuration/NodeTypes.FlexContainer.AdvancedFeatures.yaml @@ -2,6 +2,7 @@ 'TechDivision.NodeTypes.FlexColumnLayouts:FlexContainer.AdvancedFeatures': abstract: true superTypes: + 'TechDivision.NodeTypes.FlexColumnLayouts:FlexContainer.IntermediateFeatures': true 'TechDivision.NodeTypes.FlexColumnLayouts:FlexJustifyMixin': true 'TechDivision.NodeTypes.FlexColumnLayouts:FlexWrapMixin': true 'TechDivision.NodeTypes.FlexColumnLayouts:FlexAlignContentMixin': true #Only multi-line flex containers ever have free space in the cross-axis \ No newline at end of file diff --git a/Configuration/NodeTypes.Override.Content.Column.yaml b/Configuration/NodeTypes.Override.Content.Column.yaml index 5b2e6d4..51659a6 100644 --- a/Configuration/NodeTypes.Override.Content.Column.yaml +++ b/Configuration/NodeTypes.Override.Content.Column.yaml @@ -1,7 +1,8 @@ # override with extended properties for default flex container 'Neos.NodeTypes.ColumnLayouts:Column': + superTypes: 'TechDivision.NodeTypes.FlexColumnLayouts:FlexContainer.BasicFeatures': true -###### Uncomment or extend the [nodeType] below to activate the [Intermediate ] or [Advanced ] features. ###### +###### Overwrite the [nodeType] within your project to activate the [Intermediate ] exclusive or [Advanced ] features. ###### # 'TechDivision.NodeTypes.FlexColumnLayouts:FlexContainer.IntermediateFeatures': true # 'TechDivision.NodeTypes.FlexColumnLayouts:FlexContainer.AdvancedFeatures': true ui: From 0b52c7885334a35b1ffe5ff3d180719246eb5016 Mon Sep 17 00:00:00 2001 From: Florian Hartl Date: Fri, 26 Nov 2021 12:00:26 +0100 Subject: [PATCH 3/3] NCP-26: Updated Readme.md --- README.md | 64 +++++++++++++++++++++++++++---------------------------- 1 file changed, 31 insertions(+), 33 deletions(-) diff --git a/README.md b/README.md index a0da8fe..8249404 100644 --- a/README.md +++ b/README.md @@ -160,73 +160,69 @@ e.g. you want to remove the md breakpoint and edit some labels to increase the u -## Out-of-the-box Flex-Properties +## Enable More Flex-Properties On Default only the basic features are enabled, to keep it simple but essential features for a better usability for editors. -### Extend flex-properties with more advanced features -To activate the [ Intermediate ] and [ Advanced ] features, you could activate them by extending the superTypes as follows: +Extend flex-properties with more advanced features +To activate the [ Intermediate ] or [ Advanced ] features, you could activate them by extending the superTypes as follows: -#### Flex Grid: -##### Basic (suggestion for editors) -```yaml -'Neos.NodeTypes.ColumnLayouts:Column': - superTypes: - 'TechDivision.NodeTypes.FlexColumnLayouts:FlexContainer.BasicFeatures': true -``` +### Flex Grid: + +out of the box: only define Grid-Col sizes for breakpoints. + +#### Intermediate level will enable flex-properties: +- flex-direction (https://yoksel.github.io/flex-cheatsheet/#section-flex-direction) +- align-items (https://yoksel.github.io/flex-cheatsheet/#section-align-items-self) -##### Intermediate +Add this to your YAML-Configuration: ```yaml 'Neos.NodeTypes.ColumnLayouts:Column': superTypes: - 'TechDivision.NodeTypes.FlexColumnLayouts:FlexContainer.BasicFeatures': true 'TechDivision.NodeTypes.FlexColumnLayouts:FlexContainer.IntermediateFeatures': true ``` -##### Advanced +#### Advanced level will enable all from Intermediate and enable flex-properties: +- justify-content (https://yoksel.github.io/flex-cheatsheet/#section-justify-content) +- flex-wrap (https://yoksel.github.io/flex-cheatsheet/#section-flex-wrap) +- align-content: (https://yoksel.github.io/flex-cheatsheet/#section-align-content) + +Add this to your YAML-Configuration: ```yaml 'Neos.NodeTypes.ColumnLayouts:Column': superTypes: - 'TechDivision.NodeTypes.FlexColumnLayouts:FlexContainer.BasicFeatures': true - 'TechDivision.NodeTypes.FlexColumnLayouts:FlexContainer.IntermediateFeatures': true 'TechDivision.NodeTypes.FlexColumnLayouts:FlexContainer.AdvancedFeatures': true ``` -Consider the loading order of your loaded packages! +### Flex Column: +- order: (https://yoksel.github.io/flex-cheatsheet/#section-order) + +#### Intermediate level will enable: + +- flex-basis (https://yoksel.github.io/flex-cheatsheet/#section-flex-basis) -#### Flex Column: -##### Basic (suggestion for editors) -```yaml -'TechDivision.NodeTypes.FlexColumnLayouts:FlexCollection': - superTypes: - 'TechDivision.NodeTypes.FlexColumnLayouts:FlexCollection.BasicFeatures': true -``` -##### Intermediate +Add this to your YAML-Configuration: ```yaml 'TechDivision.NodeTypes.FlexColumnLayouts:FlexCollection': superTypes: - 'TechDivision.NodeTypes.FlexColumnLayouts:FlexCollection.BasicFeatures': true 'TechDivision.NodeTypes.FlexColumnLayouts:FlexCollection.IntermediateFeatures': true ``` -##### Advanced +#### Advanced level will enable all from Intermediate and enable flex-properties: +- flex-shrink (https://yoksel.github.io/flex-cheatsheet/#section-flex-shrink)) + +Add this to your YAML-Configuration: ```yaml 'TechDivision.NodeTypes.FlexColumnLayouts:FlexCollection': superTypes: - 'TechDivision.NodeTypes.FlexColumnLayouts:FlexCollection.BasicFeatures': true - 'TechDivision.NodeTypes.FlexColumnLayouts:FlexCollection.IntermediateFeatures': true 'TechDivision.NodeTypes.FlexColumnLayouts:FlexCollection.AdvancedFeatures': true ``` -Consider the loading order of your loaded packages! - - - ## Disable nesting of grids @@ -237,7 +233,9 @@ Consider the loading order of your loaded packages! 'Neos.NodeTypes.ColumnLayouts:Column': false ``` -Consider the loading order of your loaded packages! + +## Attention +*Consider the loading order of your loaded packages!* ## Contribution If you want to contribute or found a bug, pls provide a PR or file an issue - or get in touch with us!