This project is not covered by Drupal’s security advisory policy.

Aether is a responsive starter theme built with Sass & Compass. Using either fluid, fixed or hybrid responsive techniques, it has 5 breakpoints and uses the widest as the default.

Aether has some cool grid features, handy sass variables/mixins and the ability to add new Sass extensions to build on your theme. It is also Context/Delta friendly for that extra bit of control.

Aether is named after a greek deity, pronounced (EH-ther) [ajtʰɛ̌ːr].

Status

Aether is currently in alpha status, meaning it will go through several alpha releases prior to a feature freeze & beta release; it is not currently considered production ready. Upgrading will be documented in the documentation guides. All testing, bug reports, patches & suggestions are welcome in the issue queue.

Requirements

This theme heavily leans on Sass & Compass. The experience will be much richer using these tools.

  • Compass 13.0 sudo gem install compass --pre
  • Sass 3.2 sudo gem install sass -v 3.2.0.alpha.275

Note: Compass does not play well with the latest release of Sass, because of a bug introduced in alpha.277, please use alpha.275 or you will have problems with image-url() and font-url(). See issue https://github.com/chriseppstein/compass/issues/989

Support & Documentation

Documentation on Aether is extensive and is growing by the day. Help out by adding tutorials, snippets and whatever else you think will assist other users of Aether here.

Features

Aether was created out of the need to decrease development time and ease the difficulty of complex responsive design. It has a number of valuable features that will aid in rapid theme development.

Feature Description
HTML5 & CSS3 Aether's templates have been hand edited to assure they are HTML5 ready. CSS3 has been used carefully and fallbacks are provided for older browsers.
RTL RTL stylesheets contain the opposite values where necessary for both layout and presentational stylesheets. Aether-grids also offers an optional direction switch.
Grid System The included 12 column grid system is a class based grid that allows for different widths per device and has the ability to produce different grids per device. It also includes content positioning classes and visibility classes per device size. Aether-grids is maintained separately in github but will always come packaged with Aether.
Legacy IE IE 6 & 7 are supported with the help of selectivizer and IE6/7 compatible CSS fall backs. IE support for 6 & 7 can be turned off separately in a single variables file.
Vertical Rhythm Careful attention has been paid to this theme's vertical rhythm. You can monitor the vertical rhythm by enabling the grid debugger in theme-settings.
Grid Debugging A visible display of grid columns and vertical rhythm lines can be turned on or off in theme-settings. [screenshot]
Column Widths There is no need to use CSS to set a width for each column and device size, column widths can be modified directly through theme settings.
Sidebar Positioning Through theme-settings, the sidebars can be positioned in 9 different configurations, per device size. [screenshot]
5 breakpoints, or 1 Out of the box, this theme responds to 5 fixed/fluid or hybrid layouts depending on screen width. Optionally, you can just serve 1 width by turning off the option to use media queries in theme-settings.
Sass mixins Aside from all the power you get from Compass mixins there are a number of included mixins that assist with common styling and web techniques.
Drush support Drush support for creating your own subtheme is available, simply type drush aether yourthemename.
Sticky Footer (optional) The base markup is sticky footer ready, a provided mixin can simply be included to initiate sticky footer. All that's required is setting a static footer height.
Variables Included in Aether's _base.scss file, there are $variables to control common styling, such as link colors, text color, button colors, border colors, vertical rhythm, font size, grid values, etc.
Javascript Optional javascript necessary for responsive design, such as html5shiv (local), Respond.js (CDN), Selectivizr (CDN) & imagesizr.js (local), responsive-tables.js (local) & iOS-Orientationchange-Fix (local)

Complimentary Modules

These optional modules compliment Aether well, allowing more control on the front-end.

Module Description
Delta This module allows for different theme settings for any context of your site. e.g. You could have two sidebars on the right on the front page, and split sidebars on every other page. It also comes coupled with Delta Blocks, which exposes a number of core Drupal elements (logo, site-name, etc) as blocks.
Block Class Add classes to any block. This comes in handy when using Aether Grids' visibility classes which hide or show content at various device widths.
Views Column Class A Views style plugin that allows for class addition to unordered lists. This is useful for creating custom responsive grids from views output.
Style Guide Style Guide's are important in any design process. This module provides an output of every Drupal component so you can be sure not to miss theming anything.

Known Issues

  • If Respond.js is enabled, CSS must be aggregated in order for it to work. This is because of Drupal's @import method for CSS files
  • Aether is currently responsive from the desktop down, in the future it may also support mobile first via theme-settings.
  • This theme aims to provide a thin theme-settings integration by only adding column classes for custom layouts and column widths. Because of this, many things you would expect to see such as additional grid columns, etc. are not present, this can all be done in the _base.scss file, and you simply need to keep your .info file settings in sync with your _base.scss settings.
  • There is a limit in the theme to using all 5 device widths, or 1 (the default). In future versions, there will be an option to expand to more, or a selective few.

What this theme will never do:

  • Compile Sass. Compass/Sass should be installed and run locally.

Thanks

#D7AX/#DAX - I pledge to make this theme as accessible as it can be. If you find any flaws, please submit an issue. Help me fix them if you can.

Project information

Releases

7.x-1.0-alpha18 released 23 July 2012
Works with Drupal: 7.x

Development version: 7.x-1.x-dev updated 6 Jul 2016 at 20:22 UTC

Using Composer to manage Drupal site dependencies