Hi klicknerds,

I am including screenshots and explanations for describing the new grid and layout improvements. These explanations are purely based on looking in the file system and experimenting. The core team will have expanded information and possible corrections for what I have explained.

"Page Theme classes can specify layout presets, which can use classes contained in grid frameworks or use their own custom classes."

When adding custom layouts, there is a new "Presets" option for adding layout presets. Layout presets are like regular custom layouts, but they are created in advance and can include custom classes and most importantly can be used to add multiple grid classes. The ability to add multiple grid classes allows for more tailored responsive designs (custom layouts use only one grid class).

Designers and developers can create collections of layout presets for their clients to use. Each layout preset could be suited for certain page layout tasks.

Preset layouts are defined in a theme's page_theme.php in a new method called getThemeAreaLayoutPresets().

As an example, the default Elemental theme comes with two presets, Left Sidebar and Right Sidebar, that use the Bootstrap 3 grid framework.

Example: Three Column preset I made to show how to add custom classes and multiple grid classes for each layout area


"Layouts now have design controls available to them, including custom templates and custom CSS classes."

Before 5.7.5, the ability to add classes and use the design tools (that blocks and areas use) were not available to layouts. In 5.7.5, classes can be added to layout containers (not individual columns), the design tools are available, and there is a new custom template feature.

The custom templates for layouts appear to be controlled by a new "Area Layout" block. The block description for it is a "Proxy block for area layouts".


"Added a new custom template “Parallax Image” available to layouts that employ a background image."

I believe this custom template will use parallax scrolling. Here is an example of what parallax scrolling looks like -https://ihatetomatoes.net/demos/parallax-scroll-effect/... .

I gave it a look and I think it might work this way:
- create a new layout
- add a background image to the layout
Edit Layout Design > Background Color and Image > Image > Choose New File
- apply the Parallax custom template
Edit Layout Design > Custom CSS Classes, Block Name, Custom Templates and Reset Styles > Custom Templates drop down "Parallax"

My results were mixed, so I am not totally sure how this works. Hopefully others will reply with their experiences.


"Grid frameworks can now specify hiding classes for responsive breakpoints, which can be controlled through block and area design settings."

There is a new Device Visibility subsection in the Shadow and Rotation section of the design settings for blocks, areas, and custom layouts. The Device Visibility subsection is made up of icons that represent screen widths - phone, tablet, laptop, desktop. Toggling an icon will hide the current content from that width (e.g. clicking on the desktop icon will hide the current content from desktop width screen sizes). What this is doing in the code is adding a CSS class to the current content.

Using Bootstrap 3 as an example, it has four "hidden" classes that map to the icons in Device Visibility.
.hidden-xs - phone - screen width under 768px
.hidden-sm - tablet - screen width over 768px
.hidden-md - laptop - screen width over 992px
.hidden-lg - desktop - screen width over 1200px

These "hidden" classes will be different for each framework and some developers may create their own "hidden" classes. The classes themselves will be defined in the grid framework PHP class using four new methods.
getPageThemeGridFrameworkHideOnExtraSmallDeviceClass()
getPageThemeGridFrameworkHideOnSmallDeviceClass()
getPageThemeGridFrameworkHideOnMediumDeviceClass()
getPageThemeGridFrameworkHideOnLargeDeviceClass()

Example use for these methods can be found in this core file:
concrete\src\Page\Theme\GridFramework\Type\Bootstrap3.php


"Grid containers that wrap around blocks based on their type can now be disabled or enabled on a per-block basis through the block design palette."

Grid frameworks that aren't using a "fluid" container will have fixed widths that are controlled by media queries (an example is Bootstrap 3, which uses container widths of 750px, 970px, and 1170px). Content in your page will be contained within the width of the current container. There are some situations where you don't want to contain the width of your content, you want it to be the full width of the page. Disabling the grid container allows you to do this.
- the grid container can be enabled or disabled on both blocks and custom layouts (not on areas)


"Added nested support to grid frameworks."

Before 5.7.5, if you created a custom layout, the "parent" layout could use a grid framework (e.g. Twitter Bootstrap) and any "child" layouts created within the parent layout would only have "Free-Form Layout" as a grid option. In 5.7.5, child layouts can now use grid frameworks.

Hi MrK

This is great news on the Layout improvements particularly the option to disable grid. I am guessing this has been done so that we can add an equivalent of a full width div without creating a new area.

I did try the the new function but when trying to add a bootstrap layout within a layout with no grid it does not seem to work and still defaults to no grid as well, was it designed that way.

Thanks
Rob

@Responsive

"I did try the the new function but when trying to add a bootstrap layout within a layout with no grid it does not seem to work and still defaults to no grid as well, was it designed that way."

I am afraid I don't understand the question.

To clarify, you created a layout and then disabled the grid container for it. Within this layout you added a child layout. The child layout also did not have a container.

I believe this is the expected behavior.

Bootstrap 3 containers are not nestable.
http://getbootstrap.com/css/#overview-container...

Example:
- create a layout
- disable the grid container for the layout
- within this layout add three child layouts

Yep thats correct , I was hoping to create a full width div without having to create a new area if that makes sense.

1) If I add a free-form layout and then disable grid i get

Now I need to add a layout within the above free-form layout. I choose add layout but don’t have the option of grid twitter bootstrap.

2) If I add twitter bootstrap layout and disable grid i get

Now I need to add a layout within the above bootstrap layout. I choose add layout and select bootstrap with 3 columns and click save. This layout is currently full width so i edit to enable grid and add a container but the layout still remains full width as following.

Any help please , I would like to know how to create a Layout grid within a disabled grid Layout if thats even possible.

@Responsive

I don't think it is designed to work that way.

I believe you should create a new area wrapped in a div that will be full width.

If you want to nest a layout inside another layout, and use BS inside the nested layout, try making the outer grid a Bootstrap Grid, rathe than free-form.

Thanks for the helpful post. We've got official documentation on the new layout preset concept here now:

http://www.concrete5.org/documentation/developers/5.7/designing-for...