GridFramework not working as expected with custom grids??

Permalink
I seem to be having some issues implementing the custom grid.
Firstly, I've tried following this 'how-to'..
https://www.concrete5.org/documentation/developers/5.7/designing-for...
& extra info here
https://www.concrete5.org/documentation/developers/5.7/designing-for...

I am using a grid that is based on Pure css framework (loosely)... Here is a copy of the CSS that makes our grid.
.grid__unit-1 {
    width: 100%; // grid math doesn't calc grid-1 correctly so must be set manually here
}
.grid__unit-2 {
    width: 50%;
}
.grid__unit-3 {
    width: 33.3333%;
}
.grid__unit-4 {
    width: 25%;
}
.grid__unit-5 {
    width: 20%;
}


I had read about various issues people were having with grids with less than 12 or grids that didnt follow a similar convention to bootstrap.

After a bit of digging around I tried to re-factor our grid the other way... and ended up like this...
.grid__unit-1 {
    width: 12.5%;
}
.grid__unit-2 {
    width: 25%;
}
.grid__unit-3 {
    width: 37.5%;
}
.grid__unit-4 {
    width: 50%;
}
.grid__unit-5 {
    width: 62.5%;
}


The issue I'm having is that no matter what order we put this in, we get very very very weird results. Results that I dont get when using a 12-up conventional grid such as bootstrap....

This is my page_theme.php file...
<?php
namespace Concrete\Package\ThemeCustom\Theme\Custom;
use Concrete\Core\Page\Theme\Theme;
class PageTheme extends Theme
{
   protected $pThemeGridFrameworkHandle = 'custom';
   //https://www.concrete5.org/documentation/developers/5.7/designing-for...
   public function getThemeAreaLayoutPresets() {
       $presets = array(
           array(
               'handle' => 'medium_two_large_four',
               'name' => 'Medium Two Large Four',
               'container' => '<div class="row"></div>',
               'columns' => array(
                   '<div class="grid__unit-4"></div>',


And my /packages/ThemeCustom/src/CustomGridFramework.php file
<?php
namespace Concrete\Package\ThemeCustom\Src;
// use Loader;
use Concrete\Core\Page\Theme\GridFramework\GridFramework;
defined('C5_EXECUTE') or die(_("Access Denied."));
class CustomGridFramework extends GridFramework {
    public function supportsNesting()
    {
        return true;
    }
    public function getPageThemeGridFrameworkName()
    {
        return t('Custom');
    }
    public function getPageThemeGridFrameworkContainerStartHTML()


One of the strangest issues I'm having is that when I go to add a layout on the page, A) i dont get any presets despite having one defined, and b) i get weird results in the HTML where for instance if i select 4 columns, the 4th (or last) column gets a different class ....

Here is the output inspected using Firebug after the page is published.
Choosing 3 columns
<div class="ccm-custom-style-main grid">
    <div class="grid__unit-3">
    <div class="grid__unit-3">
    <div class="grid__unit-2">
</div>


Choosing 4 columns
<div class="ccm-custom-style-main grid">
    <div class="grid__unit-2">
    <div class="grid__unit-2">
    <div class="grid__unit-2">
    <div class="grid__unit-2">
</div>


Choosing 5 columns
<div class="ccm-custom-style-main grid">
    <div class="grid__unit-2">
    <div class="grid__unit-2">
    <div class="grid__unit-2">
    <div class="grid__unit-1">
    <div class="grid__unit-1">
</div>


As you can see above, we get very unexepected results when chosing odd number of columns. I only experience this with our grid.... but why?

Surely the system goes ok I have 8 columns, assign the 8 columns X class... not assign 7 X class + 1 Y?

Can anyone shed some insight into how to get other custom grids working?
basically I want the system to go right, heres a containing class (assign it), i have X number of columns and this needs to match class X and assign them... Is that possible with anything other than built in versions or a bootstrap style grid?

Also, if you see our page_theme file above, we dont see those presets in the grid list (like we do if we switch back to one of the pre-installed themes such an Elemental)

jpcharrier
 
jpcharrier replied on at Permalink Reply 7 Attachments
jpcharrier
Here are some screenshots showing the progression of adding 2-8 columns. The html reflects the issue I mentioned above of incorrect classes, the incorrect classes being applied are whats causing this... (atleast front-end)