Template Variables instead of CSS?

Hello, all. First of all, I am pretty clueless as a web developer and haven't done a web site in several years as will likely become quickly obvious However, as I was thinking about a site I was asked to do, I began to wonder about the way I normally approach CSS. Specifically, I wondered if I might be able to give the content editors more control over the web site appearance by removing a lot of the details I usually put in the CSS, putting them in-line in the template, and controlling them with TVs.

This could be anything from colors to fonts to sidebar widths. My content editors are not going to dive into the CSS and I don't want them to but they can handle TVs. Is this a good idea or am I out of my mind? Thanks - John

It depends on how savvy your users are. Often I create a TV named "extra_head" or some such and place it inside my doc head in my templates, e.g.



That way I can override the global stylesheets on a per-page basis.

I don't want to hijack my own thread but, speaking of global stylesheets, here is a question that really reflects my ignorance! In the past, I have been frustrated at how differently my sites are rendered in different browsers. I am assuming this is because they all have their own defaults for elements that I have not specified in my CSS, e.g., the spacing of h1 text or the default border width.

Has someone developed some universal, generic, monster css that defaults all elements so that pages look the same on all browsers? For example, I have searched to find out where Firefox stores its default CSS so that I could use it as a template CSS but I've never taken enough time to figure out where it is. Thanks - John

Man, if you had a magic wand that fixed all the browser issues, you'd advance civilization forward many years. I'd be happy to just permanently delete IE from existence.

Back when I did some front-end work, I would use this: http://developer.yahoo.com/yui/reset/

That would reset everything back to a consistent starting point so my own stylings could do their thing without getting interrupted, but front-end work ALWAYS ends up dealing with browser-specific issues.

Or have a look to this:
http://meyerweb.com/eric/tools/css/reset/

Or to do it the 2011 way, try normalize.css. Rather than resetting all elements to 'zero' and then requiring you to re-apply styles, it instead sets them up with useful base values that you can easily adapt to your design.

They've done a great job at ironing out browser inconsistencies and it's even worked it's way into the awesome HTML5 Boilerplate.

Yes, Eric Meyer's is slightly vintage. I did't know normalize.css- thank you for the hint.

That's exactly what I was seeking! Thanks.

Now, back to the original question, does it make sense to move much of what I used to put in CSS to inline in the template and use TVs to control it? The idea is to move more of the site appearance control to the content managers rather than the site developers? Thanks again - John

I usually don't put that stuff into a MODX resource because it requires more resources: usually it's faster to serve static files (e.g. .css) instead of dynamic ones (like .php or MODx generated ones).

However, if you want to open this stuff up to your users, you might use a Template Variable that let users select one of a list of possible Chunks containing styling rules.

Not to argue at all as you know far better than I, but solely to explore, that was kind of the idea, i.e., that the css is no longer static. Well technically, it is, but that's why we are moving control of certain elements like color and margins that a content developer might want to change and moving them to a dynamic platform. Again, just a thought as it might be a very bad idea. Thanks - John