Aether Subtheme stylesheets

Sass/

  • _base.scss: variables that control grids, colors, fonts, etc
  • screen.scss: Import file for common/* & partials/*
  • screen-rtl.scss: Imports of any RTL stylesheets
  • custom-scss.txt: Optional scss loaded second last, remove .txt to use
  • base/
    • _mixin-boxbg.scss: mixins to create gradient block backgrounds
    • _mixin-pill.scss: mixins to create pill style backgrounds
    • _utilities.scss: utility mixins like clearfix, fontface and sticky footer
  • layout/
    • aether-debug.scss: grid debug import from aether-grids sass extension
    • aether-default.scss: default layout import from aether-grids sass extension
    • aether-mediaqueries.scss: media query import from aether-grids sass extension
    • aether-visibility.scss: visibility class import from aether-grids sass extension
    • _layout-extends.scss: Build your own grids using layout extends. See docs.
  • common/
    • _forms.scss: Cross browser implementation for any form element
    • _normalize.scss: Custom normalize stylesheet
    • _patterns.scss: Add your own patterns from imported mixins or common css patterns
    • _tables.scss: Default and optional table stylings
    • _tabs.scss: Aether's Zen tabs implementation, soon to be ported to a mixin
    • _type.scss: Typographic elements
  • partials/
    • _blocks.scss: Drupal block.tpl.php related styling
    • _navigation.scss: Drupal main-menu and navigation related styling
    • _nodes.scss: Drupal node.tpl.php related styling
    • _overlay.scss: Drupal overlay related styling
    • _page.scss: Drupal page.tpl.php related styling

css/

  • custom-css.css.txt: Optional css loaded last, remove .txt to use, not compiled from scss
  • screen.css: Compiled css from Sass/common/* & Sass/partials/*
  • screen-rtl.css: Compiled css from Sass/common/*-rtl & Sass/partials/*-rtl
  • wireframes.css: Wireframe debugging stylesheet, turn on in theme-settings
  • layout/
    • aether-debug.css: Compiled CSS from aether-grids debug import
    • aether-default.css: Compiled CSS from aether-grids default layout import
    • aether-mediaqueries.css: Compiled CSS from aether-grids media query import
    • aether-visibility.css: Compiled CSS from aether-grids visibility classes import

Note: css/layout/aether-mediaqueries.css & aether-debug.css are loaded via theme-settings and can be turned on or off there.

Aether Subtheme .info stylesheet section

; --------------------------------------------------------------------------------
; Add required stylesheets, custom-css.css is not compiled from sass.
; --------------------------------------------------------------------------------

stylesheets[all][] = css/layout/aether-default.css
stylesheets[all][] = css/layout/aether-visibility.css
stylesheets[all][] = css/screen.css
stylesheets[all][] = css/custom-scss.css
stylesheets[all][] = css/custom-css.css
stylesheets[all][] = css/wireframes.css


.info Included CSS explained:

  • css/layout/aether-default.css: default layout (desktop)
  • css/layout/aether-visibility.css: aether visibility classes (optional)
  • css/screen.css: compiled css of sass/common/* & sass/partials/*
  • css/custom-scss.css: If custom-scss.scss is renamed this is loaded
  • css/custom-css.css: If custom-css is renamed this is loaded
  • css/wireframes.css: turn on or off in theme-settings

Why load custom css files if they are not enabled?

If you build a subtheme and manage it for a client, it will make updates from your end easier. Once a theme is in production, you can enable the custom-css.css and/or the custom-scss.css by renaming it, and the client (or you) can do on the fly edits.. without affecting upstream changes. When you update the theme, you can simply pull it in from git and their local changes will not be overridden providing they only edited custom.css files.