(OLD 5.7 Discussion FORUM)

Custom Grid Framework - odd behaviour

Permalink August 11, 2015 at 7:58 AM

Hi

Having some weird behaviour in 5.7.4.2 with adding my own grid framework. It's an 8 column fluid grid based on thishttps://css-tricks.com/dont-overthink-it-grids/.... The problem is (and I have read other posts related) that the layout renders random classes, and I don't see a consistent pattern to create workarounds.

In my template:

<?php 
$a = new Area('Main content');
$a->setAreaGridMaximumColumns(8);
$a->display($c);
?>

and in the class declaration (BasesiteGridFramework.php)

public function getPageThemeGridFrameworkColumnClasses() {
      $columns = array(
         'col-1-8',
         'col-1-7',
         'col-1-6',
         'col-1-5',
         'col-1-4',
         'col-1-3',
         'col-1-2',
         'col-1-1'
         );
      return $columns;
   }

So setting the layout to 4 columns renders this html

<div class="grid">
   <div class="col-1-7"></div>
   <div class="col-1-7"></div>
   <div class="col-1-7"></div>
   <div class="col-1-7"></div>
</div>

I have read that you have to declare $a->setAreaGridMaximumColumns(12); regardless of whether there are less columns. Anyone able to shed some light on this?

Many thanks

MrKDilkington replied on Aug 11, 2015 at 6:11 pm Permalink Reply

Hi boonier,

I wonder if the problem might be related to your column class name order.

Example: Foundation and Bootstrap 3 column class ordering
https://github.com/concrete5/concrete5/blob/develop/web/concrete/src...
https://github.com/concrete5/concrete5/blob/develop/web/concrete/src...

In the documentation, Foundation, and Bootstrap 3, the column classes are incrementally ordered. Your classes decrement, going from eight to one.
https://github.com/concrete5/concrete5/blob/develop/web/concrete/src...

boonier replied on Aug 12, 2015 at 5:16 am Permalink Reply

Hi thanks for your reply.

Ahh I though that might be confusing. col-1-1 is in fact equivalent to col-sm-12 (Bootstrap) or medium-12 (Foundation) in that it equates to 100% of the container width. So the col-1-8 is actually the smallest division of column, and in the array the widths increase.

What is strange is that when adding removing the columns in the ui, the column display goes all weird. Is this referring to the css when rendering them?

cheers

MrKDilkington replied on Aug 12, 2015 at 6:49 am Permalink Reply

Another user had display issues when using a custom grid framework. Does the screenshot referenced in the opening reply look like your problem?
https://www.concrete5.org/community/forums/customizing_c5/creating-a...

Regarding your grid framework, I believe it is working like it should. The structure of your classes might be causing the problem.

Is this how your classes work?
col-1-8 = 12.5%
col-1-7 = 14.2%
col-1-6 = 16.6%
col-1-5 = 20%
col-1-4 = 25%
col-1-3 = 33.3%
col-1-2 = 50%
col-1-1 = 100%

A layout of four columns creates this HTML?

<div class="grid">
   <div class="col-1-7"></div>
   <div class="col-1-7"></div>
   <div class="col-1-7"></div>
   <div class="col-1-7"></div>
</div>

Because you specified $a->setAreaGridMaximumColumns(8), I believe the framework is expecting col-1-7 to be 25%, not 14.2%.

boonier replied on Aug 12, 2015 at 7:24 am Permalink Reply 2 Attachments

Kind of...pls see attached.

Yep you've got the class widths right there. But I don't seem to be understanding why the rendered output is putting in the wrong classes.

>>Because you specified $a->setAreaGridMaximumColumns(8), I believe the framework is expecting col-1-7 to be 25%, not 14.2%

How did you come to this conclusion? Is that based on the fact the code is looping through and getting the wrong value at the array index?

Thanks again

MrKDilkington replied on Aug 13, 2015 at 9:44 am Permalink Reply

@boonier

So we have your current classes and their widths:

.col-1-8 = 12.5%
.col-1-7 = 14.2%
.col-1-6 = 16.6%
.col-1-5 = 20%
.col-1-4 = 25%
.col-1-3 = 33.3%
.col-1-2 = 50%
.col-1-1 = 100%

As an example, here are two grid sizes from Bootstrap 3 and Foundation 5.
- they both use 12 classes and share the same widths (differing on rounding)
- a single column uses 8.33333333% of the available space
- a span 5 columns wide would be 5 x 8.33333333% = 41.66666667%
- each size is a multiple of 8.33333333%

Bootstrap 3 classes and their widths:

.col-sm-1 { width: 8.33333333%; }    = 1/12
.col-sm-2 { width: 16.66666667%; }   = 2/12
.col-sm-3 { width: 25%; }            = 3/12
.col-sm-4 { width: 33.33333333%; }   = 4/12
.col-sm-5 { width: 41.66666667%; }   = 5/12
.col-sm-6 { width: 50%; }            = 6/12
.col-sm-7 { width: 58.33333333%; }   = 7/12
.col-sm-8 { width: 66.66666667%; }   = 8/12
.col-sm-9 { width: 75%; }            = 9/12
.col-sm-10 { width: 83.33333333%; }  = 10/12
.col-sm-11 { width: 91.66666667%; }  = 11/12
.col-sm-12 { width: 100%; }          = 12/12

Foundation 5 classes and their widths:

