ted serbinski – a blog about drupal, macs, productivity, health, and bmws

a blog about drupal, macs, productivity, health, and bmws

Blueprint Drupal Theme Released

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 :)

15 comments

 
sepeck (not verified) wrote 12 weeks 16 hours ago

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

 
ted wrote 12 weeks 16 hours ago

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.

 
Brent (not verified) wrote 12 weeks 12 hours ago

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

 
ted wrote 12 weeks 12 hours ago

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 :)

 
hobgobbler (not verified) wrote 11 weeks 5 days ago

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

 
mlsamuelson (not verified) wrote 11 weeks 5 days ago

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

 
Chris Bryant (not verified) wrote 11 weeks 5 days ago

Nice work Ted, this is great to see. Looking forward to giving it a spin, thanks for sharing!

 
randy (not verified) wrote 11 weeks 2 days ago

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?

 
blair (not verified) wrote 11 weeks 1 day ago

Nice one. I’ll give this a go some day soon.

How does it compare with Zen? http://drupal.org/project/zen

 
Drupal Themes Garden (not verified) wrote 11 weeks 1 day ago

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 ?

 
ted wrote 11 weeks 16 hours ago

@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 :)

 
randy (not verified) wrote 10 weeks 5 days ago

thanks ted! can’t wait to start building on this

 
Eric Marden (not verified) wrote 9 weeks 2 days ago

This is just the kind of theme I’ve been looking for to use with Drupal. Thank you.

 
Bjorn (not verified) wrote 8 weeks 4 days ago

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

 
Arne (not verified) wrote 6 weeks 21 hours ago

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.

Add your comment

The content of this field is kept private and will not be shown publicly.
  • You can use Textile markup to format text.
  • You may post code using <code>...</code> (generic) or <?php ... ?> (highlighted PHP) tags.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Allowed HTML tags: <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd> <p> <img> <pre>

More information about formatting options

Subscribe to updates

don't worry, spam free!

Recent comments