Client Area

Do Drupal Right

Kendall Totten's picture
Kendall Totten  | Drupal Designer & Theming Specialist
Apr
22
2013

The AdaptiveTheme for Drupal 7 is a great HTML5 base theme that makes it easy to build out a responsive website quickly. It comes with a plethora of built-in extensions and polyfills to combat differences in browsers, devices and operating systems. It also expands on the basic idea of "smartphones" and "tablets" to include portrait and landscape versions of each.

If you are accustomed to editing the Drupal template files to control the layout of your theme, you can do what you've always done. The difference is that AdaptiveTheme has some built-in options to rearrange sidebar and content regions on mobile devices.

For example, imagine a site where you have the traditional desktop layout of "Sidebar A, Content, Sidebar B" with widths of 25%, 50% and 25% respectively. As you begin to shrink the size of the window, those sidebars are going to become narrower and narrower until it doesn't make sense to have a three column layout anymore. Let's say this point occurs at 700px, which falls into the "Portrait Tablet" range. In the AT theme settings, you can choose one of the other layout options such as dropping the Sidebar B region below the content and Sidebar A, or perhaps place both sidebars below the content as shown in the image above. The main content area is orange; sidebars are blue.

Because the AdaptiveTheme is a totally fluid theme, the region widths are set in percentages. This means that instead of seeing big jumps when you reach a breakpoint, the site will always expand to the max width of the device to take advantage of all available space. This gives you another advantage of not needing to fuss over breakpoints as much. There are 5 preset breakpoint ranges which you may change, and there is also a built-in custom stylesheet for adding in breakpoints for specific elements that may not neatly fit into the preset breakpoint ranges.

One of the best parts about the AdaptiveTheme is it comes ready to go with SCSS stylesheets. Personally I prefer the shorthand SASS syntax so I converted the stylesheets to use SASS instead (which you can download here). 

Configuration

Begin by clicking the "install new theme" link at the top of the /admin/appearance page on your site and then paste in the link to the AdaptiveTheme tarball or zip. Enable the theme, then navigate to the sites/all/themes directory to create your own sub theme. It's best to leave the original sub-theme that comes with the AdaptiveTheme untouched so you may clone it again in the future. You can clone the theme manually following these instructions, or you can do it quickly using drush:

drush adaptivetheme "Your Theme Name" yourthemename 

Navigate back to the /admin/appearances page on your Drupal site and enable your custom sub-theme and set it as default. You can leave the core AdaptiveTheme disabled. Now the fun begins!

Layout Setup

At this point you'll need to make some fundamental decisions about where sidebars will appear on your site for each viewport size. On desktop it's pretty straightforward (both on left, both on right, one sidebar on each side) but on tablet and mobile devices, you have more options. Sidebars can be told to drop below the main content area to allow for a wider content area.  You may also set the widths of each of the sidebars based on percentages. 

AdaptiveTheme Sidebar Positions

I'm going to jump ahead a little to the extensions tab to point out some layout-related options that can be very useful. Enable (check-off) the float region blocks option and the markup overrides option and save the theme settings page. When the page reloads, there will now be a a whole new set of options at the bottom of the page. Click on the vertical tab "Float Region Blocks" to instantly apply percentage based widths to all blocks in a particular region to set up faux columns. A good use case for this might be in the footer region, where you often see blocks with small bits of content. The only downside is these widths apply to all viewport sizes except for mobile, so if you choose to have 3 or more columns, you'll likely need to override the block width for your "landscape mobile" or "tablet portrait" sizes as the columns will become too narrow.

AdaptiveTheme Float Region Blocks

The second extremely useful extension is the Markup Overrides. From this interface you may override gutter widths (between regions), add full-width wrappers around sections of your site for ease of applying background images, override the breadcrumbs, login block, front page title, comment titles, RSS feed icons and more. You can also enable extra classes for pages, nodes, comments, blocks, menus and item lists. Sure you could go into the code and do all of this stuff yourself, but having it at your fingertips with the check of a box can be a real time-saver.

CSS

When you begin writing the CSS for your theme, it is worth considering whether or not you want to go with the cascade (overlapping) method or the stacked method. By default, the AdaptiveTheme uses the stack method so that at any given viewport size, only the global styles and the styles for that specific breakpoint are applied. Meaning that if you are viewing the "Tablet Portrait" viewport size of your site, only the global.styles.css and responsive.tablet.portrait.css will be applied, as opposed to global.styles.css + responsive.smartphone.portrait.css + responsive.smartphone.landscape.css + responsive.tablet.portrait.css. See the difference? One is not necessarily better than the other, it's a matter of what your theming needs are and your preferences as a themer. However, you should consider that if you go with the cascade method, Webkit browsers download the images from all applicable stylesheets, even if some of the image styles are overridden in the latter stylesheets. So there's potential for a performance hit.

