Bedrock

A helper module for OpenSourcery's theme system

Description

Bedrock was initially developed as a base theme for Drupal. The idea to make it a helper module came from the desire to inherit and benefit from an existing theme foundation built on Aurora and the Singularity grid system. By taking advantage of Aurora's sub-theme structure, Bedrock has grown to become a robust set of helper tools for a theme system including:

• Responsive Panel Layouts (also compatible with Display Suite)

  

• Fieldable Panel Panes (submodule)
  • @TODO Accordion
  • Content lister
  • Free-form text or HTML
  • Image link
  • Slide (for use in a Slideshow)
  • Slideshow
  • @TODO Tabs
  • Tout
• Views Plugins (submodule)
  • Dropdown button row style
• WYSIWYG Templates (submodule)
  • Accordion
  • Slideshow
  • Tabs
• @TODO Entity View Modes

Requirements

Ruby Gems

1. Sass
2. Compass
3. Breakpoint - Media Query Handling
4. Singularity - Fluid grid framework
5. Toolkit - Modern Web Development tools

Drupal modules

1. Blockify
2. Fences
3. HTML5 Tools
4. jQuery Update
5. Magic
6. Modernizr
7. Panels

Suggestions

1. Alphecca - SASS and JS library for quick prototyping and basic functionality/styles
2. Aurora - Drupal base theme. You can use whatever theme you want, but we use the Aurora stack and as such that is what we have tested these tools with.

Directions

1. Download or clone the Bedrock repository and place the module in one of the suggested locations best suited to your Drupal setup.
2. Enable the module and configure a panel page to use one of the Bedrock layouts.
3. Copy and import the Sass partials to your theme's SMACSS-based layout. For example, if you're using the Basalt panel layout, copy plugins/layouts/basalt/sass/partials/_basalt.scss to your theme's Sass structure and include in your layout partial using @import 'basalt'. We recommend structuring your partials, so you may want to place them in named subdirectories, resulting in @import 'basalt/basalt'.
4. Ensure your theme declares the required variables listed at the top of the Sass layout partial you've included in your theme. For example, if you're using the Basalt panel layout, the following variables are required: $small, $medium, $large, $xlarge (global breakpoints), $grids, and $gutters. Please see the Singularity documentation for $grids and $gutters usage.
5. @TODO Finish directions.

Resources

• Scalable and Modular Architecture for CSS