Ajax Bestiary: A Javascript Field Guide
 
Ajax Bestiary: A Javascript Field Guide
 
 

Blueprint Layout Tool 0.4 New URL, Significant Polish

Posted by Don Albrecht

BLT4source

BLT4layout 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/

Blueprint Layout Tool 0.3

Posted by Don Albrecht

BLT3

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.

Blueprint Layout Tool 0.2.1

Posted by Don Albrecht

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

New Version of Layout Tool Posted

Posted by Don Albrecht

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.

Blueprint Layout Tool Progress

Posted by Don Albrecht

Blueprint Layout Tool 0.2

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.

Blueprint Cheat Sheet Released

Posted by Don Albrecht

Blueprint CheatSheet Thumb 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

A Closer Look at the Blueprint .6 plugins

Posted by Don Albrecht

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 

Blueprint 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