Drupal CMS Powerstart Tutorial 2: Responsive websites with Bootstrap 3 and Drupal

This tutorial will showcase how we have made Bootstrap 3 and especially its responsive grid system and integral part of the platform, and will show you how to use some easy tools to make any website component or content mobile friendly!

About Bootstrap 3 in CMS Powerstart

The Drupal CMS Powerstart disbitrution has made Bootstrap 3 an integral part of the platform. The main reason we did this is to leverage the Bootstrap 3 responsive grid system. This grid system is not just functional, practical and effective.. it's also widely used, widely understood and very well documented. On top of that, Bootstrap 3 is an active open source project, like Drupal, and also supported very well with Drupal through a basetheme and various modules. This tutorial will teach you about these integrations and how to use them to create awesome responsive websites with ease. This tutorial will focus more on Drupal integration than on the gridsystem itself. For a quick introduction to the grid system check out this tutorial. For real life examples check out our Drupal themes.

2.1 Bootstrap on blocks

Forget about themes with 16 regions, or 25 regions. If your'e using Bootstrap you really only need full-width regions that stack on top of one another. The horizontal division will be provisioned by block classes, with responsive layout switching that is customized for your content, not for your theme (-designer) or for an outdated wireframe.

In Drupal CMS Powerstart I added the block_class module and added a patch that assists in our responsive designing labours by auto-completing the Bootstrap 3 grid system classes. 

2.2 Bootstrap in Views

To use Bootstrap 3 in views we will use the views_bootstrap Drupal module. Let's take a look at how this module is used to create a Portfolio grid page for theDrupal CMS Powerstart Portfolio component.

Live demo of portfolio grid.

The views_bootstrap module provides an array of new Views display plugins:

  • Bootstrap Accordion
  • Bootstrap Carousel
  • Bootstrap Grid
  • Bootstrap List Group
  • Bootstrap Media Object
  • Bootstrap Tab
  • Bootstrap Table
  • Bootstrap Thumbnails 

 

This grid of portfolio thumbnails uses the Bootstrap Grid views display plugin. The Bootstrap Grid plugin allows you to output any content in a grid using Bootstrap's grid html markup. A current shortcoming in the module is that it only allows you to select the number of columns for the 'large' media query. Fortunately, there is a patch for that:

https://www.drupal.org/node/2203111

The Drupal CMS Powerstart distribution has this patch included and uses it in views to create truly responsive grids, where you can set the number of columns per media query. It works quiet well out of the box. Here is the views format configuration used for the portfolio:

As you can see it's real easy to create responsive views with this Views Bootstrap 3 integration! Without writing any code you can leverage the tried and tested responsive systems that are provided by Bootstrap. The views_bootstrap module gives you a whole set of tools that help you build responsive layouts and widgets using your trusted Views backend interface. This means site builders can rely less on themers/programmers and get work done quicker.

Using custom markup in views

The View Bootstrap module is great at organizing rows of data into responsive layouts, but it doesn't have the same level of support for fields inside a row of data. This is what we did to create a responsive events listing for the Drupal CMS Powerstart events component:

Live demo of events view.

The events view uses the 'Unformatted list' plugin that is provided by the views module itself. This prints each row of data in a div container. There are 2 ways to make the contents of these rows responsive. One would be to generate node teasers inside the rows, and configure the content type's teaser display mode to use grid classes on the fields. This method will be covered in the next part of this tutorial. For the events view we don't use teasers, we are building a fields view because it gives us more flexibility in the fields we show in our view. Luckily the views interface makes it easy for us to add grid classes right where we need them. First, we will add a row class to each views row by clicking Settings under Format and adding row in the Row class field:

Now we can add responsive column classes to our fields and they will be organized within each row. We simply add classes by clicking each field and editing the Style Settings CSS class field:

The only thing we need to do here is check the Create a CSS class checkbox, and a textbox will appear that allows us to add grid classes to the field. This field uses the class col-sm-6, which makes our event title use 50% of its parent container's width (because Bootstrap uses a 12 column grid) when on a small device. This means that on an extra small device there is not grid class active and the title will use 100% of it's parent container's width, as you can see in the mock-up above. We can't say this method is as easy as the point and click method discussed earlier but if you are familiar with the views interface already this method will become intuitive with a little bit of practice and will allow you to have very fine-grained control over responsive behaviors in your views.

2.3 Bootstrap in Fields

Often you want to organise content fields in a layout. A module that can be of help here is Display Suite, but even with the ds_bootstrap_layouts extension this will give you a limited set of layouts. We can easily build any layout by simply adding bootstral grid classes on fields. This is not to say I don't like Display Suite but since CMS Powerstart focuses on simplicity I will choose the simplest solution. 'Big' tools like Panels and Display Suite are definitely more appropriate for larger Drupal projects.

