I’m pleased to announce a preview release of Blueprint Layout Tool 0.4. This version marks the migration of BLT to its own site at http://www.blueprintlayouttool.com and a focus on dramatic improvements to the source view. Unfortunately, the current development version only supports Firefox, IE, Opera & Safari support will be coming soon.

Key Features:

• Improvements to style and polish of the interface
• Dramatic improvements to source view (Powered by CodePress & PHPTidy)
  • Generated Source is well formatted and polished
  • Generated Source is Syntax Highlighted
  • Generated Source is cleaned of most extraneous markup

Known Issues:

• Source View does not work in Safari and Opera
• Formatting is off in IE
• Generated source contains several Mozilla specific tags that still need to be cleaned.

I would also like to take a few moments and draw your attention to Christian Montoya’s Blueprint Constructor application. He takes a different approach to the interface and design of the Layout Tool and has created something quite useful and fun to use. We will be working together to try and achieve similar conventions between our apps.

Check out Constructor at http://lab.christianmontoya.com/construct/

You can read about his design process on his blog at http://www.christianmontoya.com/2007/12/08/construct-01-alpha/

Today I’m pleased to announce the release of SilkSprite 2.0.  Everything about SilkSprite stays the same but the decompressed file size drops by an astounding 46%.

Key Improvements

• 11% decrease in size for sprite.css
• 50% decrease in size for sprites.png

My special thanks go out to Andrew France for achieving such amazing compression of the png file.

You can find the new version here:

http://www.ajaxbestiary.com/Labs/SilkSprite/ 

I’ve made some progress and BLT in the last week and thought it has reached a good point to release for feedback.

New Features

• Border Support
• All columns can be resized by clicking on them (even nested columns)
• All columns can be selected by clicking on them
• New Properties Panel
  • Control Border & Last attributes
  • Change ID on any div
• Improved sorting

Please post your comments below.
Get it online here:

http://www.ajaxbestiary.com/Labs/BLT2/

Known Issues:

• Interface doesn’t work well on narrow screens
• Occasional problems with sorts falling outside of the page
• Output needs dramatic cleanup
• Files need minified & optimized to improve download time & performance
• Issues remain with formatting & .png rendering on IE. I hope to address these ASAP.

This version has been tested in safari 3, FF 2 & IE 7. Please test in other browsers if possible.

Today, I’m proud to announce the release of SilkSprite a CSS Sprite plugin for Blueprint based on the widely used Silk Icons.

Benefits

• 1000 icons compressed into 1 file
• Entire Plugin is only 3 files
• Easy to use

Usage

• Place this directory inside blueprint/plugins
• Add this line to “blueprint/screen.css”,
  • @import ‘plugins/silksprite/sprite.css’;
• Use the sprites by attaching classes ss_sprite & ss_(name of sprite) to an a, span or div element. You can use test.htm as a key to the names of sprites.
• example:

  <span class="ss_sprite
  ss_add"> </span><br />

Credit

• Silk Sprite is Based on the Silk Icon Set by Mark James [famfamfam.com]
• Compiled & Adapted for Blueprint by Don Albrecht [ajaxbestiary.com]

Check it out online here:

http://www.ajaxbestiary.com/Labs/SilkSprite/

When I first started using CSS frameworks & standardized resets to streamline my web development, I adopted a process that I’m sure is familiar to many of you.  I would first link to the frameworks CSS files and then link to a project specific stylesheet.  The project specific stylesheet would build on the frameworks foundation to provide color & background data, special classes and all the other bits and bobs unique to the design.

For me, this system worked quite well.  I gained the benefit of the frameworks without excessive overhead and while I was no longer coding my CSS from the ground up, the process was surprisingly smooth.  When I first heard about plugins, I really didn’t see the point of adopting them.  They seemed an arbitrary way to include functionality that really belonged in the project stylesheet.  A recent project, however, completely changed my mind.  I was working with a client on a site that required support for several different templates (holiday sale, investor relations, technical support, etc).  While many of these sections employed radically different looks, they needed to be consistent in terms of typography, form elements, tooltips, etc.  They also needed support for seasonal theming as much of their marketing was holiday & special event oriented.

Suddenly, the plugins systems made sense.  I built a single plugin for all site wide styling and a second plugin to allow for seasonal color schemes (simply upload a different folder to the same location and you can change the colorscheme site wide).  Once I realized the power of plugins for complex projects, the realm of uses has exploded for me.

Where I use CSS plugins:

• Site specific typography & branding
• Common form elements (error, required field, etc)
• turn on and off debugging styles (great for troubleshooting)
• My personal CSS widget toolkit ( pullquotes, notes, etc.)
• Custom Grid (Instead of replacing grid.css in blueprint, I may deploy a new grid as a plugin during development)
• CSS Sprites

Plugins are currently supported by Tripoli & Blueprint.

I’m curious who here has started working with plugins or some other formal, modular system for CSS.

Let me start by saying that I love CSS frameworks.  From Tripoli to Blueprint, YUI to YAML, I’ve embraced them fully into my design and development process over the past 9 months.  Unfortunately, throughout that time I’ve had to deal with a nagging issue: The Semantic Web.

CSS exists to shed the shackles of inline formatting and truly separate content from display.  While It’s rarely possible to achieve all of a project goals in a semantic way, CSS frameworks really fly in the face of a semantic approach. Don’t get me wrong, I still think CSS is the way to go and that frameworks provide powerful scaffolding, but I think we all need to be aware that using CSS grid & layout frameworks isn’t exactly a true separation of content & styling.

Take for example, blueprint.  Blueprint contains a powerful set of tools for building a layout.  Unfortunately, these tools require that columns be explicitly defined in the page source <div class=”column span-2″>.  This makes it impossible for a change in stylesheet to completely alter a page layout for mobile devices without discarding the column & span classes and relying on an independent set of markup e.g. <div class=”column span-2 mobile-column mobile-span-5″>.  This is a rather cumbersome noose to have to carry for some projects.  Especially when the infrastructure isn’t in place to deliver two distinct versions of the site from the server.

I’m wondering how you have addressed these problems in past projects?

I’ve begun using a set of visual guides to streamline my blueprint development process.  They are simple png files that I drop into photoshop, illustrator & indesign as layers and then dial down the transparency / set fill color to something visible but not distracting.  I plan on integrating them into the next release of the blueprint layout tool as well.

• Blueprint Layout template with baseline.
• Blueprint Layout Template Without Baseline

I got a bit of work done on version .2 of the Blueprint layout tool.  Some improvements to expect when I release it next week.

• Upgrade to blueprint .6
• prepend & border support
• support for elements other than columns 

Version 0.6 of the Blueprint CSS framework has been released with several dramatic improvements.

• A much more sensible directory structure.
• A new plugin system.
• Lots of functionality extracted into plugins, keeping the core files sweet and nimble.
• New test suite for proper browser compatibility testing.
• We’re back to using em units for all vertical sizing, although with a much better implementation than what we had in 0.4.
• New ruby scripts for compressing and validating the CSS.
• Proper styling of forms.
• Tons and tons of bugfixes.

For more information visit the Blueprint site.

I’ve put together a drag & drop layout builder for the Blueprint CSS framework. It’s still pretty rough around the edges but it is usable for quickly putting together layouts.

http://www.ajaxbestiary.com/Labs/LayoutTool/index.htm

Deep thanks goes to the YUI & Blueprint teams for developing such robust tools & to Dav Glass who created both the inspiration for the toolkit & several solutions needed to put this together.

Please let me know what you think!