Grid Support for Layouts

Edit

Improvements?

Let us know by posting here.

Responsive Grids

We now integrate Twitter Bootstrap 3 into our theme.

Add the Class file

Create application/themes/urbanic/page_theme.php with the following code:

<?php
namespace Application\Theme\Urbanic;
use Concrete\Core\Page\Theme\Theme;

class PageTheme extends Theme {}

The namespace adheres to Concrete's camelcasing rules, and PageTheme extends \Concrete\Page\Theme\Theme.

Refresh the Theme

Uninstall and reinstall the theme from the Dashboard to activate the class file.

Add Grid Support

Since we're using Bootstrap 3, add to your class file:

protected $pThemeGridFrameworkHandle = 'bootstrap3';

Implementing Grids

Add Grid With A Container

For a griddable area with an automatic container, use:

<?php
$a = new Area('Welcome');
$a->enableGridContainer();
$a->display($c);
?>

Ensure the area isn’t within a "container" class DIV.

Add Grid Without Forcing Container

If no container is needed, or it’s already inside one, use:

<?php
$a = new Area('Welcome');
$a->setAreaGridMaximumColumns(12);
$a->display($c);
?>

"12" specifies the maximum columns for the grid.

Test It Out

Refresh the page. With Bootstrap 3, the content is centered, and the grid is responsive, matching Bootstrap 3 grid points.

Area & Block Containers

In themes with grid support, areas can use $a->enableGridContainer();. This activates the grid container defined by the grid framework, like Bootstrap 3's:

public function getPageThemeGridFrameworkContainerStartHTML() { return '<div class="container">'; }
public function getPageThemeGridFrameworkContainerEndHTML() { return '</div>'; }

When enabled, all blocks within the area get wrapped in this container, except those opting out with:

protected $btIgnorePageThemeGridFrameworkContainer = true;

found in their controller.php. Examples include the HTML block, Horizontal Rule block, and Image Slider block.

Why?

This feature enables diverse layouts. Blocks like Image Slider can span full width, "breaking out" of the grid.

Opt-In & Overridable

This is an opt-in feature. Themes must first enable a Grid Framework, then specifically activate the grid container on areas. To avoid this behavior, omit enableGridContainer() in your Area.