To make an example I will start building a new Drupal CMS Powerstart component. There was a feature request for a 'shop' component, so we will be building a content type as part of a simple component that will help brick and mortar shops display their inventory. First we will create a new content type called Object.  Since Bootstrap columns need to be wrapped in row classes, we are adding the field_group module. Once you have downloaded and enabled the field_group module, you will have a new option 'Add new group' under the manage fields tab of your Object content type. We are adding a group called Bootstrap row using the default widget fieldset. Now drag the image and body field to the indented position under the Bootstrap row field group. This will create a visual indication in the node/add and node/edit interface that fields belong to the same group. Your Manage Fields interface should now look like this:

Next we will go to the Manage Display tab of the Object content type. This is where the Bootstrap magic happens. Our goal is to display the body text and image field beside eachother on big device and above one another in small devices. First, we have to create our Bootstrap row group again, this time we add a group named Bootstrap row and make it the 'Div' format. Give our field group the following configuration settings:

  • Fieldgroup settings: open
  • Show label: no
  • Speed: none
  • Effec none:
  • Extra CSS classes: row (you can remove the default classes)

Next we wil drag the Body and Image fields to the indented position under the field group. Now we simply configure the field formatters to use the Bootstrap grid classes of our choice. To add these classes in the Manage Display interface we are going to install another module: field_formatter_class. Once you have downloaded and enabled this module you can go back to the Manage Display interface and you will see an option to add a class on each field. You will now set both the Body and Image field to have the Field Formatter Class col-sm-6. This will create a 2 column layout on devices wider than 768px and a stacked layout on smaller devices. If you are using Drupal CMS Powerstart, you can set the Image style of your image field to Bootstrap 3 col6. This will resize the image to exactly fit the 6 column grid container.

Your Manage Display tab should now look like this: 

Now if you create a node using your new content type it should look similar to this:

Using our new fieldgroup tool we can easily add bootstrap rows and columns to any content type, and since classes are listed and edited in the Manage Fields interface, it's relatively quick and and easy to manage per-node layouts. At least it's a step up from managing a ton of node templates.

2.4 Bootstrap in Content: Shortcodes

Sometimes you (or a client) just want to create a special page that needs more attention than other pages of the same type. Unfortunately there aren't any free tools that give our clients a true WYSIWYG experience for creating responsive Bootstrap grids. If you know one please let me know! Our fallback option is the bs_shortcodes module that I ported from a Wordpres plugin. This module let's you add nearly all Bootstrap components, including grid elements, using a WYSIWYG-integrated form. 

To see the power and flexibility of what you can do with these shortcode check out this demo page:

http://glazed-demo.sooperthemes.com/content/responsive-columns

This system leverages the Drupal Shortcode API, which is a port of the Wordpress shortcode API. The Drupal CMS Powerstart distribution ships with a WYWISYG component that includes CKEditor 4 with the neccesary Shortcode API and shortcode-provisioning submodules. Since the configuration of this setup is complex and beyond the scope of this article I'm just going to assuming you are using Drupal CMS Powerstart and ready to use the WYSIWYG with Shortcodes integration.

To create a simple 2 column layout like in the previous examples we first add a row shortcode:

Then we select the column shortcode and find the code that corresponds to 6 columns on a small devices:

Now if we use 2 6 column shortcodes and put in the same content used in the Field and Field Group tutorial in will look like this in the editor:

After saving the page it will look exactly as the Test Object page we created in the previous tutorial. I admit that shortcodes are a rather crude tool for a complex problem but anyone who is willing the learn the basic principles of a 12 column grid system will have a huge amount of flexibility and capability in creating responsive content. When you combine the Bootstrap 3 grid documentation, the WYSIWYG integration, and for emergencies the documentation of the Wordpress plugin you already have a fully documented tool for savvy clients who don't want to deal with raw HTML code. Shortcodes don't seem like the most userfriendly tool but I've seen clients pick it up quickly and appreciate the flexibility it gives them in organising their most important pages. In the future we migh see improvement in this area from tools like Visual Composer and the Drupal-compatible alternative Azexo Composer.

In Part 3 of this tutorial series I will write about using shortcodes as a site building tool and demonstrate what you can do with shortcodes in a real life Drupal CMS project. To get a sneak preview of the shortcode elements I will be using, check out our Drupal themes.

Community vote result: TouchPro = Free Premium Drupal Theme

It was very exciting for me to watch you all vote on the poll for the first free premium theme by sooperthemes.com The race was between HelloFolio and Touchpro and these 2 themes overtook eachother many times in the voting, until finally I had to close the poll on march 30th when TouchPro won with a difference of just one vote! This means that TouchPro will be released on drupal.org as a contrib theme, and the other 2 themes will go on sale on sooperthemes.com. Follow development of TouchPro here: http://drupal.org/project/touchpro

