Posted by stephthegeek on September 27, 2007 at 10:49pm
Un-theming Zen is getting a little old, so we're looking at settling on a company-wide base theme for all new projects. The themes we're looking into are:
http://drupal.org/project/base
http://drupal.org/project/cleanstate
http://drupal.org/project/hunchbaque
http://drupal.org/project/sympal_theme
http://drupal.org/project/zen_basic
Any opinions on these? Any other must-haves in your starter theme?
One of the other things we do is to include START and END comments in each tpl file so that you can easily trace your templates on the site by viewing source with this snippet:
<?php echo "<!-- START " . basename(<strong>FILE</strong>) . " -->"; ?>
Also there's the snippet for adding .first and .last classes to all menus...
What else?
Comments
Hunchbaque
I use hunchbaque every time, and it gives me a really fast start. Of course, I'm partial to it as it was developed by a talented coworker. There is room for improvement, of course... a few nitpicky things I find myself changing almost every time... but all in all I think it's great. I don't have experience with the others.
Thanks for the input! So
Thanks for the input! So inquiring minds want to know.... what are these nitpicky things?
~~~
StephTheGeek.com | Themer for CivicActions
~~~
{ TopNotchThemes | Fusion Drupal Themes }
Some of the nitpicky things
Some of the nitpicky things are probably the fact I have disabled a lot of default Drupal CSS so that we aren't reliant on them. Some of the things I need to fix are some of the form items and what not. In CVS, there is much better handling of it and I hope to have the new release set to go on Monday. Instead of flat out disabling them, I have now just moved them to the theme folder and modularized the CSS.
This may not go over well with some, but this way it encourages people to just change the styles they don't like instead of overriding them. All without hacking up the core files. In addition, it also makes it easy to just add new CSS files to the theme so that things are organized and eliminates the need to look through several hundred lines of CSS to find the attributes you want to change. I also find it makes team theming easier since it lowers the chance of overwriting another's work. (Even though we use SVN, it still has conflicts if several people are editing and committing a single file.)
With that all said, it is an ugly starter theme. plain black and white with a reset CSS to level the playing field for browsers. By default, it has 2 sidebars and a liquid layout, but the hope is that you manipulate it. In fact, it would be best since no one wants a site that looks like it's default appearance. hehe.
ps - If you haven't guessed already, I am the maintainer. So air your criticisms, I can take it.
Hi Steph! I've used the
Hi Steph!
I've used the foundation theme a couple of times. I've never used the hunchbaque theme, but it appears very similar to foundation at first glance. Not sure about the inner-workings though, so I'll have to check it out.
http://drupal.org/project/foundation
Thanks for posting this list. I hadn't heard of all of those.
:)
I've also used BlueBreeze.
I've also used BlueBreeze. Compared to zen, it's advantage is that it's simpler (only three simple functions in template.php, basic CSS that's easy to work with, less verbose markup). It's disadvantage is that it's simpler (only three simple functions in template.php and less containers/verbose). It looks better and is more user friendly out of the box than Zen although is very pastel-ish.
Bevan/
How are these better than Zen?
I've used Zen for my last couple of sites and enjoyed working with it, but I haven't tried the others listed here. Using Zen is a huge improvement over the older standards I was working with before, but there is certainly room for improvement. So ... I'm curious about what your problems with the Zen theme are and how those problems are resolved by the other themes.
Thanks.
Zen's a good theme, no doubt
Zen's a good theme, no doubt there, but given that I'm always implementing completely custom designs, there's a lot of UNdoing of Zen that you need to do... blue stuff, icons, etc. Sure, it's not exactly difficult, but a little bit per project adds up. It'd be nicer to start from a blank slate, so clients aren't saying "Ewww, what's with those blue separators still there??" partway through, and simply seeing their own theme come to life from nothing. Plus there are several of us themers at CivicActions who sometimes jump around between projects, and it would be nice to standardize so that it's easier for any one of us to jump in on another's project.
~~~
StephTheGeek.com | Themer for CivicActions
~~~
{ TopNotchThemes | Fusion Drupal Themes }
What about submitting patches to make Zen more starter friendly?
(warning: non-themer talking. might be coming out of my butt. ;))
It seems like Zen's kind of been the de-facto standard for many people, it seems to have a pretty healthy developer community around it, and a lot of its elements have made it into core for Drupal 6. So improvements to Zen to make it a better starter theme would help a lot of people, in addition to giving CivicActions a great starter theme.
So what about submitting improvements to Zen to move the theme-specific CSS styles into sub-themes and such (and/or maybe a bare-bones "wireframe" subtheme or something... I have no idea what the proper way to handle this is :))? This way everyone would benefit.
PS: Note that I cross-posted this entry to the Zen Task Force group, as it seems like those folks might be interested in suggested improvements too. Hope that's ok!
webchick makes a really good
webchick makes a really good suggestion. I also had been using Zen as my base for a while and ended up un-doing a lot of it over and over again. I ended up creating a "wireframe" for myself based off Zen, which removes a lot of the things I end up having to remove over and over again. The multiple style sheets is something that I don't like using, as well, so I merged them into one - not sure what other's feelings are about this. I'd be more than happy to share it with people if interested, although I might have to clean it up some. I also don't see how it'd work as a subtheme, since it has less than what Zen as the main theme has.I think Zen is a great starter theme, but "starter theme" itself can mean different things for different people. Starter for who? A newbie? Or an experienced themer?
With inheritance in Drupal
With inheritance in Drupal 6, having a basic wireframe as a starter theme is clearly better, but you can still have a stylesheet (style.css) that won't usually get inherited.
Having multiple stylesheets is good -- it breaks thigs up logically, and with CSS aggregation doesn't reallyc ost anything.
Although, I really haven't
Although, I really haven't done much with customizing Zen...I always looked forward to the concept of submitting sub-themes. The use of contributing subthemes seems to have gone in different surges. One of the frustrating things about Zen in the past year though was it always being in a state of flux making it difficult to know when it was a good time to work on subthemes. It's hard to think about adding/removing to a theme when the baseline is a moving target. Plus clearer guidance for submitting sub-themes has been needed form some time now ( http://drupal.org/node/171464 ).
Perhaps now that some of the dust has settled...
Bryan Ruby
socPub
I think it's healthy to have
I think it's healthy to have a few different 'clean' base themes. I find zen's markup too verbose for many projects and would sometimes prefer something a little simpler.
zen.css should definitely be moved into a sub theme for zen's d6 release to provide a skeleton (like hunchbaque or foundation) on the core. In this way many custom themes could often just be a sub theme of the zen theme.
Bevan/
absolutely - base of zen should be minimal
A lot of us are saying the same thing here. The idea of the Zen theme is that we start with a foundation and then it can be visually customized by sub-themes. Doesn't that mean the the basic theme should contain virtually NO visual elements, but simply control the layout of the page? The blue tabs and dividers and specialized fonts etc. could be added in a sub-theme that is included in the Zen theme download. That way, the really customized themes could just branch off from the base, or they could start at one of the sub-themes which is closer to their destination.
I'm about to start building a new theme using Zen 0.7, so if I have more feedback, I'll try to contribute to the project.
Take a look at hunchbaque,
Take a look at hunchbaque, linked above. That starts off about as clean as you can get.
Laura
pingVision, LLC
PINGV | Strategy • Design • Drupal Development
Close to being fixed in HEAD
John Wilkins (JohnAlbin) has moved most of the visual elements, colors, etc. into a new 'zen-classic' subtheme. You'll need to download the development snapshot or get it directly from CVS (as opposed to using version 0.7).
--
Matt Koglin, Antinomia Solutions
Mikey, that's exactly what I
Mikey, that's exactly what I was thinking. I couldn't have put it more precisely.
Matt, great to hear someone is already working in that direction! :)
That reminds me. Now that I'm maintainer of bluebreeze, I should probably do some maintenance... Especially with d6 moving so fast!
Bevan/
Concur that un-doing an existing theme
...is both time-consuming and prone to later/client found unpleasant surprises.
After doing that dance enough times, I've now got my own from-scratch theming system which uses a variant of Yahoo grids.
HigherVisibility
Sympal was my choice
I've used sympal for the last few themes I've done - I'm now a co-maintainer (but Ber still does most of the work on it) so maybe I'm a bit biased :) Sympal attempts better (than current core) semantics for it's classes and ID's and aims for a good xhtml structure, it has a lot of overrides already in template.php and very minimal CSS.
My suggestion though would be to stick with what you know. I've tried creating my own base theme, I've used sympal...and I'm just not quite satisfied. The fact that you're looking at all these other base themes, and the fact that there are so many tells me no one else is satisfied either.
In part that's because of the underlying constrictions Drupal 5 places on a base theme, and in part it's because the true "base theme" is a dream, most sites need so many customizations and tweaks to the base that it's hardly recognizable by the end.
The former is something which Drupal 6 addresses and will make most of these base themes obsolete in time, or at least prompt big changes in them.
So for now my advice is stick with what you know and try to improve it. Base theme nirvana doesn't exist (yet).
Look outside of Drupal too..
I'm in the same boat, currently using Zen for all my projects, and had the same thought in my mind about having a base theme I could use for future projects.
Some very useful ideas outside of Drupal.
http://code.google.com/p/blueprintcss/
Blueprint is a CSS framework, which aims to cut down on your CSS development time. It gives you a solid CSS foundation to build your project on top of, with an easy-to-use grid, sensible typography, and even a stylesheet for printing.
It uses pieces from Eric Meyer [reset.css] and some others' work in Typograpghy, Grids etc.
Very Useful stuff, seems to have momentum.
I've used it on a few projects, and will continue to do so.
http://www.monc.se/tripoli/
Tripoli is a generic CSS standard for HTML rendering. By resetting and rebuilding browser standards, Tripoli forms a stable, cross-browser rendering foundation for your web projects.
Tripoli is similar in concept to Blueprint CSS.
There is also Yahoo CSS, which has a reset, grids, fonts, and base css files.
http://developer.yahoo.com/yui/reset/
http://developer.yahoo.com/yui/grids/
http://developer.yahoo.com/yui/fonts/
http://developer.yahoo.com/yui/base/
There doesn't seem to be as much consensus in XHTML.
A great series of articles here
http://microformatique.com/?p=83
Other useful ideas
http://dean.edwards.name/IE7/
IE7 is a JavaScript library to make IE behave like a standards-compliant browser. It fixes many CSS issues and makes transparent PNG work correctly under IE5 and IE6 (learn more).
I have't used it very much yet, but my take is this.
Obviously, it is javascript, and it will slow down page load, but now, more than ever is the time to use this script, I believe.
However, it does broaden the amount of CSS2 that can be used, and be sure that it works cross browser.
It can be limited to older versions of IE using conditional comments.
Right now, without this script, there is little point is using CSS that doesn't work in old versions of IE, but the market share for IE6 is falling by the day, and now is the time to start making full use of the CSS improvements in IE7.
Most other browser have been ready for some time.
Regards
Alan
Blueprint
I've tried Blueprint and even created a Blueprint Drupal theme. The quickest theme ever: about 15mn... I should put it online, but it's really just a proof of concept, since at the moment Blueprint is still in beta and there are lots of changes with each new release.
Anyway Blueprint offers a bunch of good ideas.
Blueprint CSS framework + Drupal themesettingsapi
Blueprint seems a well maintained CSS framework with a good team behind and elegant as you described
http://code.google.com/p/blueprintcss/
Since there is an api for Drupal settings with the module Drupal version5
http://drupal.org/project/themesettingsapi
and apparently custom theme settings functionality in Drupal 6 core?!
the challenge would be integrate the Blueprint Grid CSS Generator
http://kematzy.com/blueprint-generator/ into Drupal -
It seems a way to get closer to the holy grail of truly dynamically configurable and standards compliance theming solution for Drupal
(unfortunately attempting to do in a required standards is above my degree of coding knowledge)
Roople themes; http://drupal.org/project/litejazz, http://www.roopletheme.com/
are good example of usage of themesettingsapi integration in Drupal Theming,
a CSS framework like Blueprint seems a better candidate for the job.
licence note:
The code for Blueprint Grid CSS Generator' is released under the same licence as Blueprint. (download at the bottom)
http://kematzy.com/blueprint-generator/
Blueprint CSS now has a dual MIT/GPL licence like the jQuery
This may be a crazy question, but....
For theming in general, I would really love to have the ability to disable all, or better yet each CSS file individually, except for the active theme's style.css file. I'm pretty new to Drupal, and I don't even know if it's possible, but if I knew the right way to approach accomplishing this in a module, I'd do it in a second. Since all the files appear to come together in the template engine, the only way I can think of (and I've been thinking about this a lot lately) is either:
(a) deleting the $styles variable in page.tpl.php, which isn't the approach I'd like to take.
(b) deleting the CSS files I don't want to use, but then what if I change my mind?
(c) having an option to enable/disable each stylesheet in each module, which just isn't feasible
None of these seem like the "drupal way" of doing things, and I'm so sick of overriding default styles because it takes time, and really it just adds to the load time unnecessarily. I think there has to be a better way. I just wish I knew where to start...
There's a patch in the issue
There's a patch in the issue queue for D6 which, if committed, will let you disable module and core provided stylesheets in the .info file. The patch is not in yet, but I have high hopes for it.
Interesting...
It's more manual of an approach than I was thinking, but I'd be more than happy to have that option.
Thanks for the heads up :)
Very important patch
That sounds as a very important patch. Exactly what Drupal needs (along with the other improvements of D6) to be designer friendlier.
Do you have a nid for it?
check this
check this http://www.lullabot.com/blog/fixing-menu-css-themers-6
I will make the geek rain
I will make the geek rain dance every night untill d6 comes out with that patch!
It will make the work for us who mainly do custom themes soooo much easier.
/morten.dk king of rock
morten.dk | noget med ILD
/morten.dk king of rock
morten.dk | geek Royale
How about review dance? ;)
http://drupal.org/node/163785
Test the patch, report any errors/possible improvements, and chime in there with your themer perspectives. jGirlyGirl did an excellent job making the case for this patch. :) If more themers provide their testing results and perspective, we might be able to get this in post-freeze.
Starter theme -well kinda ...
I have as so many others build my own collection of css stuff (css framework?)
Its build first off as a framework for html pages - so i can use it for sites thats not build in drupal (yeah a 3 pager is kinda overkill to install a drupal), then over the last year i have build it into a drupal design theme - with some of the best practice stuff from the zen theme -so we have an opportunity to identify the nodes, pages blocks etc (the stuff that afaik will be build into d6 ?)
But the big prob for me is all the stuff that goes on inside template.php - That file is just getting insane large, and trying to get some sanity into it makes my head hurts. So what i have ended up with is a collection of small snippets from ether the handbook or my own php stuff, and every time i need that "image cache resize through the template" snippet i have a place to find it...offcourse that stuff is on a intern server hmmm me gotta share
ill try to get all the stuff online for the people in a couple of days my css "framework" files is placed here: htt://css.morten.dk. its clean css and not drupalised.
I must say what i have heard from the upcomming d6 theres no doubt that it will rock :)
/morten.dk king of rock
morten.dk | noget med ILD
/morten.dk king of rock
morten.dk | geek Royale
Now that we're dreaming about perfect templates
In the long ago days of 2006 B.D. (before Drupal), we use to develop separate HTML pages for every purpose on a site. You could go through the equivalent of half a dozen themes (or 20 templates) by the time you were done with a major site.
Each template would have its own style sheet that would cascade from the core style sheet, usually called something like L2-master.css. Every other template's style sheet would reference the main one using @import and then add the necessary patches. The results: a LOT less CSS and quicker page loads.
Drupal needs a structure where each content type can reference a core style sheet or have its entirely different one. This would allow for a site to have the same markup structure throughout, but have the equivalent of radically different themes. It would also come in handy for a company site with a wiki or extranet. Pages could be re-assigned from the public area to the private area and back, without heavy re-coding or re-assigning classes.
Today, Drupal's theming pushes you heavily towards a one- or two-template site, since it seems to be rocket science to have multiple themes running on one site. It should have either different themes assignable to different content types, or an easy way to assign different style sheets to the templates at the page level. If you know ways of doing that already, please share :-)
@modulist
This is actually really easy
This is actually really easy to do in Drupal 6. You can also do it right now, but it's a little more complicated.
Right now, in node-NODETYPE.tpl.php:
<?phpdrupal_add_css('css-for-this-node-type.css', 'theme');
?>
The reason this is more complicated is that this doesn't actually remove a core stylesheet without doing a little more work. However, that more work is a matter of: Creating an override for theme_page; doing a check to see if you've added a node stylesheet (the easiest way at that point is probably to just set a global in the above snippet), and if you have not, add your default stylesheet.
In Drupal 6, you can use the magic of theme inheritance to make it easy to swap stylesheets, and use a module that implements hook_nodeapi to switch your theme. The module is about 5 lines of code and after that, it should be easy to get your base theme and sub-themes how you like them.
I think that technique is in
I think that technique is in some ways of deprecated by the CSS aggregator and compressor in d5.
Bevan/
The Sandbox theme
I like the general philosophy behind the Sandbox theme for WordPress http://www.plaintxt.org/themes/sandbox/. If you want a particular starting base for your website, you just activate that css file and it changes the layout of the site. However, it does not assume anything about styling. The designer is expected to add that.
There has been an attempt to port the sandbox theme to Drupal http://drupal.org/project/sandbox-theme. I'm not sure how that project is going. Adding a folder of css layouts to a stripped down version of the Zen theme would provide many of the same advantages.
Re-create zen as a true starter theme
There is now an open issue in the Zen issue queue to move the current style into a sub-theme and re-create the base theme as a true starter theme: http://drupal.org/node/171464
From the current discussions in this thread, I think there will be a lot of support for this idea. But what do you think?
- John (JohnAlbin)
- John (JohnAlbin)
Totally! I'm implementing
Totally! I'm implementing my most current theming project as a subtheme of Zen. Actually I'm surprised it wasn't done this way already -- Zen's subtheme support is pretty good!
I ran into only one issue, where if I put page.tpl.php in the sub-theme directory, zen theme, as the main theme, uses it instead of zen/page.tpl.php, however on refreshing admin/build/themes drupal recognizes the subtheme as a main theme, and I lose all of zen's template.php functions and layout.css etc. But other than having to place my customized page.tpl.php in the zen dir, I was able to leave the main theme untouched.
The above issue should be fixed in d6 when subthemes are supported by core (rather than by the zen theme only) -- I think.
Bevan/
Steph, we've been using
Steph,
we've been using 2-column GlossyBlue (http://drupal.org/project/glossyblue) for almost all our projects, at my current employment, and it's worked great for us.
Once you figure-out couple bugs and tune number of things to your preference, it's a quite versatile theme.
Highly recommended.
.............................................
http://twitter.com/inadarei
Advanced Theme Construction Kit (ATCK)
atck was developed in a production environment for purposes of quickly building css and xhtml valid Drupal themes from scratch without having to un-theme an existing Drupal theme to do it.
http://drupal.org/project/atck
Check this out
Better luck with Foundation than Zen
Hi, regarding the @jGirlyGirl comment above regarding foundation theme I've tried quite a few themes with this premise in mind. I also (currently) use foundation theme for my starting point, as I've had better luck with the css in foundation than with zen.
However, ATCK sounds quite promising. It sounds like it was originally based off of Yahoo User Interface (YUI) grids, but forked for some unclear reason?!?! Darn, I wish i understood why they chose to fork from YUI?! (pixel perfect design can be obtained with YUI, btw - so like i said, unclear). It does look like it uses the default yui grids reset.css but I'm not sure what other default changes were made, or why. Seems pretty cool otherwise.
--
mike stewart { twitter: @MediaDoneRight | IRC nick: mike stewart }
Not GPL
I don't believe YUI is GPL, so that could be why.
Michelle
See my Drupal articles and tutorials or come check out life in the Coulee Region.
YUI is compatible with GPL
YUI uses the modified BSD license which is compatible with GPL so that couldn't be the reason.
Not good enough
Anything hosted on drupal.org must be GPL, not merely compatable with it.
Michelle
See my Drupal articles and tutorials or come check out life in the Coulee Region.
Surely good enough
The fact that a license is compatible with GPL means, by definition, that a software based on that license can be released under GPL.
Since YUI is licensed under the modified BSD license, which is compatible with GPL, it is perfectly permitted to base a theme on YUI and license it under GPL as required by the Drupal policy.
I don't know
I'm not an expert in licensing. All I know is that themes on drupal.org have to be GPL. If you want to know more, ask the people making the theme.
Michelle
See my Drupal articles and tutorials or come check out life in the Coulee Region.
Doesn't matter
The first section of this page has details and the exact policies: http://drupal.org/node/103704
and
This means any legal implications of mixing licenses is irrelevant.
Bevan/
yes, but...
This is a fairly complex area and there is plenty of misinformation on the subject so it's great that you pointed out those two simple rules.
Two exceptions to the second part relates to modifications and how easy it is to get the code.
If you start with code that can be relicensed as GPL and then modify it and integrate it into your project (theme or module) then it can be committed to the Drupal.org cvs repository.
If the supplying project makes it difficult to download revisions of a file (e.g. they are only available via SVN and not a tarball) then it is allowable to include that code into Drupal.org cvs repository.
So, I think that this theme falls under exception #1 but if it doesn't then you are right that offending bits should be removed.
--
Knaddisons Denver Life | mmm Chipotle Log | The Big Spanish Tour
knaddison blog | Morris Animal Foundation
You are wrong
Bevan, if I understand you right, you claim that the fact that a work must be licensed under GPL to be checked into Drupal's CVS, implies that the work must not be based upon another work which is only compatible with GPL but not GPL itself. But that is wrong, I am afraid.
If a software is distributed under a license compatible with GPL, and that software is later used to build another software, then that other software can be distributed under GPL solely. There is no need to include the license of the first software.
In this particular case, the implication is that a theme based on YUI, which is licensed under the GPL compatible modified BDS license, can be distributed under GPL. The theme therefore submits to Drupal's policy for checking into CVS.
All this is pretty clear from reading the license itself. I can also recommend reading the very thorough FAQ, and the book Open Source Licensing: Software Freedom and Intellectual Property Law by Lawrence Rosen.
I'm abandoning ATCK. or am I missing something?
ATCK is a derivitive of YUI. Something that originally appealed to me. but now that I've played in my sandbox, it seems to me that YUI is bassackwards!?$#?! I could write a dissertation explaining why. But I mostly agree with what Bèr said here: http://groups.drupal.org/node/892#comment-2307. Sadly, I read his thread it before attempting ATCK.
I continue to like the concept of a "level playing field" and graded browser support that YUI provides with reset.css & fonts.css. but grids.css seems wrong to me (micro-format definition arguments included).
in short: editing X/HTML for layout, doesn't make sense to me
but what am i missing? two of the largest iNet companies are both maintaining code utilizing YUI? yahoo obviously being one, but also notice link to css from www.Google.com/ig.
oh, and back on topic... @steph what did civicactions ever decide on their base theme?
--
mike stewart { twitter: @MediaDoneRight | IRC nick: mike stewart }
I'm admittedly biased
...but I think that frameworks such as atck, which uses a modified version of YUI Grids, offers a lot for either a) multi-person situations or for b) individuals that are not top-to-bottom css masters. For instance, it would arguably be a much easier beginning for many folks to turn atck into a what-ever-column/row layout they want than it would be with a theme that comes one way (e.g., with the standard header, two sidebar, content area, footer layout).
Of course, things like panels is beginning to make that argument somewhat moot these days. :-)
--
HigherVisibility
What Good HTML Code Looks Like
Very usefull for anyone building a new base theme. I will put most of the advices in this sheet into Sympal theme soon.
http://www.ukimagehost.com/uploads/fff9652d04.jpg
http://www.webschuur.com | http://bler.webschuur.com
Interesting
Nice diagram. I found it ironic, though, that they put their sidebars before the source. :)
Michelle
See my Drupal articles and tutorials or come check out life in the Coulee Region.
Sympal
I'd be interested in seeing that when you are done.
learn one, teach one, do one
B7
I like to start with B7
http://drupal.org/project/B7
con paciencia y calma,
sube un burro a una palma.
con paciencia y calma,
sube un burro a una palma.
New, minimalist Zen!
Whoa, while perusing some of the latest updates on d.o tonight, I noticed the shiny new Zen! http://drupal.org/project/zen
It appears as though the blue Zen of yore has been moved to a subtheme, as well as a bunch more updates/fixes. I'm playing around with it locally and this now makes Zen my best buddy again :) Kudos to John/any other Zen folks!
~~~
StephTheGeek.com | Themer for CivicActions
~~~
{ TopNotchThemes | Fusion Drupal Themes }
Indeed, John has done a fine
Indeed, John has done a fine job of moving the Zen theme closer to where it needs to be. I wish m3avrck would get blueprint theme sorted, or at least let me help.
fs.io
drupalcontrib.org