Overview

Bear Skin is the default theme for the Bear starter profile, which is a profile to use as a starter kit when building a new site. Bear Skin does not rely on the profile, but can be used as a simple, clean theme. Bear Skin is somewhere between a pure starter theme and a more styled theme. It can be used as a starter theme that will be heavily customized, or, for smaller projects, it can be lightly customized and give you a nice looking responsive theme with little work.

Demo site

http://bearskin.dev.zivtech.com/

Main features

  • Pure sass responsive navigation
  • Sticky footer
  • Flexslider
  • Sass and Compass Integration
  • Content aware responsive (selectorquery)

Installing the theme

Install manually:

  1. Go to the Bear Skin project page and download the desired release
  2. Unzip the contents place in yoursite/sites/all/themes
  3. Navigate to yoursite/admin/appearance
  4. Find the Bear Skin theme and click “Enable and set default”

Install using drush:

drush dl bear_skin
drush en bear_skin -y

Regions

Bear Skin provides the following regions:

  1. Header
  2. Navigation bar
  3. Highlighted
  4. Help
  5. Content
  6. First sidebar
  7. Second sidebar
  8. Footer

Configuring Bear Skin

Setting up a responsive navigation:

  1. Navigate to yoursite/admin/structure/block
  2. Click “Add menu block”
  3. Configure settings as desired
  4. Place the menu block in the Navigation bar region
  5. Configure your menu settings and appearance in the bear-menu.scss file

Partial structure and recommended use:

_base.scss
General fonts variables (font families, sizes, line heights), Imports (gems, sass plugins), mixins.

_bear-menu-responsive
Responsive handling of the sass menu (included in bear-menu.scss). Configure where the menu kicks with the
media query on line 1.

_sassybuttons.scss
Defining our defaults for sassy buttons.

_variables.scss
Defines our color variables and breakpoints.

bear-menu.scss
For the theming of the main menu in the #navigation region, as seen on the demo. You can change simple variables and even modify menu selectors with this file.

bear.scss
General theming file - it is the theming/reset for bear skin.

blocks.scss
Prepopulated Drupal core blocks. Custo blocks rules could either end up here for reusable blocks or go to pages.scss if the block is a specific piece of content associated with a single page or content type so it sits next to it.

comments.scss

forms.scss
Main form styling. Could include
General form items (inputs, fieldsets)
Drupal Core forms (user login, register etc)
Sitewide forms
Webforms

layout.scss
Defines major layout elements. Using jeet grid.
1, 2 and 3 columns layout settings (meaning full width, one sidebar or two sidebars)

navigation.scss
Should include all public facing menus

normalize.scss
Our main reset file
Add elements to be applied overall as a mean to reset drupal core styles.

pages.scss.
Content types general rules
Rules that apply to individual nodes
Panels Rules should go to panels.scss

panels.scss
Panels structure and layouts
Panelizer pages

print.scss
responsive-nav.scss
Theme file for responsive menu

sidebars.scss
Essentially sidebar rules when using core block system

sticky-footer.scss
If option is turned on in theme settings, controls the footer’s behavior

tabs.scss
Main tabs for Drupal Core (primary, secondary)

views-styles.scss
Control the output of all our views (no matter what content type they belong to). Therefore we have to watch out here for granularity (.view-name or .view-name-id) being the first identificator. If the views is displayed differently from a page to another (or a section to another, ex: main content VS sidebar), it could be overridden in pages.scss next to the page, panel or sidebar sass accordingly

wireframes.scss
defines debugging classes