jQuery corner plugin = rounded corners solution?

So I just checked the jQuery Corner plugin, which I've seen used in the Acquia/TNT/Fusion themes, and its a plugin that adds rounded corners to blocks without using images. I've just been playing around with it and now I'm thinking where were you when I started putting 28 rounded corners images in a css sprite image and control them with dozens of lines of CSS selectors. The reason why this type of plugin is so nice with Drupal is that it works perfectly even under these common situations:

Does spam thrive during economic decline?

Are laid off IT workers discovering that sending spam is easier than getting a job these days? It sure seems that way, even with mollom running on all forms around a hundred spam comments get through every week, and they seem to get more clever every time. I just found the following comment below my review of the Drupal 6 Javascript and jQuery book:

Submitted by san diego real estate (not verified) on Wed, 10/21/2009 - 18:55.
The only reason why I like this book is that this book developers deep into the usage of jQuery in themes and modules and there is interesting stuff in there for developers of any experience.

I can understand mollom didn't get that message because even I thought it was a real comment. I was much surprised to

Releasing a new basetheme!


Sooperthemes.com Basetheme v2 Display

Thanks:

  • Paul O’B from Sitepoint Forums for helping with researching for my holy grail of flexible Drupal CSS layouts.
  • John Albin from the Zen theme, for being a leader in Drupal theming innovation, and particularly for the awesome body/node/block/node classes code and the block edit/configure links.
  • Stephanie and Chris from TopNotchThemes for thinking up some awesome theme settings
  • Al Steffen from Studio theme, for pushing the limits at turning a Drupal theme into a nice organized collection of files.
  • Jacine Rodriguez from Sky theme, for laying the groundwork for Typographical theme settings, and more cool code.
  • All the rest of the Drupal community for working together on a free software project!

Features:

  • Color module integration (CSS only)
  • Live-preview mode for tuning colors. Any action by the color picker is immediately visible on the layout
  • Complete layout control! Supports flexible width, fixed width, percentage based columns and blocks, and it all works in internet explorer too!
  • Layout automatically adapts to no-sidebar one sidebar or 2 sidebar pages (retaining the set sidebar width and resizing the content column)
  • CSS file caching for enforcement of the theme settings.
  • Dynamic regions (horizontally) scale any number of blocks to fit next to each other
  • Full typography control with Cufon engine for selecting/adding custom fonts
  • Comes with 18 free fonts!
  • Animated dropdown menus with jQuery Superfish integration
  • Dropdown menu is configurable through the theme settings form
  • Various jQuery scripts to help make your website look sharp
  • Nodetype specific theme settings for node links and taxonomy links (adapted from acquia_marina)
  • Well organized and valid CSS 2 stylesheet, just approx. 1.000 lines.
  • Accessible and semantic HTML code. (and Search Engine friendly, of course)

Download it on the Drupal.org project page: http://drupal.org/project/sooper_basetheme

Rationale:

This theme is the result of the work I've been doing, developing my drupal themes product line for sooperthemes.com, and it also includes many functions and classes that I have needed in the past 3 years, working as a freelance Drupal themer. I think the coolest part of the theme is the advancements I've made in recoloring themes, though this theme only uses the most basic parts of the color module, I've included some functions in the color/color-utility-functions.inc file that I currently use for my premium themes. It would be really cool if we could get a Color API in Drupal 7 to replace the color module, so that all the Color enthusiasts can collaborate to replace the old color.module.

The Cufon engine is also really cool, it's my first attempt to integrate Cufon with a Drupal theme. It was actually really easy, because you can just call upon Cufon with jQuery selectors. Cufon is a new competitor for sIFR, that uses VML and Canvas to replace browser text with embedded-font text.

The dynamic regions part is a simple solution to a complex problem, having a region that needs to have different CSS for every page that has a different number of blocks in this region. Basically it's just this:

// Widths of blocks in Dynamic regions
$precount = substr_count($vars['preblocks'], 'class="block ');
$postcount = substr_count($vars['postblocks'], 'class="block ');
$vars['postcount'] = $postcount;
$vars['precount'] = $precount;
if ($precount > 0) {
$prewidth = round(100/$precount,3);
}
if ($postcount > 0) {
$postwidth = round(100/$postcount,3);
}
$vars['blockwidths'] = <<

But then when you check it out in Internet Explorer you will find your blocks collapsing and stacking on top of eachother, but there is a very cool fix for this, a virtual buffer:

div.sooperblocks {
margin-right:-100px!important; /* Create an invisible space (buffer) to allow overflow without collapsing */
padding-right:100px!important;
}

I will explain further in another blog post!

Pages

Subscribe to RSS - drupal