Posted by creativitea on September 20, 2010 at 2:01pm
Hi there, i was wondering if you can help me, i have recently installed the latest Zen theme to start work on a new site and noticed it's changed slightly with the amount of stylesheets involved now. This is fine but i need to know what you recommend to do with the sub-themes. It's giving me a headache battling with so many stylesheets and switching from one to another to do some simple styling.
What's the best practice, should i be working on my own .css file overwriting these stylesheets or just amend each one as i go along?
Cheers for your help!
Rik
Comments
Use existing Sub-Theme .css files
At the moment I'm creating a whole new layout with Zen Sub-Theme (/STARTERKIT), keeping the Zen "Core" files intact and just modifying the Sub-Theme files. First I've modified all .css in layout-fixed.css which was a bad choice later on as I changed my mind and started using layout-liquid.css, copying it all over means I have to update them both, but they both work differently, so I modified pages.css; tabs.css; page.tpl.php thusfar instead of just the layout-liquid.css. Both fixed and liquid use pages.php; tabs.css; page.tpl.php.
This is my experience, but I'm pretty new at .css and .php in general, keep that in mind.
Hope this helps and gets you somewhat further with your developement.
EDIT:
Have edited the layout-liquid.css for my regions.
Use existing Sub-Theme .css files
Yeah i think that's the best way forward, it's the way i have been working but i think i would prefer my theme changes in one css file so i can delete code and return it to the core starterkit styling.
i rather change a very
i rather change a very organized css file (i use sass/compass) since you would benefit from possible updates to zen css, should they change the css files (adding documentation, simplifying selectors, etc).
Could you explain us some
Could you explain us some more about sass/compass? And what do you mean with "change a very organized css file"?
sass/compas
Sass is a CSS compiler, it allows css to be written with some more interesting syntaxes and tricks. check sass-lang.com for more info on Sass. the idea is that nesting selectors, extending them, creating mixins, all these features allows css to be leaner, shorter and easier to mantain.
Compass is a framework built on top of Sass. It has lots of interesting mixins and functions builtin, and allows a better start for grids, mixins, etc. see more details at compass-style.org and try them out.
I prefer to add a new css
I prefer to add a new css file and add my own overrides to that fresh file instead of hacking STARTERKIT's CSS files, even though they're meant to be hacked. I just find it easier to keep all my CSS in one/a small number of files than the bajillion that STARTERKIT provides.
On a related note… this issue could use some attention.
Zenophile and fresh.css
I prefer to use the fresh CSS file (and Zenophile module has a checkbox for that) and just override anything I need. It seems to me to have a better upgrade path. As for the the bajillion other css files, I'd prefer an option to have them merged Since I'm not going to modify them, I think a bajillion is a few *illion too many.
http://cleaver.ca
What to merge?
The myriad css files is both a blessing and a curse. It's a clear-cut way to see how everything might be organized, and provide different options (fluid vs. fixed, rtl support) based on which files are used.
Given that mix-and-match nature, the question then becomes what to merge? If I'm not using panels, there's no reason for me to include the panels.css. Right now my current solution is to have a css file with @imports to other zen files that I'll be using, and add that to the subtheme's .info.
Might not be practical
You make a good case for keeping files separate, although I suspect the number of file could be pared down a bit. I suppose Zenophile could have options and include/exclude as selected, although what happens if you decide later on you want panels, etc.?
http://cleaver.ca
WHERE to add my own css???
Hi I just want to add one css file for my own overrides, just like Garret.
WHERE do I do that?
Zen explains: "To add stylesheets that ALWAYS need to be included, you should add them to your .info file instead."
So I tried just adding stylesheets[all][] = my-own.css in zen_classic.info, but nothing happens... (why did I expect that?)
should something additional be done in some template or page or whatever.php that is not mentioned?
You shouldn't be adding to
You shouldn't be adding to zen-classic, but instead creating a sub-theme using the instructions provided in STARTERKIT.
That being said, .info should work. Did you clear/update the theme registry? Is the zen-classic theme enabled for your site? Is the path to your CSS file relative to the .info file correct?
If you're still having issues, please file a support request at drupal.org/project/zen.
So many stylesheets - is this still efficient?
Copy-paste what I wrote before in the issue queue:
I have always liked the fact that previous Zen versions had separate stylesheets fot layout, html elements, custom styles etc. More separation can also be useful, but downloading the latest D7 version was quite a shock to me. When the css directory of a fresh subtheme contiains 28 css files, I'm not sure where to start anymore. I'm wondering if this still efficient for my own and other people's workflow.
When I work with a team on a Drupal site, we need to know where we can expect certain css declarations. I'm afraid that too many stylesheets can cause confusion. Different developers can have different opinions about the right place for a certain declaration, or declarations that belong together will end up in different stylesheets.
I also think it's confusing that there is a large number of stylesheets, but only a part of it is enabled by default. New users may not immediately understand why editing a certain stylesheet has no effect. It may be more consistent to add only the enabled stylesheets to the starterkit css directory, and put the optional ones elsewhere. After all the templates directory isn't packed with example tpl's by default.
This is only my €0.02, based on a first impression. Maybe I will learn to appreciate it over time... I'm curious to hear your thoughts and experiences.
28 CSS files zen-like?
28 CSS files doesn't seem very zen-like. But I'll put on my zen master's robe and state enigmatically that "sometimes true simplicity can only come through great complexity".
Some of those files could likely be excluded if they belong to a particular subsystem you are not using (EG. panels). I tend to not modify any of the base CSS files and only write my own overrides in a fresh.css at the end of the chain. I find this minimizes the effort and avoids conflicts and will make your upgrade path easier.
Of course you should enable CSS optimization in production, so the number of files becomes irrelevant in the end. IE. "true simplicity". (See how I kept the zen master theme going there.)
http://cleaver.ca
Cleaver, thanks for sharing
Cleaver, thanks for sharing your thoughts.
You haven't convinced me that this is true in this case. The 'true simplicity' may come at the end, when you enable css optimzation, but you don't need to start with 28 files to get there. More importantly, I'm looking for simplicity during the theme development, not only on the production environment.
You are right that some files can be excluded; in fact, many files are excluded by default. There are just there for reference, in case you need them. I think it's great that Zen offers these files, but IMO they do not need to be in the starterkit css directory from the start. I would rather have less files to begin with and copy more files to the css directory when I need them.
The strategy of not altering any of the files sounds illogical to me. If you put all your custom css in a single file, then what's the point of having all these separate style sheets (including the 122 empty css selectors in those files)?
OK, that was a bit of a
OK, that was a bit of a tongue in cheek comment. However, what I mean by simplicity is in managing upgrades and software versioning. If any CSS fixes com downstream with an update of Zen, I can have those replace the individual CSS files. My overrides are in a separate file, so replacing those files with an updated version will not clobber any changes I've made.
Now for those 122 empty CSS selectors... personally, I'd rather see them deleted, but I could see having "development" and "production" versions of the files (with and without the selectors, respectively).
http://cleaver.ca
Do what I do; create a new
Do what I do; create a new blank CSS file, add it to the theme's .info file, then simply ignore all the other files and just put your CSS in that one file. (Or possibly create as many new blank CSS files as you need.) It may seem like you're not really solving the problem since you're creating even more CSS files, but CSS aggregation takes care of that problem.
That's what I like about
That's what I like about Zenophile module... the "fresh.css" checkbox does that for me. :)
It would be super if Zenophile had an option to create a cleaner/aggregated CSS file without the empty selectors.
http://cleaver.ca
Posted by Jeremy Toaster on
Posted by Jeremy Toaster on December 17, 2010 at 4:23am
I'm just beginning to use the Zen them for a few sites, but years ago when I started learning CSS, the whole concept behind it was simplicity and organization. Instead of embedding all your style sheets into every single HTML page, you have 2 or 3 external sheets that are called in.
I've been seeing a trend in Drupal of there being way too many style sheets as well as in phpBB and other CMS / forums. What ends up happening is each module or plugin ends up having it's own style sheet and conflicts start amassing and piling up. One sheet overrides another or un-does some other sheet. You end up spending hours digging through style sheets trying to find that one single font size tag that keeps changing things on you!
They've made something that was supposed to streamline and speed up web site production and have come full circle to complicating and making cumbersome again...
Organize style sheets by html elements, not by function
I fully agree with Jeremy and Marc. Although i'm getting used to work with many style sheets, I still believe it is a wrong choice. I would expect organizing style sheets by html elements and not by website function. In that way declarations for a specific html element are all defined in one place. If a new module is added, some routine should check the used style sheets, find the required declarations and add the ones the module needs (marked with relevant comments).
I'm aware that my point of view is a themer's point of view. But they always say that the burden is on the writer and not on the reader. In that sense the module developer is the writer and the themer is the reader.
I would like to hear the reason for so many style sheets.
BE the change you want to see in the world
This is a problem
I have a clean install of Drupal 7 and just installed Zen for the first time. I immediately noticed the vast number of CSS files. YSlow says:
While it seems like 17 of those are from Zen, that's still a huge amount. I can see there sometimes being a need for two or three, but 17? Splitting CSS up into this many files is an extremely bad practice.
http://developer.yahoo.com/performance/rules.html
http://code.google.com/speed/page-speed/docs/rtt.html#CombineExternalCSS
I'm working on a site with a lot of smartphone users. They expect the full site, not a mobile one. But their RTTs can often be up to 1000ms. 17 CSS files adds 17 seconds to the load time of a page. That's far from acceptable.
Turn on CSS aggregation, this
Turn on CSS aggregation, this combines all the stylesheets into a much smaller number of stylesheets, so the criticism is rather moot to be frank - no one should even think about running a live site with CSS aggregation OFF.
Thanks
I'm fairly new to Drupal, didn't know you could do that. It makes a big difference.
always always
I always have an 'tweak.css', that way no matter what update happens. I have all of my custom CSS in one place that I can always look too.
I really think the only
I really think the only reason for having soo many sheets is for non-techie usability. It makes it easier for a person that doesn't know what they are doing. But for people who do know what they are doing, it creates bloat. It is the same reason some themes have so many options in the admin. It is easier to point and click, than to code it manually. Now, when I use Zen, I have to gut a lot out, move files around, cut out code, and condense. I think Zen has too many sheets, and is not "Zen-Like." Who wants to have 50 css tabs open in your idm when your working? Or have to open and close 50? It is ridiculous.
http://picxelplay.com
write>read>preview>edit>read>post