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.

Stu Nicolls released this excellent CSS menu.  It’s javascript free and provides incredibly rich interaction for something solely CSS based.

Check it out here: http://www.cssplay.co.uk/menus/pro_drop6#nogo53 

I’ve posted a bug fix release to the Layout Tool.

Changes:

• Dramatic improvements to selecting
• Fixed script error for IE 7.

Known Issues:

There are still major issues with IE 7 and it doesn’t work well in IE 6 yet.  If anyone has a clue why the color of the div gets progressively darker in IE 7, I’d appreciate it.

You can testdrive the new version at:

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

It’s up,  I’ve posted a new version of the Blueprint Layout tool to:

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

You can view my earlier post to see what’s new and different with this version:

http://www.ajaxbestiary.com/2007/11/13/blueprint-layout-tool-progress/ 

Please post any feedback you might have below.

I’ve been working on a new version of the blueprint layout tool over the past few days.  In order to build a foundation for the eventual goal of a wysiwyg, drag & drop editor with semantic markup  I’ve needed to refactor the code & change several behaviors.

Current Status 

• Updated entire engine to Blueprint 0.6
• Ported application from YUI to jQuery
• Implemented multi-select capabilities
• Replaced  nested sorting of elements with explicit group & ungroup functionality
• Added functionality to set & remove “.last” class on columns
• Added Ghosting to sort functionality.

Going forward:

I hope to have the new version posted some time tonight.  I hope to assimilate any major bug fixes & the blueprint grid generator into the next release.  Then I’ll be working on semantify integration.

Digitart has released a wonderful pdf cheat sheet for Blueprint Development.   For those of you who may be considering switching to a Blueprint based workflow, or for those of you currently using blueprint  I highly recommend this tool as a handy aid for coding.

It’s available online here:

http://www.digitart.net/blueprintcss/bluebrintcss.pdf

On top of yesterdays release of the silksprite plugin.  There are already 3 plugins included in the default blueprint download that are quite useful.  This will be a closer look at using these plugins and will hopefully inspire you to create & deploy plugins in your future projects.

Buttons 

buttons styles <button /> & <a/> elements of type button.  Into a more polished, cross browser web 2.0 look.  It also handles hover states.

Of note, the button plugin provides 2 “modifier” classes of type positive & negative which provide the green & red appearance.   Although the icons shown in the sample are included with the button plugin, they aren’t handled by CSS.

Fancy-Type

Fancy Type provides significant, baseline compatible classes to improve the polish of your blueprint layouts. The provided classes include

• p + p indentation instead of line shifts for sibling paragraphs
• .alt a fancy, italic script to call attention to ampersands, prepositions etc.
• .dquo Fancy quotation marks for the start of titles & lines
• .incr Reduced font & line size for sidebars & similar that complies with baseline
• .caps Special, small-caps class.

CSS-Classes

A collection of utility classes to help with formatting.

• .hide
• .left (float left)
• .right (float right)
• .reset-margin
• .reset-padding
• .reset (reset both padding & margin)
• .align-left
• .align-right
• .align-center
• .align-justify

All of these plugins can be included in your project simply by adding the line

@import ‘plugins/(plugin file)/(plugin css file)’;

to screen.css

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/