work out real css solution

[patternleaf]

current issues:

• "compiled.css" should be style.css
• allow for per-page inclusion. only compile global template styles into monolithic file.
• currently some name collisions. eg, .call-to-action in builder.less is styling .call-to-action on .content-page (on account of buildless.js sucking in everything in the less directory)

though, /cc @ghing, re: the second point above, as i'm sure you've considered, a single monolithic file for the whole site would only need to be downloaded once by a client and cached, possibly speeding up later page loads.

[ghing]

Ok @patternleaf, you convinced me on the monolithic css. Especially since the builder/viewer css is pretty small.

Next steps:

• Figure out which styles are in the current style.css that are needed by the builder/viewer and move them into the LESS files.
• Clean up collisions
• Make compiled.css be named style.css

I'm wondering if we need to use your compile script ultimately, or if we can just create a style.less that imports the other less files (similar to https://github.com/twitter/bootstrap/blob/master/less/bootstrap.less) and compile that single file.

[patternleaf]

coolio.

I'm wondering if we need to use your compile script ultimately, or if we can just create a style.less that imports the other less files

yeah, i think that's a better plan. in fact currently, base.less has some stuff, but also just imports a bunch of other less files. my sloppy build script is therefore duplicating css in the compiled file. :)

also: adding another collision i found: .summary in builder.css is styling .summary on the story detail page. causing @jwirfs-brock's issue number 3 in #208.

[patternleaf]

in 773be8cdf83e677b9064118d92e700ed9944e74f is an attempt to unify the css. checkin notes:

• style.css is the compiled output file
  • base.less is the base less file that compiles to style.css
  • templates should include base.less in debug mode; style.css otherwise

there are a few issues here. there is one style "paradigm" brought in from the html burger code, and another "paradigm" which uses the old style.css. that old style.css had html5 boilerplate code as well as custom styles for various spots. the html5 boilerplate code breaks several things in the burger template, yet is required for certain things like the viewer and the builder. this commit has several messy bits to try to integrate things without breakage.

currently, html burger-based templates use a "base-template" class on the body. the story builder uses a "story-builder" class, and the viewer uses "story-viewer". in base.less there are attempts to key required css off of these body classes (with some resulting shenanigans).

there's still some work to do to integrate this stuff.

[mgrayinnovation]

Leaving as a tweak, 2/25/15

[mgrayinnovation]

Closed and moved to index of issues for reference during Pivot: https://docs.google.com/document/d/1dmlOEQJwYx0MddonRLmtN_zAitJ-lJyPm5W272nl6U8/edit