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?
- Download the tagged archive
- Extract the archive's content to
- Navigate to your Compass project root
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
A gem-based install.
// 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
<!-- 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.