Forums

GridFramework - How to use Column Offset

Permalink
The site I'm currently building is running 5.7.5.1. In my page_theme.php file I turned on support for using Zurb Foundation as the Grid Framework.

I see in \concrete\src\Page\Theme\GridFramework\Type\Foundation.php that there are offsets being defined.

How do I use them?

I want to create a Layout that has one column that takes up the space of 8, but then have it offset by 2 to center it.

<div class="row">
    <div class="columns  medium-8  medium-offset-2"></div>
</row>


What I would prefer more is to be able to add the class of "medium-centered" to the column, but I haven't seen a way of doing that either.

<div class="row">
    <div class="columns  medium-8  medium-centered"></div>
</row>


So any help with how to apply those offsets to my Layout areas and/or to add a centered class to the column would be appreciated.
darinronne
 
MrKDilkington replied on at Permalink Best Answer Reply
MrKDilkington
Hi darinronne,

"I want to create a Layout that has one column that takes up the space of 8, but then have it offset by 2 to center it."

When creating a custom layout, there are handles for adding space between columns.

"What I would prefer more is to be able to add the class of "medium-centered" to the column, but I haven't seen a way of doing that either."

You could use a custom layout preset for this.
https://www.concrete5.org/documentation/developers/5.7/designing-for...
darinronne replied on at Permalink Reply
darinronne
When you only have one column there are no handles to adjust. And if you do 3 columns, with the outer ones being empty, they just collapse and the middle column aligns to the left.

Custom Layout Presets does works well for this. Though their documentation is incomplete. It forgets to mention ThemeProviderInterface.

<?php
namespace Application\Theme\MyTheme;
use Concrete\Core\Area\Layout\Preset\Provider\ThemeProviderInterface;
use Concrete\Core\Page\Theme\Theme;
class PageTheme extends Theme implements ThemeProviderInterface
{
    protected $pThemeGridFrameworkHandle = 'foundation';
    public function getThemeAreaLayoutPresets()
    {
        $presets = array(
            array(
                'handle' => 'medium_ten_centered',
                'name' => 'Foundation Medium-10 Centered',
                'container' => '<div class="row"></div>',
                'columns' => array(
Viewing 15 lines of 30 lines. View entire code block.


Source:http://www.adrikodde.nl/blog/2015/using-theme-layout-presets-57/...

Thanks for your help.
b3rimbau replied on at Permalink Reply
b3rimbau
Do you know if it is possible to offset the far-left and -right columns from the row edge (without resorting to preset layouts)? Although I get column handles between columns, I don't seem to get them on the far-left and -right column outside edges.
Thanks
MrKDilkington replied on at Permalink Reply
MrKDilkington
@b3rimbau

I don't believe you can offset the far left and far right columns using the standard layout.

I recommend using custom layout presets for doing this.