krisbulman/aether — Issue #41: noticed a few things theming a site with aether
Author: krisbulman
Created: 2012-01-12 03:32:48+00:00
State: open

I am going to note a few things, then later break them out into tickets

* there are issues with the normalize/reset for list elements, compass sprites do not play well with them
* reusable css patterns are very useful, but only mixins should be provided with the theme and a near empty patterns file that mixins can be imported into custom classes by the themer.. this assures no filler is there to begin with and only useful modifiable code that produces no css on it's own exists in the base theme (example: pill mixin)
* page background file was actually less useful this time around
* i struggled with where to put some css, such as location specific code (header, footer, sidebar, etc), and link colors.. you would think it would go in type.scss, however it seems to have a place within the stylesheet that it pertains to, especially if it is location specific
* the pill mixin fails badly when applied in multiple circumstances.. like when applying to lists vs divs vs a plain succession of a tags. the mixin should at least be extendable or multiple mixins created that apply to certain circumstances (pill-list, pill-div) etc.
* for circumstances where I just wanted to apply a media styles, i had to go looking for the appropriate breakpoint numbers.. finding myself going into the mediaquery stylesheets to copy the breakpoints.. not sure how to handle this to make it easier
* when aether is used as the admin theme, some elements likely styled originally by Drupal's system.menus.css, which is disabled in the theme, look bad.. such as views dropdown menus, some list elements that have bullets or should be inline.. tabs in overlay are shrunk
* front pages often need different theme-settings output than the rest of the site.. the site i was working on required the sidebar be a different width than the rest of the site (at multiple breakpoints).. luckily I was able to override the classes added by the theme by using the layout-extends file! this provides a very useful tool for a workaround. It has some quirks though (just the way the grid was designed) that should be documented. . like a full stack of query classes need to be used.. you can't just use g-d-# and g-t-#.. you need to use g-d-# g-tl-# g-t-# g-hl-# g-h-#
* styling webforms was a pain in the ass.. col lengths needed to be set and it still never worked great.. must investigate styling responsive input forms
* the nav2grid option proved useful only at certain breakpoints, and not the entire set of breakpoints.. this needs to be further investigated. obviously, with this grid system, only breakpoints lower in the stack order could be isolated (like from tablet-landscape to handheld landscape, but not tablet-landscape & handheld-landscape but not tablet). must think about how to implement this.. i ended up relying on the extends file for nav items at lower breakpoints.. which causes css bloat as previously documented.
* the header to grid option is a fail i think, both in code bloat and in implementation.. must figure out how to rework this. it had a need to be created so 1. a right hand region in the header could be created for an alternate link placement and 2. so the logo image could be resized at smaller breakpoints without having to use a media query in a stylesheet for manual resizing.
* there is no navigation region in the theme, this sucks, especially when looking for a place to drop a superfish menu when required.
* the way the holy grail layout is created for the 3 column view, it alows for several arrangement options.. content first, two sidebars right (which is the source order of the html), split sidebars, two sidebars left, one sidebar right and one bottom.. however at smaller breakpoints in single column view this means that content is ALWAYS first.. and never will a block float above it. kind of annoying if you want a menu block at the top. must think about this one. i could add an if statement in the page.tpl.php, but that may make it confusing to the user