A good Basetheme must...

Events happening in the community are now at Drupal community events on www.drupal.org.
Bèr Kessels's picture
... Undo core styles and provide no CSS at all: I don't want to spend half of my stylesheet overriding other peoples styles.
33% (14 votes)
... Provide basic layout CSS: for example two and three columss fixed and fluid layouts.
63% (27 votes)
... Not provide any of CSS itself, only Core stylesheets, leave it to Drupal core to come up with good standards.
2% (1 vote)
... Not use CSS for its layout: Tables are far more pragmatic, CSS is for purists, basethemes should not be for purists.
2% (1 vote)
Total votes: 43

Comments

I am looking for some CSS

Bèr Kessels's picture

I am looking for some CSS strategies for sympal_theme, my basetheme. Now that I have 90% of the XHTML right, including lots of consistent classes and IDs, I think its time to have a look at how to ship CSS with it.

Please post any options you miss in a comment.

A really good base theme

Frando's picture

A really good base theme would be a dream for themers.

Considering the .tpl.php files, I think the files of the zen theme do a very very good job. I used them for my bluebreeze theme, and had to do nearly no modifications (heaps of good class definitions available, nearly everything could be accomplished with pure css).

For the CSS, I would use a two-file setup, consisting out of layout.css and style.css. layout.css would be responsible for - surprise - the layout, so that would be where the 3 column fixed or fluid layout is created. Style.css then adds all the colors, background, borders, content styling and so. This makes it very easy to change layout specific stuff, implement another layouting technique and so on.

For bluebreeze, I did it like this, and it very handy, as it's really easy now to play around with the layout.
(I am still looking hardly for a perfect solution: 3 column layout, fixed width sidebars, fluid width middle bar, source ordered columns (main content first), all columns with equal heights no matter which is the longest, working in all major browsers, looking OK in 5th generation browsers, and the possibility to use drupal's great clear class (by positioneverything.net) without quirks, at least in the middle column (which hence has to be floated). Positioneverything.net's "One True Layout" is the closest so far, however, the equal heights part of it has still some weird bugs that are not yet totally resolved.).

And a basetheme should then provide two layout.css files, one for a fixed-width and one for a fluent theme.

If the theme shipped with

Egon Bianchet's picture

If the theme shipped with two or three layouts to be used as resource it would be great. Such layouts shouldn't be included by default in page.tpl.php, template.php: the designer should be able to create a subdirectory of the Sympal theme with only a style.css in it and either

  • type something like @import "../2col-fixed.css"; and start its theme
  • copy and paste the contents of that css inside his stylesheet
  • start the theme from scratch

This way you should cover the poll's first two options and allow for great flexibility.

The real issue is with core styles ... since it's not possible to have it both ways without hacks ...

Here is what this basetheme has now:

Bèr Kessels's picture

base_two_col_left_bar/style.css (stylesheet for quickstart on a 2 col layout with a left 'tools' bar)
base_two_col_right_bar/style.css (stylesheet for quickstart on a 2 col layout with a right 'tools' bar)
block.tpl.php
box.tpl.php
breadcrumb.tpl.php
comment.tpl.php
menu_item_link.tpl.php
menu_local_tasks_primary.tpl.php
menu_local_tasks_secondary.tpl.php
menu_local_task.tpl.php
menu_tree.tpl.php
node.tpl.php
page.tpl.php
primary_links.tpl.php
screenshot.png
search_form.tpl.php
secondary_links.tpl.php
status_messages_by_type.tpl.php
status_messages.tpl.php
taxonomy_terms_for_node.tpl.php (All these filenames are clear enough: these are HTML files with a little PHP embedded, ready for a designer to be redesigned)

contribs (.tpl.php files for contributions, right now I only touched flexinode, but I plan to stick many more in here. copy to hthe root directory if needed)

logo.png
logo.svg (the logo invector format and in bitmap)

style.css (This one contains only development/diagnostic CSS from http://css-discuss.incutio.com/?page=DiagnosticCss just to show how the XHTML is built up)

Theme development

Group organizers

Group notifications

This group offers an RSS feed. Or subscribe to these personalized, sitewide feeds: