Implement way to add wrapper divs and elements around multiple sections

[kevlardev]

There needs to be a way to easily add one or more wrapper divs or elements around multiple sections. This would most likely be best achieved through the yaml syntax and does not necessarily need to be represented in the layout manager UI as it would be simply for providing divs to target with css. Some sort of line and indentation to indicate that this named line would become

wrapping whatever sections are contained within it, as well as possibly some custom variables that could be passed as well such as additional classnames or attributes.

[mahagr]

See also #521

[alaazaoug]

I like that and it would be great if we can choose the wrapper tag between div or section tag, because if we have a section without h1-h6 headings it is better to use divs instead of section because sections needs a heading semantically ( for more about this see https://www.w3.org/wiki/HTML/Usage/Headings/Missing ) I quoted << As a general rule, include a heading (h1-h6) as a child of each section and article element. >>

[mahagr]

Here is updated version of the file format:

version: 2
preset:
  name: test
  image: 'gantry-admin://images/layouts/default.png'
layout:
  wrapper-header-wrapper:
    /header/:
      - [logo 20, position-0 80]
    /navigation/:
      - menu

  /grid-main-wrapper/:
    - sidebar 20:
      - position-7
      - position-4
      - position-5
    - main 60:
      - position-2
      - position-12
      - system-messages
      - system-content
    - aside 20:
      - position-6
      - position-8
      - position-3

  /footer/:
    - [position-9 30, position-10 40, position-11 30]
    - position-14

  offcanvas:
    - mobile-menu

The format is almost the same as previously, but I tried to simplify it a bit. Having /header/ means that the section has option for fullwith/boxed and it replaces container key in the older format. Number after space is still the width and if there's text after space it is the unique id.

Green text (keys) defines the structure and blue text (values) defines the content.

For numeric ids you need to use format like position-1, which contains both the type and id. Another way to say the same would be position position-1. Also logo-1 is equal to typing logo logo-1 and can be used as shorthand if you want to use numeric ids.

Reserved words for the structure (keys) are: div, row, column, offcanvas, section, header, navigation, aside, footer (and other section tags in html5), everything else is treated as <section id="g-...">.

In order to fully configure structure and content, there are also 2 other sections which allows people (and layout manager) to individually configure each element in the layout. They are split into two sections with flat data: structure and content.

[ghost]

So, no more container, i really like that you can set a row , column etc, as you know people were asking if is possible to assign classes too, should render <footer class="my-class"> will be this possible ?

One more. Could not all this options be added, like this?

/footer/:
  class: my-class
  position: 
    - position-14
    - position-15

I know this is the simplified version of the layout, but the full layout, is a bit too complex, you will lose your head when you need to add those rows and blocks. Would be really cool to have something similar to particle yaml format in simplified version.

[JoomFX]

+1 to @adi8i 's comment about the class. That would be awesome!

[mahagr]

I didn't write the second part of the yaml file into my first message, but I've already thought on how to do what @adi8i suggests. I disagree and agree with the proposal -- I don't think that the main structure should contain every possible parameter as we would just end up having the complex syntax which we have right now coming from layout manager. Instead of that I would split the file into 3 parts where:

• 'layout' defines the structure (defined above in my comment)
• 'structure' will do what @adi8i proposes above
• 'content' will have flat list of particle configurations

[ghost]

Sounds great @mahagr.