PHPackages techdivision/flexcolumnlayouts - PHPackages - PHPackages [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register) 1. [Directory](/) 2. / 3. [Utility & Helpers](/categories/utility) 4. / 5. techdivision/flexcolumnlayouts ActiveNeos-plugin[Utility & Helpers](/categories/utility) techdivision/flexcolumnlayouts ============================== Flex column layouts for neos nodetypes 4.0.2(2y ago)34.7k7[2 PRs](https://github.com/techdivision/flexcolumnlayouts/pulls)CSS Since Sep 3Pushed 7mo ago16 watchersCompare [ Source](https://github.com/techdivision/flexcolumnlayouts)[ Packagist](https://packagist.org/packages/techdivision/flexcolumnlayouts)[ RSS](/packages/techdivision-flexcolumnlayouts/feed)WikiDiscussions master Synced 1mo ago READMEChangelog (10)Dependencies (4)Versions (33)Used By (0) Flex-ColumnLayouts for Neos CMS =============================== [](#flex-columnlayouts-for-neos-cms) Based on [TailwindCSS](https://tailwindcss.com/), but offers also css classes for [Bootstrap4](https://getbootstrap.com/docs/4.4/utilities/flex/). It extends your standard Neos-ColumnLayouts with flex properties, so you can adjust every column with [css flex properties](https://css-tricks.com/snippets/css/a-guide-to-flexbox/). Get started ----------- [](#get-started) 1. Install the package via packagist: Add `"techdivision/flexcolumnlayouts" : "~4.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. For editors ----------- [](#for-editors) You find a lot of settings now in your multi-column nodes. We kept the css names instead of more speaking ones and added some links to an interactive documentation right in the inspector. Flex is sometimes better understood if you [try it out](https://yoksel.github.io/flex-cheatsheet/). *Note: All the settings can be overidden per breakpoint.* ### NodeType level [](#nodetype-level) 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")](Documentation/assets/FlexColumnLayouts-NodeType.png) You have the following options for the whole grid - *Layout*: (as usual, but per breakpoint) like 50/50, 60/33 or similar - [flex-direction](https://yoksel.github.io/flex-cheatsheet/#section-flex-direction) - [flex-wrap](https://yoksel.github.io/flex-cheatsheet/#section-flex-wrap) - [justify-content](https://yoksel.github.io/flex-cheatsheet/#section-justify-content) - [align-items](https://yoksel.github.io/flex-cheatsheet/#section-align-items-self) - [align-content](https://yoksel.github.io/flex-cheatsheet/#section-align-content) ### Column level [](#column-level) Here you can see, how it looks like on Column level: There you can override your options. [![Column level](Documentation/assets/FlexColumnLayouts-Column.png "Column level")](Documentation/assets/FlexColumnLayouts-Column.png) - Override width: Here you can override the width on a column-basis, so that you can have individual grids like 25/33 and dont have to add fixed layouts for that - [flex-order](https://yoksel.github.io/flex-cheatsheet/#section-order) - [flex-shrink](https://yoksel.github.io/flex-cheatsheet/#section-flex-shrink) - Inline-Styles: background-color, text-color and background-image (experimental, just inline-styling - too specific to generalize) ### Principle [](#principle) 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. 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 -------------- [](#for-developers) ### TailwindCSS [](#tailwindcss) If you already use tailwindcss in your project, you are all set and the classnames will be available to you. If not, you have several choices: 1. (default) include the small css we deliver with this package which only include tailwind flex classnames 2. include the latest [tailwind css build](https://tailwindcss.com/docs/installation) in your project (might be oversized) 3. include the scss files we provide in this package that produces tailwind-like classes ``` @import 'Plugins/TechDivision.NodeTypes.FlexColumnLayouts/Resources/Private/Scss/TailwindFlexClasses'; ``` ### Bootstrap 4 & 5 Support [](#bootstrap-4--5-support) If you are using Bootstrap 4 or 5 in your project and have [Flex Utilities 4](https://getbootstrap.com/docs/4.4/utilities/flex/) or [Flex Utilities 5](https://getbootstrap.com/docs/5.0/utilities/flex/) available, you just have to: - Add the small stylesheet `Resources/Public/Css/BootstrapAdditionalFlexClasses.css` to your page that adds some classes that bootstrap doesn't provide. - Or include the scss file ``` @import 'Plugins/TechDivision.NodeTypes.FlexColumnLayouts/Resources/Private/Scss/BootstrapAdditionalFlexClasses'; ``` - For sure, you need to add some fusion code to replace the tailwind classnames, which are a bit different: (For replacement, we have a mapping file, where you can see the differences: `Configuration/Settings.CssClassMapping.Bootstrap.yaml` ``` prototype(TechDivision.NodeTypes.FlexColumnLayouts:MultiColumn) { containerClasses.@process.replaceClasses { expression = ${CssClassMapping.replace(value, 'bootstrap')} @position = 'end' } columns.itemRenderer.attributes.class.@process.replaceClasses { expression = ${CssClassMapping.replace(value, 'bootstrap')} @position = 'end' } } ``` ### Adding or Changing wrapper or column classes [](#adding-or-changing-wrapper-or-column-classes) In case if you want wrap the Flex-Container you can easily add your desired class (in this case container-fluid or container) within the fusion for MultiColumn. Also, you can add classes for Columns like this: ``` prototype(TechDivision.NodeTypes.FlexColumnLayouts:MultiColumn) { # add behaviour class and change wrapper class of wrapperClasses wrapperClasses = Neos.Fusion:Join { wrapper = 'my-wrapper-class' behaviour = 'container-fluid' @glue = ' ' } # add class to columns columns = Neos.Fusion:Collection { itemRenderer = Neos.Neos:ContentCollection { attributes = Neos.Fusion:Attributes { class = Neos.Fusion:Join { theme = 'myThemeClass' @glue = ' ' } } } } } ``` ### Node Migration [](#node-migration) In case you do not start with a fresh project, but want to have those features available on your existing multi-column containers as well, we provided you with a node migration: **Use with caution and only if you know what you are doing!** ``` ./flow node:migrate 20200904150412 ``` ### Change breakpoint settings [](#change-breakpoint-settings) If you include the scss files, you can overwrite the breakpoint variables defined by default: ``` $flexBreakpointConfiguration: ( '640px': 'sm\\:', '768px': 'md\\:', '1024px': 'lg\\:', '1280px': 'xl\\:', ); ``` #### Remove/Adjust breakpoint [](#removeadjust-breakpoint) To get rid of a breakpoint you just have to remove the breakpoint from SCCS and change the YAML configuration. e.g. you want to remove the md breakpoint and edit some labels to increase the usability for the Editor ``` 'TechDivision.NodeTypes.FlexColumnLayouts:BreakpointsMixin': superTypes: 'TechDivision.NodeTypes.FlexColumnLayouts:BreakpointsMixin.Md': false #disable mdBreakpoint ui: inspector: groups: defaultBreakpoint: label: 'Default (smallest)' smBreakpoint: label: 'Phone (sm) >= 576px' lgBreakpoint: label: 'Tablet (lg) >= 992px' xlBreakpoint: label: 'Desktop (xl) >= 1400px' ``` Enable More 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 \] or \[ Advanced \] features, you could activate them by extending the superTypes as follows: ### Flex Grid: [](#flex-grid) out of the box: only define Grid-Col sizes for breakpoints. #### Intermediate level will enable flex-properties: [](#intermediate-level-will-enable-flex-properties) - flex-direction () - align-items () Add this to your YAML-Configuration: ``` 'Neos.NodeTypes.ColumnLayouts:Column': superTypes: 'TechDivision.NodeTypes.FlexColumnLayouts:FlexContainer.IntermediateFeatures': true ``` #### Advanced level will enable all from Intermediate and enable flex-properties: [](#advanced-level-will-enable-all-from-intermediate-and-enable-flex-properties) - justify-content () - flex-wrap () - align-content: () Add this to your YAML-Configuration: ``` 'Neos.NodeTypes.ColumnLayouts:Column': superTypes: 'TechDivision.NodeTypes.FlexColumnLayouts:FlexContainer.AdvancedFeatures': true ``` ### Flex Column: [](#flex-column) - order: () #### Intermediate level will enable: [](#intermediate-level-will-enable) - flex-basis () Add this to your YAML-Configuration: ``` 'TechDivision.NodeTypes.FlexColumnLayouts:FlexCollection': superTypes: 'TechDivision.NodeTypes.FlexColumnLayouts:FlexCollection.IntermediateFeatures': true ``` #### Advanced level will enable all from Intermediate and enable flex-properties: [](#advanced-level-will-enable-all-from-intermediate-and-enable-flex-properties-1) - flex-shrink ()) Add this to your YAML-Configuration: ``` 'TechDivision.NodeTypes.FlexColumnLayouts:FlexCollection': superTypes: 'TechDivision.NodeTypes.FlexColumnLayouts:FlexCollection.AdvancedFeatures': true ``` Disable nesting of grids ------------------------ [](#disable-nesting-of-grids) ``` 'TechDivision.NodeTypes.FlexColumnLayouts:FlexCollection': constraints: nodeTypes: 'Neos.NodeTypes.ColumnLayouts:Column': false ``` Breaking Change from version 3 to 4 ----------------------------------- [](#breaking-change-from-version-3-to-4) One Column Layout will lose the col0 content collection, instead content will be directly inserted into the One Column Layout, this will result in losing content after updating. With `./flow node:repair --node-type TechDivision.NodeTypes.FlexColumnLayouts:OneColumn` you can delete the col0 from your One Column Layout, but you still have to add the old content manually. Attention --------- [](#attention) *Consider the loading order of your loaded packages!* Contribution ------------ [](#contribution) If you want to contribute or found a bug, pls provide a PR or file an issue - or get in touch with us! ### Health Score 42 — FairBetter than 90% of packages Maintenance44 Moderate activity, may be stable Popularity27 Limited adoption so far Community21 Small or concentrated contributor base Maturity65 Established project with proven stability Bus Factor1 Top contributor holds 53.1% of commits — single point of failure How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window. **Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores. **Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement. **Maturity (30%)** — Project age, version count, PHP version support, and release stability. ### Release Activity Cadence Every ~59 days Recently: every ~27 days Total 25 Last Release 668d ago Major Versions 0.0.2-alpha → 1.0.0-beta2020-09-04 v1.0.0 → v2.0.02020-09-17 v2.0.1 → 3.0.02021-04-16 3.2.3 → 4.0.02024-04-02 ### Community Maintainers ![](https://www.gravatar.com/avatar/e2402ac081fc0dc57b15f8cfcc16a1c1b37adfa3211a7fe30eb80d622b6586f3?d=identicon)[regniets](/maintainers/regniets) --- Top Contributors [![regniets](https://avatars.githubusercontent.com/u/4123716?v=4)](https://github.com/regniets "regniets (26 commits)")[![MVogge](https://avatars.githubusercontent.com/u/34127888?v=4)](https://github.com/MVogge "MVogge (7 commits)")[![FlorianHartl](https://avatars.githubusercontent.com/u/15820459?v=4)](https://github.com/FlorianHartl "FlorianHartl (6 commits)")[![anianweber](https://avatars.githubusercontent.com/u/18150589?v=4)](https://github.com/anianweber "anianweber (4 commits)")[![mbiberger](https://avatars.githubusercontent.com/u/8565550?v=4)](https://github.com/mbiberger "mbiberger (2 commits)")[![SimonPaidla](https://avatars.githubusercontent.com/u/28459705?v=4)](https://github.com/SimonPaidla "SimonPaidla (2 commits)")[![msteffinger](https://avatars.githubusercontent.com/u/31537445?v=4)](https://github.com/msteffinger "msteffinger (1 commits)")[![mwitte](https://avatars.githubusercontent.com/u/1611200?v=4)](https://github.com/mwitte "mwitte (1 commits)") ### Embed Badge ![Health badge](/badges/techdivision-flexcolumnlayouts/health.svg) ``` [![Health](https://phpackages.com/badges/techdivision-flexcolumnlayouts/health.svg)](https://phpackages.com/packages/techdivision-flexcolumnlayouts) ``` ### Alternatives [sitegeist/kaleidoscope Responsive-images for Neos 29352.4k10](/packages/sitegeist-kaleidoscope)[neos/seo SEO configuration and tools for Neos 13990.5k24](/packages/neos-seo)[neos/googleanalytics Google Analytics integration for Neos CMS 15125.7k](/packages/neos-googleanalytics)[kaufmanndigital/gdpr-cookieconsent A ready-to-run package, that integrates an advanced cookie consent banner into your Neos CMS site. 2540.7k](/packages/kaufmanndigital-gdpr-cookieconsent)[shel/neos-colorpicker A plugin for Neos CMS which provides a colorpicker editor 1494.4k6](/packages/shel-neos-colorpicker)[shel/neos-commandbar A commandbar (CMD+K) for Neos CMS 1614.6k1](/packages/shel-neos-commandbar) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)