Forums

5.7 Does the new Layout engine work with all grids?

Permalink
Hi There,

Does 5.7 make assumptions about how a gird is constructed?

We're new to 5.7 but are having trouble with grids that divide the available space - as opposed to grids that force specific unit sizes and require a row each time units equal the full grid size (like Bootstrap or Foundation).

For example, grid__unit-1 is full width (100%) and grid__unit-3 divides whatever space is available into 3 (33.3333333%).

But when we try and integrate this into a custom grid package, we get very odd results, we have the following in the custom grid framework file:

public function supportsNesting()
    {
        return true;
    }
    public function getPageThemeGridFrameworkName()
    {
        return t('Theme Name');
    }
    public function getPageThemeGridFrameworkRowStartHTML()
    {
        return '';
    }
    public function getPageThemeGridFrameworkRowEndHTML()
    {
        return '';
Viewing 15 lines of 38 lines. View entire code block.


But when we try to create a 3 column layout C5 outputs the following:
<div class="grid">
   <div class="grid__unit-1">
      <div>
         <div class="grid__unit-6">
             <p>This is a test</p>
         </div>
         <div class="grid__unit-6">
             <p>This is a test</p>
         </div>
         <div class="grid__unit-7">
             <p>This is a test</p>
         </div>
      </div>
   </div>
</div>

But what it should output is this:
<div class="grid">
   <div class="grid__unit-3">
      <p>This is a test</p>
   </div>
   <div class="grid__unit-3">
      <p>This is a test</p>
   </div>
   <div class="grid__unit-3">
      <p>This is a test</p>
   </div>
</div>

Questions:

1.
How do we tell c5 to not wrap everything in a div with a class of grid__unit-1?

2.
How do we tell c5 to not output row divs (notice the div wrapper with no class in the C5 output)?

3.
How do we get c5 to recognise the proper grid unit classes?
We've ordered the grid classes from smallest unit to wides (100%) which is how Bootstrap or 960 is setup.

We're a bit worried that C5 is making assumptions about how grids are constructed - what happens if we want a flexbox grid?

Any pointers in the right direction would be much appreciated.

Cheers

Ben
 
MrKDilkington replied on at Permalink Reply
MrKDilkington
Hi cmscss,

"Does 5.7 make assumptions about how a gird is constructed?"

Yes, I believe it looks for grid units to be multiples of the smallest unit and from smallest to largest in the getPageThemeGridFrameworkColumnClasses() $columns array.

This topic was recently discussed on the forum. I recommend reading over the forum thread, it should answer your questions.
https://www.concrete5.org/community/forums/5-7-discussion/custom-gri...

Also, I recommend reviewing the documentation relating to grid frameworks.
https://www.concrete5.org/documentation/developers/5.7/designing-for...
cmscss replied on at Permalink Reply
Awesome, thanks heaps for the reply.

After reading the posts, we're still confused as it seems like you can only work with grids that use numbering like Bootstrap. So will have to refactor grid CSS we use to fit the engine - does that sound right?

We’ve fixed the engine wrapping everything in an extra full-width div by adding this to every area: 
$a->setAreaGridMaximumColumns(8);

But we’re still have trouble with the engine adding a row div (the grid doesn’t require one) - do know how to remove that? We've tried removing the following but get errors:

public function getPageThemeGridFrameworkRowStartHTML()
    {
        return '';
    }
    public function getPageThemeGridFrameworkRowEndHTML()
    {
        return '';
    }

Is there something we can use instead of return ''; to stop the div from outputting maybe?

Also, is there a way to edit the layout after it's created? We have to delete the layout (and all content) if you want to add anpther column - is that the same as your experience?

Cheers

Ben
MrKDilkington replied on at Permalink Reply
MrKDilkington
"After reading the posts, we're still confused as it seems like you can only work with grids that use numbering like Bootstrap. So will have to refactor grid CSS we use to fit the engine - does that sound right?"

I am afraid I don't understand the question.

"Also, is there a way to edit the layout after it's created? We have to delete the layout (and all content) if you want to add anpther column - is that the same as your experience?"

After a layout is created, I believe you can only change the column widths and offsets and cannot add additional columns. If you need an additional column, create a new layout and drag the blocks from the old layout into the new layout. After moving the blocks into the new layout, delete the old layout.
JohntheFish replied on at Permalink Reply
JohntheFish
Just brainstorming here. If the core doesn't like empty returns, will a return with an html comment fool it?
mesuva replied on at Permalink Reply
mesuva
When you set these functions to return '', are you getting a fatal error?

If so, this was something that was an issue in 5.7.5, but was fixed in 5.7.5.1
https://github.com/concrete5/concrete5/issues/2912...

(the gridframework class we use does a return '' for both those functions)
cmscss replied on at Permalink Reply
Thanks heaps guys,

We're not getting a fatal error with empty returns but if we add a space, the DIV is not output, same if we add an empty HTML comment - so thanks!

Although awesome, it feels hacky so probably not a long term solution right?

Thanks heaps, cheers

Ben