Theming notes for Drupal 7
A loose collection of notes about the different themes I've considered.
Table of contents
Introduction
The themes below are divided in three groups: Starter themes, Base themes and Ready-to-use themes. Each group is listed in alphabetical order.
Starter themes
Basic
Basic is a responsive HTML 5 Drupal 7 starter theme. It provides an SASS based grid system based upon Bourbon Neat.
Used by me on i18n.no:
Features:
- 3-columns, 2-columns and 1-column layout,
- 7 block regions
- Grid based layout.
- Uses Bourbon Neat
- Responsive, mobile support (Smart-phone, Tablet, Android, iPhone, etc).
- HTML5 markup
Pros:
- Very small. Doesn't get in your way.
- Provides mixins that help you do lots of common things in CSS.
- 100% semantic, if you like, no class based styles at all.
Cons:
- SASS
- Not a real competitor to Bootstrap as it doesn't have any UI components, just mixins and a grid. No default typography either. Everything has to be built.
- The semantic grid has a different syntax for nested columns than top-level columns which the styling components a little less portable than ZURB Foundation.
Regions
The position of the 7 block regions is shown below:
Setting up the environment
It requires ruby, sass bourbon and neat.
Refer to “Webmaster's notes” for setting up ruby and sass on RHEL6 and Ubuntu.
After getting the environment in place, go to the
sass/components/
directory and install the latest
versions of bourbon (3.1.8) and neat (1.5.0):
# bourbon install # neat install # bourbon version # cat neat/_neat.scss
I also updated
css/normalize.css
to the latest version (3.0.0). Note that this should be the latest
style-sheet regularly loaded. It contains the following setting, which
basically let the browser control the monospace font.
code, kbd, pre, samp { font-family: monospace, monospace; font-size: 1em; }
Development
Now everything is ready. You edit the sass directory, and use this command to watch changes done in the sass directory, and output the result in the css directory:
# sass --watch sass:css &
Base themes
Bootstrap
Bootstrap It is maintained by Marc Carver.
For detailed notes see, the chapter in Drupal notes about the Bootstrap theme. First used by me on hannemyr.com. Also see hannemyr.com design document for tweaks (probably outdated).
Features:
- 3-columns, 2-columns and 1-column layout,
- 8 block regions
- 1140 px total width
- 3 column: 650 px + 310 px, images in main content max 575 px.
- 2 column: 650 px + 310 px, images in main content max 575 px.
- Responsive, mobile support (Smart-phone, Tablet, Android, iPhone, etc).
- Multi-level multilingual drop-down menus.
- HTML5 markup
Pros:
- Pretty decent as a default look and feel and can be improved fairly easily.
- Wide set of styles and UI components, most of which are really useful.
- Popular, and therefore well-documented.
Cons:
- None.
Regions
The position of the 8 block regions is shown below:
Logo
The default logo is 32 x 32 px.
Requirements
The version of jQuery in the Drupal 7 core is 1.4.4. Bootstrap requires a minimum jQuery version of 1.7 or higher. The preferred method to accomplish this task is to install the jQuery Update module (version 7.x-2.4 or later). This allows you to set local version and also to select an external CDN (such as Google) for an even newer version.
My current set set up uses JQuery ver. 1.10 and no external CDN.
Fusion
If you wanna go straight into base, but don't want to mess around with code too much, go with Fusion base theme.
Ready-to-use themes
Bartik
Bartik is the default theme for Drupal 7.
- Images in the main column may be up to 690 px wide.
Best responsive
Best Responsive is a responsive HTML 5 Drupal 7 theme created by Devsaran. It is intended to be light-weight and professional looking. It comes with an integrated flex slider for the front page. The default layout is two columns that collapses to one column on small screens.
Used by me on diw.ifi.uio.no.no.
Features:
- 2-columns and 1-column layout,
- 12 block regions
- 960 px total width
- 2 column: 650 px + 310 px, images in main content max 575 px.
- Responsive, mobile support (Smart-phone, Tablet, Android, iPhone, etc).
- Multi-level multilingual drop-down menus.
- HTML5 markup
- Google Font and nice typography
- Detailed CSS rules for Typography, Forms Elements, Node Teaser, Comments, etc.
- Integrated flex slider.
- Facebook, Twitter and other social icon (can be disabled).
Regions
The position of the 12 block regions is shown below:
However, some of content is not positioned into regions, but is inserted directly into templates/page.html.twig. This is the case for:
- Site slogan (front page only).
- Flex slider (front page only).
- Copyright notice at the bottom of the page.
The site slogan and flex slider is positioned above three preface blocks.
The copyright notice is positioned below the footer block.
By default, only the following regions have blocks:
- First sidebar
- Content
- Help
The user menu block is not assigned a region by default, I have it as the second item (just below the search block) in the first sidebar.
Flex slider
The default flex slider slides alternates between three images. The default images is 960 px × 400 px (aspect ratio 2.4:1). Images will be re-sized to fit, but different heights will make page content jump during transitions.
Note that the images is re-sized client-side, so big images will add significantly to the page load on low bandwidth devices.
To replace the images, but new images into the images directory and modify the file names in templates/page.html.twig.
Modification
The following details has been modified in the theme (instead of creating a sub-theme).
Style sheets
The file style.css has been modified.
dt, dd
Page template
The file templates/page.html.twig has been modified.
- Flex slider
- Copyright notice
Pixture reloaded
Pixture Reloaded is a highly configurable HTML 5 Drupal 7 colourable sub-theme maintained by Jeff Burnz. It is powered by Adaptivetheme and inherits all its features such as responsive design techniques, GUI layout engine and more.
Used on CreativeCommons.no. See design documents for tweaks.
Configuration of Pixture Reloaded is for a large part by means of the administrative interface. This means that edits done to the css files may be overridden by settings the administrative interface.
Final word
[mumble]
Last update: 2016-03-08 [gh].