Split up monolithic zen.css into smaller, logical stylesheets

Yes I have, in fact, the patch above was created against a cvs head snapshot of Zen taken just yesterday. As I said, I want to continue to build on what was done in #171464 in reworking the default subtheme.

My next step would probably be to look more closely at how things relate with regard to the other CSS files. For example, the current zen-classic.css (and by extension my zen-layout.css) and layout.css both contain code that can be described as 'layout'. Is there any clearly-defined difference between them? Could they be merged together? If we can come up with a solid delineation between them, it could probably serve as the base of the layout mix-ins idea I mentioned above.

I'm open to discussion, here.

zen_classic is not the default sub-theme of Zen.

Fine, if we must be pedantic, 'example sub-theme for Zen.' But if you don't remove it altogether from the final release (which I think would be a bad idea), then intended or not people WILL look at it for guidance when creating their subtheme, and many will probably start their subtheme by modifying it rather than what's in the SUBTHEME folder. Thus I would like to make it a better example.

I was wondering if you wouldn't consider creating a separate subtheme to demonstrate your ideas instead?

For the reason I stated above I don't want to make this into its own subtheme. That said, I think I'm going to start making this into more of a real proof of concept stage, probably starting with an alternate zen-presentation.css. Hopefully I'll have time to work on it this weekend.

Tentatively reopening, at least for a few more comments. Ran into a period of the dreaded 'no time to work on project', followed by a bit of reevaluating my options.

I did a bit of searching around and found a CSS framework that's fairly close to my ideas, WYMstyle. If you want to 'know the different methods' I would suggest having a look at that. It makes use of a library of smaller fragments of CSS that can be mixed & matched somewhat arbitrarily, to a greater extent than Zen currently does.

At this point I'm focusing less on zen-classic.css, and more on the overall organizational structure of Zen's CSS (hence the title change). I picture the structure being something like this:

\zen
    \css_library
        \layout
            \base
                2_column_left.css
                2_column_right.css
                3_column.css
            \add-ins
                nav_horizontal.css
                nav_dropdown_menus.css
                grid.css
        \decoration        /* I think this is more descriptive than 'presentation' as I used above */
            black_and_white.css
            aero-ish.css
            flaming_polkadots.css
            \images
        \other
            typography.css
            ie_hacks.css
    \my_subtheme
        my_subtheme.info
        my_layout.css
        my_decoration.css
        print.css
        handheld.css
        \images

If you look in WYMstyle, under \sites\test, there's a set of 4 small test CSS files. Each of these is mainly just a list of imports of other CSS files from a library (\core in theirs, \css_library in my example). The 4 files vary only in which lines are commented out, ie which files in the list are imported and which aren't. This is essentially what I picture style.css becoming, a master that specifies which other CSS files you want to include. (It could still be done via template.php, really, this detail isn't super-critical.)

So if I wanted a 2-column layout with dropdown menus and flaming polkadots, my style.css would probably import 2_column_left.css, nav_dropdown_menus.css, and typography.css. At this point I've got a perfectly usable and somewhat 'custom' theme pieced together, but it's probably a bit rough around the edges. So I create my_layout.css and my_decoration.css for my own customizations, leaving the library as they are. (The starter kit could contain blank versions of these files.) Or I could skip including a pre-built decoration file and jump straight to the custom stuff. I would get a useful base to start from with no need to fuss with 'un-theming' the existing decorations in, say, the current zen-classic.

There's some semblance of this idea already in the current Zen 1.0, like with layout-fixed.css and layout-liquid.css. At the same time, we have files like zen.css that IMHO don't seem to have a real clear purpose, and files in \zen-classic that could probably be made easier to re-use. My overall goal here is to maximize the reusability of Zen's CSS, minimize the need to directly edit the built-in CSS, and make starting from scratch, even a subtheme, as unnecessary as possible. It should also enable easier user library contributions, in addition to subthemes.

At the moment, I'm not sure if I'm going to actually go forward with implementing this in Zen. I'm also considering just adapting WYMstyle into my own base theme for Drupal. Of course, if someone else were to take up this cause for Zen, it would make my decision a lot easier. :)

The css_library\layout\base folder is, of course, not needed since either of Zen’s layout-*.css will auto expand from 1 column to 2 or 3 column if there are blocks in its left or right sidebars.

Well, I meant a bit more than just having or not having L/R sidebars. I'd like to see some different configurations for the columns, with regard to things like size and positioning. Have a look at Layout Gala for some idea of the kind of configuration differences I mean. I'd also like to see a couple examples for more than 3 columns.

<-- but don't we already have this?

Sure, a lot of what I'm suggesting would just be breaking down and rearranging what's already there.

<-- you're not talking yahoo grids are you?

Yahoo grids, Blueprint grids, whatever grids. Maybe based on the Blueprint for Zengine work. Honestly, I've never even worked with one of these systems, I was just tossing it out as a possibility that some might like.

Also, note that Drupal’s convention is to use dashes instead of underscores in filenames.

Doesn't mean I have to like it, though. :P

Anyway, yeah, I haven't done any significant work on this. Just consider this stuff a suggestion for the future, realistically I probably won't be submitting any patches.

So, who thought this issue was dead? :-)

Ha ha ha, me! :D

I haven't had any web design projects to work on in a while, so I'd just let this sit. But lately I've had the itch to get back into this stuff. So I decided to start up a CSS framework, targeting just straight HTML at first rather than any particular templating system. So I pulled this up to look back over my notes, and whaddayaknow? There's signs of life here!

You're right, about one thing, though. Drupal's is not the only templating system I've used (though it's probably my favorite). So I was sketching out the division in general terms that would be applicable to any web design, rather than along lines specific and natural to Drupal.

A big part of my goal with that, though, was to maximize the reusabilty of the code. I do hope, as you write & refine your code for Zen, you continue ask yourself, "How hard would it be for someone to adapt this code to a different look?"