Task #108
Clean Up CSS
| Status: | New | Start date: | 2009-03-04 | ||
|---|---|---|---|---|---|
| Priority: | Undecided | Due date: | |||
| Assignee: | - | % Done: | 50% |
||
| Category: | TangoCMS::Interface | ||||
| Target version: | - | ||||
| PHP Version: |
Description
Right now, Tango's class and ID use is somewhat scattered across modules. Some use only IDs some use only classes, some use dashes some use hyphens. This seems to be a common problem amongst big CMSs too, but we're here to change that trend. I think that we should: * Wrap each module in a .div which has a class value equal to the module name * Give each div within that module a plain English name that dos not repeat the module name in its parent div. * Be consistent with naming, always use hyphens instead of dashes. * Do not use IDs unless it has some JavaScript purpose. (I know its supposedly the future trend, but we'll adapt when it gets mainstream). * Supply some type of Module CSS reset / template so that the modules will display correctly out of the box (ie some lists need display:inline to look right)
Related issues
History
Updated by Alex Cartwright almost 3 years ago
The CSS files (and view files) in /trunk have been cleaned up dramatically, and have most (all?) of the changes outlined. Are you still seeing some things that are not consistent in /trunk, or are you viewing the 2.2.x series code?
Updated by Lucas Wojciechowski almost 3 years ago
Right now, in trunk, it is better than it is in 2.2.4. I'm suggesting a further simplification in the way that classes are set up within a page in order to make themeing for novice and expert CSS designers easier in the long run. For example, right now to target the article body or article header I have to do something like "#article-body" or "#article-header". This works fine when only a few modules are used, but it has a way of creating these stylesheets of endless endless module specific CSS. I propose that the module wrapper be set up such that it creates a way to target individual modules (i.e. <div class="article">, and then the elements within the article are given common re-usable classes such that similar elements can be styled across modules. Although the benefits of a system like this are less apparent now that tango only has less than a dozen modules, it could be useful when there are many more modules available, and existing themes need to adapt to these new modules.
Updated by Alex Cartwright almost 3 years ago
- Priority changed from Undecided to Medium
Lucas Wojciechowski wrote:
Right now, in trunk, it is better than it is in 2.2.4. I'm suggesting a further simplification in the way that classes are set up within a page in order to make themeing for novice and expert CSS designers easier in the long run. For example, right now to target the article body or article header I have to do something like "#article-body" or "#article-header". This works fine when only a few modules are used, but it has a way of creating these stylesheets of endless endless module specific CSS. I propose that the module wrapper be set up such that it creates a way to target individual modules (i.e. <div class="article">, and then the elements within the article are given common re-usable classes such that similar elements can be styled across modules. Although the benefits of a system like this are less apparent now that tango only has less than a dozen modules, it could be useful when there are many more modules available, and existing themes need to adapt to these new modules.
Sounds reasonable, some good ideas in there! Lets try and get it done for 2.3 =)
Updated by Alex Cartwright almost 3 years ago
- % Done changed from 0 to 50
Set to 50%, just to make this ticket part of the major CSS changes in the themes that has happened. Yet to implement the ideas outlined in the description, though
Updated by Lucas Wojciechowski almost 3 years ago
Also: Think about getting rid of any hack-ey CSS or HTML. The only example which I can think of is the clearfix <hr /> elements scattered around. Just put it all in a div and set it to "overflow: hidden;". The focus should be on using as few elements as possible while making it easier to target elements. I know this is going to take some creative thinking to get rolling, but it is a chance for tango to be really innovative.
Updated by Alex Cartwright about 1 year ago
- Priority changed from Medium to Undecided