Forums

Twitter Bootstrap Layout

Permalink
So i have been getting to grips with using the Twitter Bootstrap Layouts in a custom theme. And i think i have mastered it.

However i do have one query. Outside of Concrete5 you can assign multiple classes to a column for example you can have it as 6 columns wide on a medium screen and 4 on a large by doing this:

<div class="col-md-6 col-lg-4"></div>


Looking at the bootstrap3.php file in concrete/src/Page/Theme/GridFramework/Type

i can see that there is only reference to the sm (small screen) classes.See below.

How can i achieve the above affect with Concrete's built in Twitter Bootstrap functionality with the area layouts?

public function getPageThemeGridFrameworkColumnClasses()
    {
        $columns = array(
            'col-sm-1',
            'col-sm-2',
            'col-sm-3',
            'col-sm-4',
            'col-sm-5',
            'col-sm-6',
            'col-sm-7',
            'col-sm-8',
            'col-sm-9',
            'col-sm-10',
            'col-sm-11',
            'col-sm-12'
Viewing 15 lines of 18 lines. View entire code block.


I have also noticed in that same file that there is an array for all the offset classes but i cannot see where to use it?

public function getPageThemeGridFrameworkColumnOffsetClasses()
    {
        $offsets = array(
            'col-sm-offset-1',
            'col-sm-offset-2',
            'col-sm-offset-3',
            'col-sm-offset-4',
            'col-sm-offset-5',
            'col-sm-offset-6',
            'col-sm-offset-7',
            'col-sm-offset-8',
            'col-sm-offset-9',
            'col-sm-offset-10',
            'col-sm-offset-11',
            'col-sm-offset-12'
Viewing 15 lines of 18 lines. View entire code block.


also how can i assign the visible/hidden classes such as hidden-xs to the columns layouts?
sparrowwebservices
 
sparrowwebservices replied on at Permalink Reply
sparrowwebservices
Ok so i found the below in the same file 'bootstrap3.php'. It almost looks like its unfinished but i can see that by the names of these functions they are exactly what i am trying to do...

How do i utilise these???

public function getPageThemeGridFrameworkColumnAdditionalClasses()
    {
        return '';
    }
    public function getPageThemeGridFrameworkColumnOffsetAdditionalClasses()
    {
        return '';
    }
    public function getPageThemeGridFrameworkHideOnExtraSmallDeviceClass()
    {
        return 'hidden-xs';
    }
    public function getPageThemeGridFrameworkHideOnSmallDeviceClass()
    {
        return 'hidden-sm';
Viewing 15 lines of 24 lines. View entire code block.
MrKDilkington replied on at Permalink Reply
MrKDilkington
Hi sparrowwebservices,

For adding multiple grid classes, you can use custom layout presets.

"Adding Complex Custom Layout Presets in Your Theme"
http://documentation.concrete5.org/developers/designing-for-concret...
sparrowwebservices replied on at Permalink Reply
sparrowwebservices
Perfect thanks.

Exactly what I was looking for.