Bear Skin: A Case Study

Drupal Page: https://drupal.org/project/bear_skin

GitHub: https://github.com/alioso/bear-skin

Live Demo: http://bearst.dev.zivtech.com/

 

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.

 

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. 

 

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)

Graphic/Design

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

Requirements

Recommended Additions

Various