I've been inspired by the "growl" like notification system and decided to build my own for my web applications. I've been using this code and style for notification systems in a couple of my projects and it has been well received. I will show you here how to add it to your own applications.

It's a very simple design, with generous padding and clear text. It's meant to float above you site's content and casts a broad drop shaddow, similar to items floating around in Mac OSX. It also fades out slowly, and finally dissapears after a few seconds. The timing and precise behaviour can be tweaked, but I think the defaults are pretty good.

The first thing I will show you is the JavaScript. It requires jQuery and makes a few assumptions about the selectors used in your views. It is meant to be easilly dropped into Rails and Padrino applications, but can be very quickly adjusted to hoock into your own selectors.

The next important part is the CSS, I will show you both the SASS code I use and the mixin for cross browser rounded corners I patches together from a variety of sources. So here is the SASS style definition:

The above is for general purpose rouded corners and glows/drop shaddows. Next, you will see the particular styling that references this for the notification system.

OK, now here comes the CSS for you traditional folk:

That's it, put those in the proper folders and script files you have in your Rails, Sinatra or Padrino apps and you should be good to go. 

For Padrino and perhaps Sinatra folks by extension here is a tip on how to make your flash messages in your application layout with HAML:

Interested in working together?

Call me: 647.270.1155

Email: victor.stan@specificidea.com

Fill out the online contact form

Copyright 2012 Victor Stan. All Rights Reserved. Login