.medium-1 {width: 8.33333%; }        = 1/12
.medium-2 {width: 16.66667%; }       = 2/12
.medium-3 {width: 25%; }             = 3/12
.medium-4 {width: 33.33333%; }       = 4/12
.medium-5 {width: 41.66667%; }       = 5/12
.medium-6 {width: 50%; }             = 6/12
.medium-7 {width: 58.33333%; }       = 7/12
.medium-8 {width: 66.66667%; }       = 8/12
.medium-9 {width: 75%; }             = 9/12
.medium-10 {width: 83.33333%; }      = 10/12
.medium-11 {width: 91.66667%; }      = 11/12
.medium-12 {width: 100%; }           = 12/12

Using Bootstrap 3 and Foundation 5 as the model, using an 8 column grid, this is what concrete5 expects:

.col-1-8 = 12.5%  = 1/8
.col-1-7 = 25%    = 2/8
.col-1-6 = 37.5%  = 3/8
.col-1-5 = 50%    = 4/8
.col-1-4 = 62.5%  = 5/8
.col-1-3 = 75%    = 6/8
.col-1-2 = 87.5%  = 7/8
.col-1-1 = 100%   = 8/8

MrKDilkington replied on Aug 13, 2015 at 10:25 am Permalink Best Answer Reply

@boonier

This is a guess of how the grid system works.

I believe this method getPageThemeGridFrameworkColumnClassForSpan() determines the grid classes used.
https://github.com/concrete5/concrete5/blob/develop/web/concrete/src...

Using your example of a layout of four columns with a maximum of eight. Each column being two spans wide.

//2 spans wide
public function getPageThemeGridFrameworkColumnClassForSpan($span)
{
    //1   =    2  - 1
    $span = $span - 1;
    //array of column classes
    $classes = $this->getPageThemeGridFrameworkColumnClasses();
                    //1
    return $classes[$span];
}

$columns[1] is selected to be the class assigned to each of the four columns

$columns = array(
    'col-1-8',
    'col-1-7', // <----
    'col-1-6',
    'col-1-5',
    'col-1-4',
    'col-1-3',
    'col-1-2',
    'col-1-1'
);

Output: a layout of four columns with a maximum of eight
$a->setAreaGridMaximumColumns(8);

<div class="grid">
   <div class="col-1-7"></div>
   <div class="col-1-7"></div>
   <div class="col-1-7"></div>
   <div class="col-1-7"></div>
</div>

boonier replied on Aug 19, 2015 at 11:10 am Permalink Reply

Dude, thanks for explaining and sorry for not getting back sooner!

This is great - that all makes sense now and based on this, I have got it working.

I'm going to use the Grid presets to create 70:30 or 75:25 columns, but that appears to be giving me issues now!

Cheers again

Steevb replied on Sep 4, 2015 at 9:16 am Permalink Reply

Sorry, Away until the 10th September 2015

Steevb replied on Sep 4, 2015 at 9:16 am Permalink Reply

Sorry, Away until the 10th September 2015

Steevb replied on Sep 4, 2015 at 9:16 am Permalink Reply

Sorry, Away until the 10th September 2015

juddc replied on Aug 12, 2015 at 12:43 pm Permalink Reply 3 Attachments

I've also had nothing but trouble with adding my own grid. I'm a big fan of the Don't Overthink It grid and have tried in vain to implement it.

My last attempt has the interface showing double, looking weird and finally just hangs the page when you click "Add Layout". I have to reload the page, which then throws an error.

I attached some screenshots if this helps.

boonier replied on Aug 12, 2015 at 1:21 pm Permalink Reply 1 Attachment

Oh really? interesting... same grid system as mine. I wonder what the prerequisites are for it to render the columns correctly, and why the others seem to be fine?

Attach is a 7 column mash up

juddc replied on Aug 12, 2015 at 1:24 pm Permalink Reply

Yeah - Mine's a little clearer than that - I've swapped the margins in the css because I get better results, but the Add Layout UI shows the margin on the left.

Still throwing that error - Just tried it from scratch again.

"Call to a member function childNodes() on a non-object"

Steevb replied on Aug 12, 2015 at 2:16 pm Permalink Reply

I created my own framework based on percentages, 10, 15, 20, 25, etc.

Had horrendous issues with 5.7 (never happened with 5.6).

Anyway, read the doc page and so far all is well:https://www.concrete5.org/documentation/developers/5.7/designing-for...

I found that because C5 runs Bootstrap (12 base), I now have to use a 12 column array in my 'src' framework.php, however I have 18 'boxes' /'columns' in my less file and things turned out fine.

I don't use gutters, pull left, pull right or whatever, but everything works as expected.

Happy days!

juddc replied on Aug 12, 2015 at 3:00 pm Permalink Reply

I've gone through this tutorial numerous times and have had no luck in
getting anything near what Andrew has done in the screencast.

On 2015-08-12 11:16 AM, concrete5 Community wrote:

Steevb replied on Sep 4, 2015 at 9:16 am Permalink Reply

Sorry, Away until the 10th September 2015

boonier replied on Aug 12, 2015 at 3:34 pm Permalink Reply

Me neither. I've been though it numerous times and re-arranged the array also.

Steevb would you be kind enough to show us the content of your framework.php and related files pls? It just doesn't make sense that our framework shouldn't be rendering properly, unless there is a conflict with the class names perhaps?

Steevb replied on Aug 13, 2015 at 10:24 am Permalink Reply

I answered a similar post with my code here:http://www.concrete5.org/community/forums/5-7-discussion/integratin...

Steevb replied on Sep 4, 2015 at 9:16 am Permalink Reply

Sorry, Away until the 10th September 2015

Forums

(OLD 5.7 Discussion FORUM)

Custom Grid Framework - odd behaviour

Code

Post Reply

Delete Post

Mark Post as Spam

Destroy Spammer

Sign In?