Skip to content

Starter Drupal theme with my ridiculous and self-indulgent SCSS structure

Notifications You must be signed in to change notification settings

75th/drupal-7-zen-3.x-starter-subtheme

Repository files navigation

Lanny Heidbreder's starter Zen 7.x-3.x subtheme

This is a Drupal 7 theme that inherits from Zen 7.x-3.x. It has a couple of features from 7.x-5.x grafted in, but for the most part it eschews the massive amounts of pre-written SCSS extra features provided in Zen 5.

Features

In scss/ you'll find my normal stylesheet structure. Most of the files are only imported into other files and not linked directly in the HTML; these "partials" have names beginning with underscores, as is the Sass convention.

Of particular note is the scss/base folder. _base.scss is the file you want to import; the other files are imported into that one, and have two leading underscores to represent this.

Be sure to also see scss/base/README.md for more info on the files there.

The template.php file does a few things by default:

  • Gets rid of the "(All day)" suffix on date_all_day dates
  • Modifies the site logo HTML element depending on whether the front page is being viewed
  • Puts id="paragraph-%pid on all Paragraph entities
  • Adds node__VIEW_MODE and node__NODE_TYPE__VIEW_MODE template suggestions
  • Fixes some field_collection theming issues with bundle/field name collisions
  • Removes ugly "See map:" text from location module map links
  • Grafts in some local task tab functionality from zen-7.x-5.x

There are also helper functions and dormant hook implementations in template.inc to do a few things:

  • Extract a single field value from an entity object (needs work)
  • Make location module proximity searches more user friendly
  • Wrap menu_block submenus in an additional div
  • Make SVGs generated by Adobe Illustrator directly embeddable into HTML
  • Construct grammatically pleasing "Empty result" text in Views with date contextual filters
  • Stop Drupal's default behavior of automatically expanding the children of menu links pointing to the currently-viewed page
  • Add classes to Views list containers (<ul>, <ol>) denoting how many rows are within
  • Add a notice to the bottom of the final page of a paginated View

TODO/FIXME

Back when I used the less Drupal module, I had a PHP function that did some overcomplicated calculations to generate responsive breakpoints and other variables, and injected them into both Less and JavaScript. I've since abandoned less.module in favor of Sass with CodeKit, but I don't have a foolproof way of syncing those values between SCSS and JS yet, so there is some duplication there.

Usage

This theme is set up to work with the Mac app CodeKit. If you are not using CodeKit, you can delete the config.codekit file and be on your way. If you are using CodeKit, it is very important that, when setting up this theme, you follow these steps in this order:

  1. Copy the folder to a new folder with the correct name of your new theme.
  2. Immediately open the theme in CodeKit as a new project. This way, all the subsequent filename changes will be registered by CodeKit.
  3. Now batch rename all files called copy_me.* to [yourthemename].*.
  4. Globally find and replace all instances of copy_me in all theme files to [yourthemename].
  5. Edit the friendly title and description in [yourthemename].info.

About

Starter Drupal theme with my ridiculous and self-indulgent SCSS structure

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published