Well, it took longer than I expected (announced it a couple months back), but I'm pleased to announce that my Blueprint Drupal Theme has been released!
This theme uses the most excellent Blueprint CSS framework to setup a starter Drupal theme to make theming websites faster and easier, especially in the cross browser area. The benefits of this framework include:
* An easily customizable grid
* Sensible typography
* Relative font-sizes everywhere
* A typographic baseline
* An extendable plugin system
* Perfected CSS reset
* A stylesheet for printing
* Powerful scripts for customizing your layout
* No bloat of any kind
Compared to the YUI grid CSS, I find Blueprint simpler and more elegant. I have used both frameworks on various projects and the Blueprint has consistently been easier and faster to work with.
The goal of this theme is to take many of theming tricks I reuse on site after site and bundle these up, along with properly integrating the Blueprint CSS framework (since Drupal's CSS, is well, not the nicest thing out there ;-)) so no weird/odd CSS defects occur. The result is an amazing (well at least IMHO) starter theme. I used a beta version of this theme to design my **entire** blog in 90 minutues, including image generation & export, cross browser CSS testing, and the like. Not too shabby huh? You can also see origins of this theme at MothersClick, MomBlogNetwork, and 2 Guys Uncorked.
Features in this theme include:
* normalizes Drupal's CSS to be consistent
* properly aggregates all blueprint CSS files into a single file when this setting is enabled
* put scripts at bottom of page for nice performance gains, read more: http://developer.yahoo.com/performance/rules.html#js_bottom
* flexible layout, from 1 to 3 columns, based on where you configure your blocks to show (left, center, right)
* SEO optimization without the need for heavy modules and additional queries per page
** automatically adds META description to many pages, read more: http://googlewebmastercentral.blogspot.com/2007/09/improve-snippets-with...
** automatically adds META keywords if taxonomy exists on that node, read more: http://searchengineland.com/070905-194221.php
* better forum icons, http://drupal.org/node/102743#comment-664157
* improve forum display and performance, http://www.sysarchitects.com/node/70
* prevents duplicate form submissions with jQuery, read more
* shows the # of comments below a node since Drupal doesn't do this by default (usability)
* highlight any comments by the author of the node
* adds a "you need to login / register" box below all comments if you can't add a comment (usability)
* supports conditional comment subjects, if the setting is off it won't show a chopped off title of the comment
* uses CSSEdit http://macrabbit.com/cssedit/ comments for grouping of styles
* lots of comments and theming tricks in template.php to learn from :)
A special thanks to Richard Burford (aka psynaptic) who submitted patches and README info and helped debug things :)
From my admittedly brief reading on Blueprint CSS this weekend (considering using it) it appeared to support fixed width only css rather then dynamic width layouts. Is this the case with the starter theme?
Steven Peck
Yes, the grid system assumes fixed with designs.
However, it is flexible. By no means does everything have to be a grid. You can use a flexible/jello like container (add your own CSS) and then use the grid system as much or as little as you need within. Or you could make it like CNN.com and use a liquid header and fixed with body.
Even if you ignore the theme for your layout (and use liquid layout), the themes reset css (making elements consistent across browsers), form improvements, and general usability/performance tweaks can all still be utilized fully.
I’ve been waiting to see this for quite some time and am glad. I can’t wait to play with what you have done here and take a look at the code.
I really like Blueprint and have been using it for several projects now. It’s a great system.
Not to rush things but what are your plans for creating a release for Drupal 6? I haven’t had a chance to download it but before I put too much effort into trying to update it to D6, I figured I’d ask you what your plans are for that. If you are open to help on that front, I’d be happy to chip in where I can.
Thanks for all the great modules that you write! It’s a huge contribution to the community.
Cheers, Brent
Right now I have no immediate plans for Drupal 6 — largely because I’m not using it and don’t plan to anytime soon. That said, I am open to patches and starting a Drupal 6 branch and welcome patches/comments/ideas :)
I’m really liking this.
One suggestion: maybe some “edit this menu” links that appear in the blocks like Zen theme has, I think those are convenient.
Thanks, well done
I’ve been using the Blueprint theme for a couple hours, but I’m already convinced it’s time to scrap the workflow I’ve had in place for the last year or so, with http://blog.html.it/layoutgala/ as a starting point, and embrace Blueprint in nearly everything I do.
Nice work!
mlsamuelson
Nice work Ted, this is great to see. Looking forward to giving it a spin, thanks for sharing!
Hi Ted,
I tried your theme on my site, but when I go to view existing comments in a forum thread, or when I preview a new comment I’m adding to a topic, I get this error:
Parse error: syntax error, unexpected $end in C:\Program Files\BitNami MediaWiki Stack\apps\wikhanic.com\themes\blueprint\comment.tpl.php on line 26
Is it just me?
Nice one. I’ll give this a go some day soon.
How does it compare with Zen? http://drupal.org/project/zen
Nice work.
Suggestion: I have noticed that screenshot.png file is missing. It could be nice to include screenshot.png in your theme.
Question: any plans for porting this theme to drupal 6 ?
@randy — try the latest development release, there was a PHP parse error on some machines that didn’t support <? with the missing “PHP” part.
@blair — this theme is mean to be a very basic starting point to compared to Zen. It is entirely flexible for whatever you want to do and provides some examples and techniques. It is mean to be extremely clean and low features (if any).
Yes there is no screenshot, because well, this theme doesn’t really provide any sort of design whatsoever. If someone wants to make one I’ll gladly add it.
There are plans to eventually port to Drupal 6 but nothing immediate. Patches are welcome :)
thanks ted! can’t wait to start building on this
This is just the kind of theme I’ve been looking for to use with Drupal. Thank you.
Thanks for this great theme. I just spent a couple hours overhauling the front-end of my choir’s website: http://nlca.com. The grid and typography css make it super easy to whip up clean layouts that look great from the beginning. Regards, Bjorn
I tried using Blueprint CSS together with the Zen theme, but much of the Drupal CSS breaks the grid. I’m very curious to see if this theme fully solves this.
Instead of a real screenshot you could use a sort of logo/banner that identifies the theme, since a real screenshot doesn’t make much sense in this case.
Ted, this theme seems like what I’m looking for as a good starting point for many projects. However, would you tell me if this may be “easily” altered to work for a 960px wide page? 950px being the Blueprint default.
Thought I’d start with this tool http://kematzy.com/blueprint-generator/ and I’m just getting started investigating whether the theme is as flexible as I’m hoping. Might require lots of customization… Thanks!
@Quevin, yup you can easily override the width. You can put this in style.css and use the Blueprint docs to understand how to correctly expand the container width.
Thanks, Ted. Do I need to maintain the 24-column structure so I don’t need to alter anything within the theme? Seems that way, so if I want a “960px” wide, it actually needs to be:
True? Thanks!
Well you can reduce the column width as needed. Maybe only 20 or 22 work. Depends on your site, totally customizable. But yes what you propose will work too.
Add your comment