For me, it quickly became apparent that I was going to be writing similar styles over and over in each of the stylesheets. But I didn't want to dump all my styles into the custom stylesheet because often there were subtle differences in widths. My solution? SASS Mixins. I created one SASS partial file that holds bundles of layout mixins with customizable variables. I then include each of the mixins in the individual viewport stylesheets with the option to override those variables when necessary. This might seem a little convoluted but it worked great, and it kept me from having to update styles in 5 places as I went along. Tweaks were easy and painless. Here's an example:

@mixin main-menu($content-width: 100%, $right-gutter: 1em, $menu-region-height: 5em, $menu-height: 2.188em, $top-texture: 1em)
  // Adjust Menu tabs upwards for overlap effect
  .container 
    +center-content
  #header-wrapper 
    background-position: 0px 0px
    padding-bottom: $menu-height
    .front &
      padding-bottom: 7px
  #nav-wrapper
    padding-bottom: ($menu-region-height - $menu-height)
    background-position: 0 -360px
    min-height: 85px

Then my individual viewport stylesheets like responsive.desktop.sass ends up looking like this:

#page 
  +leaderboard
  +branding
  +main-menu(100%, 1.5em, 5.5em, 2.25em, 1.2em)

Pop in some variables and you're done. For those of you not familar with the SASS syntax, the plus sign is shorthand for @include - so I'm pulling in three mixins in this example.

Another way of approaching this might be to include those similar styles in the custom stylesheet and make use a breakpoint mixin when you need to override values for different devices. Set it up to match the default breakpoints set in your theme. That way if you are trying to remember at what breakpoints surround the "Tablet Portrait", you don't need to go back to your theme settings to check. Just include the breakpoint mixin with the proper device name. Similarly if you want to adjust the breakpoint numbers down the road, you need only update them in one place (your mixin). The mixin below matches the default AdaptiveTheme breakpoints:

// AdaptiveTheme Breakpoint Mixin 
@mixin breakpoint($point)
  @if $point == portrait-smartphone
    @media (max-width: 320px)
      @content
  @else if $point == landscape-smartphone
    @media (min-width:321px) and (max-width:480px)
      @content
  @else if $point == portrait-tablet
    @media (min-width:481px) and (max-width:768px)
      @content
  @else if $point == landscape-tablet
    @media (min-width:769px) and (max-width:1024px)
      @content
  @else if $point == desktop
    @media (min-width:1025px)
      @content

// Example Usage of this mixin
.page-wrap
  width: 75%
  +breakpoint(portrait-tablet)
     width: 60%

Panels

One of the great features about AdaptiveTheme is that not only does it come with built in panels layouts, you can adjust those layouts for each device width the same way you adjust sidebar layouts. With panels you can accomplish some really complex layouts that would be a serious challenge using just theme regions. For example the inset layouts have a sidebar that spans the height of the whole page. (Nested Regions like this can be a big hurdle when trying to do this with the Omega Theme.)

AdaptiveTheme ships with 13 different Panels configurations and you may adjust the layout of each of those for four of the device widths (regular mobile excluded, all panels regions simply stack vertically on vertical smartphones).  

AdaptiveTheme Panels Inset Layout

Omega vs. AdaptiveTheme

Finally, the question you may have been wondering from the start, so with all these options, is AdaptiveTheme better than the Omega theme? Well the AdaptiveTheme does come with 5 device viewport sizes out of the box and it is 100% fluid by default. Whereas Omega comes with only 4 viewport sizes (mobile, tablet, desktop, and wide desktop) and only comes with one fluid grid layout. To be fair, you could just use the global stylesheet (mobile) which is already fluid, and the one other fluid layout to accommodate all the other devices, but it seems like two layouts isn't enough. You can however put in a little extra elbow grease and create multiple fluid layouts but Omega does not come standard with this. However, if you are using a CSS preprocessor it might not seem as overwhelming to use media queries in your global stylesheet to achieve whatever breakpoints you need.

I like how AdaptiveTheme allows you to set the sidebars or panel regions to drop below the content on tablet and mobile layouts. It's often not ideal to simple squish in a 3-column layout onto a narrow tablet. This was a big plus for me.

AT comes with a lot more plugins and extensions. It also can be used with the Delta and Omega Tools modules. 

At a glance, AdaptiveTheme seems to be the quicker way to get a responsive site up and running. But if you are dealing with some complex layouts and Panels is not an option for you, Omega feels more thoroughly customizable and does come with a nice set of it's own extensions.

But wait! What about Omega 4.x? If you haven't heard, Omega 4.x is worlds apart from Omega 3.x and is more targeted toward intermediate & advanced themers. I have not themed a full site with it yet as it is still having the i's dotted and the t's crossed, but it is built on SASS, SUSY, and a whole lot of awesome. More to come on that soon. In the meantime, here is a quick at-a-glace comparison of each side-by-side. Ultimately it comes down to your theming preferences, your site layout needs, and your SASS skills. All themes and respective versions are excellent base theme choices and will help you make your Drupal site mobile-friendly in a snap.

Omega 3.x

Omega 4.x

AdaptiveTheme

