1 Attachment(s)
12-column grid calculator
When you use a left or right column that breaks the 12-column grid that comes with Contao. Two features that break each other may be an issue in its own right, but normally I work around it with some style sheet changes that will fix the problem. The pain here is you need to calculate the width for every column type. So I made an Excel sheet to calculate the columns.
Important
Make sure the column is divisible by 12. I haven't rounded the width values so you'll see right away if you chose a correct multiple. Browser may not round the generated sizes correctly, or the total may be different from the available width.
Usage
1. On the first sheet fill in the desired total width and the margin's your column has
2. Copy the contents of sheet 2
3. Add to you style sheet enclosed within @media(min-width:980px) { }. This will override the default.
Notes
Enclosing output like described in step 3 is optional, but I find myself using it this way most of the time.
Related: flexible columns
Contao layouts are stiff; you either have a column or you don't. But I don't prefer adding a layout for every variant of columns, instead I use enable left and/or right in every layout. This means I can't use the width field for each column in the layout. Instead I have to add column width to my style sheet. The css needs to know which columns are shown, to do that add the code below in the body class. You can use one-, two- and threeColumnLayout to figure out the columns for current page. Adjust output from sheet 2 so it uses these classes (because this will probably be of use for pages with columns only).
Code:
<?php echo ($this->left && $this->right ? 'three' : ($this->left || $this->right ? 'two' : 'one')); ?>ColumnLayout<?php echo $this->left ? ' left' : ''; echo $this->right ? ' right' : ''; ?>
