[4.0] Module CSS grid layout classes

[ciar4n]

Summary of Changes

Currently most module position uses a 4 column CSS grid. This PR creates the following 2 groups of CSS grid modifier classes allowing users to extend individual module widths and heights across tracks within the grid. Only one class from each group to be added.

Width

• span-col-2 - Span module across 2 columns (50%)
• span-col-3 - Span module across 3 columns (75%)
• span-col-4 - Span module across 4 columns (100%)

Height

• span-row-2 - Span module across 2 rows
• span-row-3 - Span module across 3 rows
• span-row-4 - Span module across 4 rows

span-row-# classes will only expand the height of a module if a row exists for the module to expand in to. By default only one row exists. New rows are created when modules can not be contained in a single row and therefore wrap to a second (implicit grid). If a module wraps to a second row, the module will span the available width regardless of any span-col-# due to the set minmax function. span-row-# classes only extend down presuming the row exists.

I am not sure if we want more than 4 columns in the grid? 4 is minimal however I would say is enough for most situations. More columns can be easily added. Naming of the classes can also be changed if someone can suggest a better alternative?

Using classes means we are not tying Joomla to a grid size which was the case for the previous bootstrap field. Grid size is now solely set by the template in both grid size and the classes available.

Testing

Apply PR and add at most one class from each group to the 'Module Class' field of a module in the top-a, top-b, bottom-a or bottom-b module positions.

Browser Support

We should have support for CSS grid in IE Edge in the near future. Included is a flex fallback for IE11 (currently inc. Edge) for the following classes only..

• span-col-2
• span-col-3
• span-col-4

Without support for CSS grid, I can see no option to add support for the span-row-# classes in IE11.

Documentation Changes Required

Yes

Examples

span-col-2 (blue)

span-col-3 (blue)

span-col-2 span-row-2 (blue)

span-row-2 (blue)

span-col-3 span-row-3 (blue)

span-col-4 (blue)

[Twincarb]

Looks and works great until the viewport is dropped below 767px, for testing I used the following details.

5 modules in the same position with the first having span-col-4 or span-col-3 the rest with no extra details when dropping the viewport from 768px to 576px the first module is squashed and unviewable.

---

_{This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/18516.}

[ciar4n]

@Twincarb Thank you for testing. I'll make this responsive and fix conflicts in the morning.

[ciar4n]

@Twincarb Good catch.. this issue has been resolved.

[Twincarb]

@ciar4n I have just found some time to test again, below are my results...
5 modules only one given a class of span-col-4 this is ordered last when the viewpoint drops below 990px the span-col-4 item doesn't take up the entire width (I would expect it would)
5 modules only one given a class of span-col-2 at viewpoint below 990px the module only takes up 50% or 1 visible module space.

It may be my expectation of what I would expect to see when the screen size reduces, the results are consistent with the action that the modules take as the screen size reduces.

It just seems between the breakpoints of 768px and 990px it's not as fluid as it could be expected. Although that can be covered in the documentation I guess as by design. If you don't think that it's justified to make it more fluid at the lower dimensions I am happy to mark a successful test.

[ciar4n]

@Twincarb A fair point well made.

I have amended it so span-col-# classes expand to full width across 1 and 2 column screensizes (md & sm).