[Tutorial] Use CSS as MODx document (now compatible with IE)

Hi there. Does this tutorial is also compatible with Mozilla Firefox and Google Chrome? [ed. note: keiooz last edited this post 12 years, 2 months ago.]

If you've been designing CSS like I have for years, you can utilize TVs for your content resource to determine how you would like it to be presented.

Some notes:

• I've been utilizing the @import statement (usually in combination with link rel element) for modular CSS for quite some time.
• My CSS is split into 5 files, all ordered according to their priority based on their function.
• One of the CSS files is document specific. So I load the CSS in the following way: HTML Overrides, Layout Styles (2 column, headers, etc.), Content Styles, Page Specific Styles (an article vs. a blog), and finally "functional CSS" (CSS that mimics application functionality).
• I don't utilize browser-specific CSS hacks. I've simply chosen not to support IE 5.X or IE 6.X.

As a result, if my page is of template, Article, I may choose a different "Page Specific" file or layout structure from any other page very easily. I've utilized this with TV's to determine which classes, or even Resource Specific CSS. Doing so allows my users to have some control over the way their own content is presented without it undermining the consistency of the site's presentation. Furthermore, I still maintain control over when custom CSS may be applied (within the site).

P.S. Thank you for this tutorial! It was exactly what I wanted my whole life and never knew it.

Quote from: davidm at Jun 19, 2006, 08:23 PM

Pre-requisites :


1. In the manager, create a folder to store your stylesheets, not required but it's cleaner. For the sake of this tutorial, this folder will be named "css".

Great tutorial and quite easy to follow But can i be cheeky and suggest this paragraph can be made a bit more newbie friendly with a quick rewrite:

1. In the manager, create a document and set it as a container (tick box on the settings tab) so it acts as a folder to store your stylesheets, not required but it's cleaner. For the sake of this tutorial, this folder will be named "css".

just to save the newer users like myself scratching their heads wondering how and where you create a folder, not rocket science to work out but i figure if it stumped me for a minute or three others would be as well and the less hassle a new user has the more likely they are to become an old hand.

Thanks

thanks for this awesome tutorial. its quite helpful.

I might have missed something, but is this folder with css visible for publishers?
(When deleted this page you are in trouble
I always make a chunk and while developing just add <style>{{-css}}</style> in the head.

The thing I'm missing is line counting, thats very usefull when developing and using FireBug.