Layout

  • Based on the 960 grid system
  • Comes with 4 preset viewport sizes 
  • Nice GUI interface for setting up custom layouts
  • The Delta module allows you to re-use these layouts in different site sections by coupling with Context. 
  • You may set breakpoints on the theme settings page.
  • Totally fluid layout
  • Add in your own breakpoints where you need them. 
  • The introduction of "layouts" essentially makes creating variations of page.tpl.php in code or the use of the Delta module unnecessary. 
  • It splits up the CSS of Drupal core into separate admin and core stylesheets, reducing CSS load by 30%
  • Totally fluid layout 
  • Comes with 5 preset viewport sizes 
  • Allows you to set up different layout configurations of the sidebar & content regions or panels regions for different device sizes with zero coding
  • It also employs extensive use of drupal_static and other caching techniques to speed up page rendering and delivery.

HTML5

Yes

Yes

Yes

Sass

No, but you can add it in yourself

Yes

.SCSS by default, add .SASS yourself

Susy/ Singularity GS

No

Yes, using a Sass-based grid system is recommended.

No

CSS

Five main stylesheets: global, default, narrow, normal, and wide. Plus some Omega basics for forms, text, branding and more that you may disable if desired.

Recommended that you follow SMACSS method, but you can organize your stylesheets however you like. 

2 global stylesheets, six viewport specific stylesheets, 2 SASS partials, plus IE and print stylesheets.

Polyfill js libraries 

  • Formalize.js
  • Media Queries (JS triggers that allow custom functions to be executed depending on the screen size)
  • Equal Heights.js
  • Selectivizr.js 
  • CSS3 Media Queries JS
  • Respond.js 
  • CSS3 PIE
  • HTML5 shiv
  • HTML5 support in IE
  • Responsive Javascript (molten)
  • Fix css rounding errors in IE
  • Media query support for IE
  • Scalefix for iOS

Extensions

  • Ability to enable/disable Drupal Core module and Omega core stylesheets
  • Set viewport settings like initial, min and max scale.
  • Apple touch icons
  • Clear type support for Windows
  • Handheld friendly (metatag for Blackberries)
  • Mobile Optimized (for pocket PC)
  • Viewport (for modern smartphones)
  • Chrome Frame and IE Edge support
  • Custom Fonts
  • Title Styles
  • Image Alignment and Captions
  • Apple touch icons
  • Unset CSS files
  • Add custom CSS
  • Mobile regions and blocks (requires browscap)
  • Float region blocks
  • Markup overrides (gutter width, breadcrumbs settings, login block, remove front title, remove rss, hide comment titles, etc.)

Development

  • Debugging placeholder blocks
  • Grid overlay
  • Drush integration when using Omega Tools module
  • Rebuild theme registry on page load
  • Rebuild css and JS aggregates on page load
  • Browser width indicator
  • LiveReload built-in support
  • Region demo mode.
  • Installs all the ruby gems you need 
  • Lots of Drush integration
  • Highlight regions
  • Show window size
  • Sub-theme compatibility test
  • Snapshot of media queries
  • Drush integration

Panels

Works with panels.

Omega layouts will be usable in the panels UI, plus context module integration.

Built-in panels and gpanels integration on the theme settings page. Includes a GUI to control panels layouts for each device size.

Summary

Omega + Delta is a slam dunk way to create highly customized layouts for your site, and any of the site sections that may vary with layouts. The downside is that the tablets often need custom code to account for the fact that portrait orientations are two skinny to fit 3+ columns side by side. And it is challenging to create with a multi-layout totally fluid site.

This version of Omega is completely targeted at moderate to advanced themers. Because it's driven by SASS+SUSY it will be incredibly easy & powerful to generate layouts for totally custom breakpoints if you are comfortable working in code. There are fewer options in the GUI in Omega 4.x. Instead, Omega 4.x is about giving you a "Theme API" to work with.

AdaptiveTheme will get you up and running very quickly. The panels integration is great. All the extensions included and the markup overrides make this a great choice for people looking to do the bulk of the work in the theme interface who have a simple to moderately complex site. Note that the basic site layout options (not counting panels) only allows special shifting for content and sidebar regions (not all the other Drupal regions).

Fringe Scenarios

Nested Regions (for complex layouts) are a real problem. If your layout is tricky, you may be better off with panels or you can try this solution

If you are looking to do multiple fluid layouts without a bunch of inline media queries, try this approach.

If you want to be able to rearrange the order of your regions for mobile only, for example printing the sidebar first before the content, this is easy to do with Omega. Any set of regions within a zone can be posiitoned in a different order on mobile vs. other layouts.

 

The Delta module doesn't work properly with AT out of the box, so configuring different layouts for different sections of your site can be a challenge if you are not using panels.

AT does, however, work with Omega Tools. 

**Editor's Note. Join Kendall and Acquia for a webinar on the Mobile-First Omega Theme. Wednesday, April 24. Sign-up Today! **

Going Mobile with Drupal

 

Additional Resources

Responsive Design: Mobile Menu Options

[video] 7 Deadly Myths of Mobile

"15 Cool Things You Can Do with Drupal" 

Share This Post