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/

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.