clickpress / contao-clickpress-grid
Grid System for Contao based on CSS Grid
Installs: 5 153
Dependents: 0
Suggesters: 0
Security: 0
Stars: 14
Watchers: 4
Forks: 4
Open Issues: 1
Type:contao-bundle
Requires
- php: ^8.1
- contao/core-bundle: ^5.3
Requires (Dev)
- contao/easy-coding-standard: ^3.1
- contao/manager-plugin: ^2.3
- phpunit/phpunit: ^9.3
- symfony/phpunit-bridge: ^5.4
Conflicts
- contao/manager-plugin: <2.0 || >=3.0
README
Grid CSS for Contao
Add columns to your page content.
Contao Clickpress Grid uses CSS Grid and so less HTML is needed.
Installation
composer require clickpress/contao-clickpress-grid
or use the Contao Manager.
Usage
- Enable the built-in CSS grid in your Contao page layout settings or create your own custom CSS.
- Add a new content element of type "Gridset Start". The corresponding "Gridset End" will be added automatically.
- Configure your column settings in the "Gridset Start" element.
- Place your desired content elements between the "Gridset Start" and "Gridset End" elements.
If you need multiple content elements within a single column, wrap them with "Column Start" and "Column End" elements.
Customized CSS
To override the default grid styles:
- Uncheck "Load Clickpress Grid CSS" in the page layout settings.
- Copy and customize the clickpress-grid.scss file (https://github.com/clickpress/contao-clickpress-grid/blob/main/public/clickpress-grid.scss)
- Include your custom CSS as an external stylesheet in the layout settings.
Inside
This is the result of a 40% 30% 30% setting on desktop. So, three columns will be displayed in a row. The fourth column will be placed in a new row, automatically.
<div class="grid_desktop_40_30_30 ..."> <div class="ce_text">...</div> <div class="ce_text">...</div> <div class="ce_image">...</div> <div class="ce_text">...</div> <div class="ce_text">...</div> </div>
Credits
Big thanks to rocksolid_columns for some parts of the module.