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

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


6 Comments

Leave a Reply