Bear Skin: A Case Study

Brown bear
 

My Name is Alban and I'm a front-end dev here at Zivtech. We use an installation profile called Bear and I have been working on a theme to go along with it called Bear Skin.
 

About the Bear Project

Bear is an installation profile to be used as an alternative to minimal or standard. It sets up Drupal with contributed modules and a configuration that we find useful for just about every type of site. Bear is a starter kit, not a distribution: you should feel free to edit its Features directly but not plan to update the theme directly. 
 

About Bear Skin

In creating Bear Skin, I tried to gather the most common Front-End features that I always end up needing for a given site. I too often find myself assembling the same components to solve the same issues, when in fact I could save myself a lot of time and effort by rolling them all into a single, reusable solution, provided it is scalable, adaptable and versatile.

Bear Skin is a sub theme of Zen , which features extensive documentation (this might be good place to start if you are looking for more information about bear skin). The choice to use Zen was made when thinking about the best way to develop on top of a very solid and well-supported base. Since Zen does not have a look of its own, Bear Skin provides a well-styled, yet minimalist skin for users to build from using the intuitive Sass structure and various included Compass gems. More importantly, Bear Skin integrates smoothly with the contributed modules included in the Bear installation profile. 

Because Zen already is responsive out of the box, Bear is as well. However, this starter theme takes Zen a step further by providing more styles and several Compass gems, packaged within the theme directory. In addition to zen-grids (provided by Zen out of the box), the Bear Skin includes breakpoint, to simplify the handling of breakpoint mixins; Sassy Buttons, primarily to achieve consistency between tab menus buttons, form buttons, and inline button links, and the Foundation Icons library, which is an excellent open source collection of great looking font-based icons (visible in the demo footer).

Because I intended to build Bear as a fully responsive theme, it meant finding a responsive menu that not only looks good but also integrates well with Menu Blocks or the standard drupal menu system. I tried a few solutions, including the tinynav.js jquery plugin (and existing drupal module) as well as its successor, responsive-nav.js. While the select list menu tinynav offers works well, it is not the most aesthetically pleasing solution. Responsive-nav looks great, but does not support sub menus, which was a big drawback. I finally settled on the excellent MeanMenu written by Mean Themes. While it was developed to work alongside their Wordpress themes, it works great as a standalone for any website. It also integrates very well with Drupal and does not require media query support. This responsive option can be turned off in the theme settings.  One of the requirements for this menu system, however, is to use jquery update because this code needs jquery >=1.7.

Lastly, I often like to have the option to stick my footer at the bottom of the page. While this does not present a formidable effort to do every time, it is nice to have the option available in the UI, and to have a template file in which the footer can be pushed without breaking anything.

It’s worth noting that Bear is a work in progress and some features are subject to change as the project evolves. 
 

Features


Responsive Additions (on top of existing Zen features)

MeanMenu
(can be turned on and off in the theme settings)
 
Sass Breakpoint
(can be turned on and off in the sass _base.scss)
 


Graphic/Design

Sassy Buttons
http://jaredhardy.com/sassy-buttons/
(can be turned on and off in the sass _base.scss)

 
Foundation Icons
(can be turned on and off in the sass _base.scss - visible in the footer upon fresh install)
 
Sticky Footer
(can be turned on and off in the theme settings)
 
Formalize.me
A light addition to the theme, this plugin provides cross browser solutions for forms items theming.
 


Requirements

Zen 
 
jQuery Update (we need jquery 1.7)
 


Recommended Additions

Flex Slider
https://drupal.org/project/flexslider - The flexslider is currently the only contributed module providing a trully responsive, touch enabled slider. 
 


Various

Firesass support (check config.rb to turn off)
 

 

Alban Bailly
Alban Bailly

Principal Front-End Developer

Before joining Zivtech in May 2013, Alban studied jazz and composition in his native France and relocated to Philadelphia in 2005. Soon after, he added web design and development to his portfolio and began specializing in Open Source Software and Drupal, working with private clients and B2B advertising agencies.

Related Services

Ready to get started?

Tell us about your project