Developing (v7+)

GridFramework not working as expected with custom grids??

Permalink September 03, 2015 at 10:19 PM

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%;
}

Viewing 15 lines of 38 lines. View entire code block.

 
.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%;
}
.grid__unit-6 {
    width: 16.6666%;
}
.grid__unit-7 {
    width: 14.2857%;
}
.grid__unit-8 {
    width: 12.5%;
}
.grid__unit-1,
.grid__unit-2,
.grid__unit-3,
.grid__unit-4,
.grid__unit-5,
.grid__unit-6,
.grid__unit-7,
.grid__unit-8 {
    position: relative; // so we can position child content absolutely within grid-units
    display: inline-block;
    vertical-align: top;
    margin-bottom: 0;
    padding: 0 0 0 4rem;
}

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%;
}

Viewing 15 lines of 38 lines. View entire code block.

 
.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%;
}
.grid__unit-6 {
    width: 75%;
}
.grid__unit-7 {
    width: 87.5%;
}
.grid__unit-8 {
    width: 100%; // grid math doesn't calc grid-8 correctly so must be set manually here
}
.grid__unit-1,
.grid__unit-2,
.grid__unit-3,
.grid__unit-4,
.grid__unit-5,
.grid__unit-6,
.grid__unit-7,
.grid__unit-8 {
    position: relative; // so we can position child content absolutely within grid-units
    display: inline-block;
    vertical-align: top;
    margin-bottom: 0;
    padding: 0 0 0 4rem;
}

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>',

Viewing 15 lines of 24 lines. View entire code block.

 
<?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>',
                   '<div class="grid__unit-4"></div>',
                   '<div class="grid__unit-4"></div>',
                   '<div class="grid__unit-4"></div>'
               ),
           )
       );
       return $presets;
   }
}

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()

Viewing 15 lines of 72 lines. View entire code block.

 
<?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()
    {
        return '<div class="grid">';
    }
 
    public function getPageThemeGridFrameworkContainerEndHTML()
    {
        return '</div>';
    }
 
    public function getPageThemeGridFrameworkRowStartHTML()
    {
        return '<?/**/?>';
    }
 
    public function getPageThemeGridFrameworkRowEndHTML()
    {
        return '<?/**/?>';
    }
 
    public function getPageThemeGridFrameworkColumnClasses()
    {
        $columns = array(
            'grid__unit-1',
            'grid__unit-2',
            'grid__unit-3',
            'grid__unit-4',
            'grid__unit-5',
            'grid__unit-6',
            'grid__unit-7',
            'grid__unit-8',
        );
        return $columns;
    }
 
    public function getPageThemeGridFrameworkColumnOffsetClasses()
    {
        // $offsets = array(
        //     'small-offset-1',
        //     'small-offset-2',
        //     'small-offset-3',
        //     'small-offset-4',
        //     'small-offset-5',
        //     'small-offset-6',
        //     'small-offset-7',
        //     'small-offset-8',
        //     'small-offset-9',
        //     'small-offset-10',
        //     'small-offset-11',
        //     'small-offset-12',
        // );
        // return $offsets;
        return '';
    }
 
    public function getPageThemeGridFrameworkColumnAdditionalClasses()
    {
        return '';
    }
 
    public function getPageThemeGridFrameworkColumnOffsetAdditionalClasses()
    {
        return '';
    }
 }

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 replied on Sep 3, 2015 at 10:40 pm Permalink Reply 7 Attachments

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)

Forums

Developing (v7+)

GridFramework not working as expected with custom grids??

Code

Post Reply

Delete Post

Mark Post as Spam

Destroy Spammer

Sign In?