template team web
  CSS overview
  bucket types
  setting channel colors
  view the CSS
  conversion tips
  Webreference CSS tutorial
  Index DOT Css QuickRef
  CSS spec @ W3C

webeng: template team: syndication buckets and CSS: overview

basic concept
A web page is split up into generalized, reusable, elements (I'll call these buckets since content gets "poured" into them). Font and color attributes are declared for each bucket, defining content- and/or layout-specific functional areas (header, border, link, etc.) as applicable; then defining sub-attributes for these areas.

The goal then, is to use these buckets to build up each web page. Since the attributes of each bucket-type are defined functionally, rather than by appearance, this facilitates syndication (different font/color schemes per partner), because the value of each parameter can be changed without obfuscating the function of that parameter.

Once all of the functional elements of each bucket type (and also those basic values applicable to an entire page) have been formulated, the result will be transferred to a Cascading Style Sheet (CSS). Each cobrand will have its own copy of the CSS, with values of the various significant parameters (fonts/colors) set according to the cobrands wishes (e.g., matching their main site).

A pitfall to avoid is to NEVER use an existing attribute (e.g. CSS class) based on the CURRENT value. In other words, NEVER use a parameter because it is "blue", instead, use it because it is "header background color". Likewise, NEVER use a parameter for a function other than for that which it has been defined--e.g., NEVER use "header background color" for the footer or navbar background, else you confuse the function-specific nature of all the parameters, and syndication efforts become exponentially more difficult and inflexible. For example, a color change to the header background will then affect other unknown areas, say, the alt offset color on the artist trading card--or something!

For listen.com internal use only.
Last Updated: