Page 1 of 1

rethinking css

Posted: Tue Apr 12, 2005 4:34 am
by pbol
Hi all
I've been messing around with CMS made simple for a week or so, and it seems like it'll do what I need (or at least it will when I sort out getting the News module to work - which it doesn't at the moment, I'll put a post in one of the 'help' forums about this)

I'm not a coder, but have a pretty good understanding of HTML and CSS. I'd like to make two suggestions  regarding the general approach to CSS in CMS made simple. At present the CSS suffers from what I call 'class overproduction' - it's really easy to keep knocking out new classes, the trouble is that a. it makes it hard to code -  you have to keep going back to the stylesheet, and b. the pages have no logical structure if you view them in a user agent which doesn't support CSS. The best way to see this is to user the indispensable 'Web Developer' extension in Firefox, which has a 'turn off CSS' function.  If all your styling is by It also means your HTML is riddled with classes.

First, I'd suggest that a much better approach is to give your content types ids: id="maincontent", id="mainnav" id="banner" etc,  and then use plain HTML markup (h1 h2 p ul etc etc) within those elements. Then write your stylesheet to target the HTML elements within their parent elements: #maincontent h1, #header ul etc
Done this way it's surprising how little CSS actually ends up in the HTML code, which makes the actual content really easy to read.
It also means that you can join the chorus of smug, know it all CSS-heads in their 'keep content and presentation separate" mantra!
As an example, the Calender module has a class applied to every table cell, using the decendant selector method the table could be wrapped in a div or be given one class (depending on whether there was associated which would allow styling of each element type within the table. This can cut your HTML code size in half.

Second, and I'll admit it took me about a year to work this out, don't use breaks! -  use elements with the appropriate display type. In CSS there are two broad categories of elements - block, which have implicite line breaks (p, h, ul, div etc) and inline, which are, er, inline (span, em, strong etc). If you find yourself using span followed by a break you are effectively saying 'this bit is supposed to wrap onto the next line if necessary', followed by 'put a line break here'. Better to use a div in the first place, or better still an HTML element like h3.

Re: rethinking css

Posted: Tue Apr 12, 2005 9:52 am
by Ted
Pbol, would you be interested in "cleaning up" the default templates for the 0.10 release?  And, for that matter, make suggestions for all the modules you think are over engineered?  This is something I've been wanting to do for ages, but never had the time or motivation to do (I'm a lousy html/css guy).  This would be INCREDIBLY helpful if you have the time.

Thanks!

Re: rethinking css

Posted: Tue Apr 12, 2005 12:01 pm
by pbol
Sure, I'd be prepared to help. As I said I'm not much of a PHP coder, I'm prepared to wade in, but a lot of it looks like  Greek to me... It's always fun to learn though.

As far as time goes, well, I have a full-time job and a one year old - other than that I pretty unoccupied!

-by the way: I'm in Sydney, Australia - I work for a large media company (the ABC, a bit like the BBC) - and my timezones are probably completely different to yours.

I'm interested in CMS made simple because I'm setting up a site for a company who make high-tech bicycle gear systems. Their parent company is in Germany, but the local arm is very much one man (or woman to be exact) and her dog. I was attracted to CMS because it seems similar to a CMS system we use at work: templates, content types, custom tags for the inclusion of database generated content - I'm pretty comfortable with that stuff.

paul bolger

Re: rethinking css

Posted: Tue Apr 12, 2005 12:45 pm
by Ted
Great!  No PHP is really involved in this one.  I'd like to take the default template that comes with CMS and clean it up a bit.  Remove the extra classes, make them make more sense, possibly make it look a little better.  As we get closer to 1.0, I'd like to give people a more versitile canvas to work from when they do a fresh install.

Same with modules.  If you see that the HTML looks bad, tell us how to clean it up and we can do the actual coding of the changes.  That's the kind of stuff a code monkey like myself can handle.  :)

And, yes, I have a full-time job and a two year old, so I know what it's like not to have a ton of free time, so do only what you can.  Real life has to come first.  CMSMS is not THAT important.  :)

Thanks again!

Re: rethinking css

Posted: Wed Apr 13, 2005 5:47 am
by pbol
Do you have a dummy page somewhere which has examples of all the classes in use? Either that or a list of were the respective classes are invoked.
There are quite a few in the default stylesheet which must refer to content types I haven't seen yet.

Re: rethinking css

Posted: Wed Apr 13, 2005 9:43 am
by Ted
No, there isn't.  The default template is a completely separete beast.  I would concentrate on that as if there were no other content types or anything.  Even the phplayers stuff in the template should go.

Re: rethinking css

Posted: Wed Apr 13, 2005 10:26 pm
by pbol
What sort of format would you like the HTML docs in? Would you like me to just clean them up, or leave in the deleted stuff so you can S/R using that? I could put the deleted bits on new lines with a marker string at the beginning if you like.
Whatever is going to work best for automated replacement.
My feeling is that the module css is best keep separate from the main template css, in commented sections of the stylesheet. What I might do is put in a 'master' section in the template stylesheet, which will include the font-family, master sizing, body margins and borders.
Sound OK? What's the deadline?

Re: rethinking css

Posted: Thu Apr 14, 2005 1:50 am
by Ted
You can do them in whatever format is best.  I'm very flexible.  I'd like to have them in 0.10, which would probably be in about 2 weeks...