Recap
Continuing where we left off, we now have a theme that includes the Concrete CMS editing toolbar and includes a single editable area. Since that theme is built off of Twitter Bootstrap 3, and we include this grid framework in Concrete 5.7, it's easy for us to add support for this framework to our theme.
Add the Class file
First, we need to add a custom PageTheme class file to our theme. This class extends the built-in theme class, and we use it whenever we need to describe some special functionality for our theme.
Create the file application/themes/urbanic/page_theme.php. In it, add this code:
<?php
namespace Application\Theme\Urbanic;
use Concrete\Core\Page\Theme\Theme;
class PageTheme extends Theme
{
}
The namespace is required and needs to follow standard Concrete camelcasing rules. The class name is always PageTheme, and it always needs to extend \Concrete\Page\Theme\Theme.
Refresh the Theme
In order for this class file to take effect, we need to actually uninstall the theme and reinstall it. Just do so from within the Dashboard, and make sure to reactivate the theme for your site.
Add Grid Support to the Class File
5.7.0.1 currently ships with bootstrap 3, bootstrap 2 and 960 grid systems. You can see which grid systems are installed by going here:
src/Page/Theme/GridFramework/Type/
We're planning on adding more, and developers can add support for them as well – but today let's just specify bootstrap 3, since that's what this theme uses behind the scenes.
Add this line to the class file you created:
protected $pThemeGridFrameworkHandle = 'bootstrap3';
Now, go back to the area you made on the previous page.
Add Grid With A Container
If you want to make this area griddable and automatically add a container class to the blocks that are added to it, add this line to the area.
`
<?php
$a = new Area('Welcome');
$a->enableGridContainer();
$a->display($c);
?>
`
Make sure this area isn't contained within a DIV with the class "container." It should be flush with the edge of the page. That's because the container class will automatically be injected into the area, now that we know what grid framework we're using.
Add Grid Without Forcing Container
If the area is already contained within a container, or you don't want to force a container around the blocks added to this grid, add these lines instead:
`
<?php
$a = new Area('Welcome');
$a->setAreaGridMaximumColumns(12);
$a->display($c);
?>
`
Where the "12" is the maximum number of columns that you want to have available in this cell.
Test It Out
Refresh the page. You'll notice that the content we added before is in the middle of the page. That's because the grid container that bootstrap ships with is automatically wrapping our content block. Next, let's add a layout. We see bootstrap 3 as an option, and all the grid points snap to their BS3 equivalents. This grid is fully responsive.