Creating Bootstrap columns in Drupal panels with mixins

bootstrap columns grid

In terms of Front-End Drupal gives you several ways to achieve your goals, you can use Views, Panels, Display Suite, Templates overrides, Custom modules, etc., so sometimes it’s a bit difficult to define the best (or the worst) way to do something.

A couple of years ago, we created a theme for a Drupal 7 website, it was not responsive, and recently the client asked us to create a new theme for it ,of course responsiveness was a must, among other features. To expedite the process we took Bootstrap as the base theme and started from there.

However, for some pages we had a combination of views and panels, we relied on CSS classes and CSS IDs provided by Panels and we adjusted our stylesheets to improve the look and feel, and we didn’t want to get rid of those elements (not yet), besides we wanted to integrate Bootstrap with the current Panels/views structure we had created.

So the question was what to do to to make those views and panels work taking advantage of all the resources provided by Bootstrap, then Bootstrap mixins were the tool that helped us with this task

To give more context, here part of the code generated by the Panels module:

As you might see, we have a container with basically two elements within, we wanted those two elements to behave as one column in mobile and as two column in tablets and desktops:

 

To achieve the expected behavior, we added this code to one of our Sass files:

/** Panels ***/
.panels-flexible {
    &-row-clone_of_committee_landing_page-2-inside,
    &-row-research_projects_layout-1-inside,
    &-row-one_column_stacked-main-row-inside{
        <strong>@include make-row()</strong>;

        .panels-flexible-region-inside {
            > .panel-pane:first-child {
                <strong>@include make-sm-column(7)</strong>;
                margin-bottom: 20px;
            }
            > .panel-pane:last-child {
                <strong>@include make-sm-column(5)</strong>;
                margin-bottom: 20px;
            }
            > .panel-separator {
                display: none;
            }
        }
    }
}

The trick was made with the use of make-row and make-sm-column mixins, they allowed us to make the container behave the same as if we assigned the “row” and “col-sm-xx” CSS classes to the elements in the DOM, we had to hide the “.panel-separator” that Panels generates by default.

As you might have noticed in the code, we did the same for several panels, so this was also a time/budget-save solution.