A simple extension for Compass that provides easy, attractive styling for flash messages.
Ruby
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
stylesheets
templates/project
.gitignore
README.markdown

README.markdown

Compass Flash Messages

A simple Compass extension that provides easy and attractive styling for flash messages. And, c'mon, who among us doesn't like easy and attractive?

Installation

Now

  1. Download the tagged archive
  2. Extract the archive's content to <compass_project_root>/extensions/flash-messages
  3. Navigate to your Compass project root
  4. Install the extension

    $ compass install flash-messages
    

    You should see something like this:

    exists sass
    exists ../img
    create ../img/success.png
    create ../img/info.png
    create ../img/warning.png
    create ../img/error.png
    create ../img/validation.png
    exists ../css
    

The paths may vary and you'll see additional output, but the gist is that five (5) images were installed in the images directory configured in the images_dir value of your config.rb file.

Soon

A gem-based install.

Usage

The Stylesheet

// Import the extension
@import flash-messages

// Uncomment the mixin below if you're comfortable with the default class names:
//   .success, .info, .warning, .error, .validation
// +flash-message-classes

// If you'd rather do your own thing, just include the appropriate
// message mixin. For example:
//   body #my-success-message
//     +success
//   body #my-error-message
//     +error

The Markup

<!--
  If you're comfortable with the default class names and have included
  the flash-message-classes mixin
 -->
<div class="(success|info|warning|error|validation)">
  This is an important (success|info|warning|error|validation) message your users need to see
</div>

<!--
  If you're doing your own thing, using the example SASS shown above
 -->
<div id="my-success-message">
  This is an important success message your users need to see
</div>

<div id="my-error-message">
  This is an important error message your users need to see
</div>

Credits & Screenshots

I revere good design, much less great design. Unfortunately, I can't design my way out of a wet paper bag. I wish it weren't so, but it's the ugly truth.

The visual design generated by this extension is stolen from in homage to Janko Jovanovic and his work as detailed in his blog article, CSS Message Boxes for Different Message Types. All I did was translate them to SASS and apply them as a Compass extension. The real work is his and the credit belongs there too.

The icons, as he also mentions in the linked post, are from the Knob Toolbar Icon collection.