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.
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
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.
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:
- Copy the folder to a new folder with the correct name of your new theme.
- Immediately open the theme in CodeKit as a new project. This way, all the subsequent filename changes will be registered by CodeKit.
- Now batch rename all files called
copy_me.*
to[yourthemename].*
. - Globally find and replace all instances of
copy_me
in all theme files to[yourthemename]
. - Edit the friendly title and description in
[yourthemename].info
.