Nitty

Published on the 25th of April | Takes about 7 minutes to read.

Nitty does notifications better then UIKit, using UIKit.

What's Nitty?

Nitty is a small Javascript script that does handles notifications on our site. It was written by me as a small side project.
In my opinion, the notification that UIKit offers looks a little bad. Their alert component on the other hand, look very nice. The big diffrence between the two, other then looks, is that their notification component can be made using Javascript, whereas the alerts don't.

The name Nitty is just an amalgamation of Neat and Notifiactions, because I think this looks neater then the standard UIKit notifications.

Nitty essentially turns these alerts into notifications and offer comparable functionality as those alerts. You can for instance set a name for your notification and have Nitty close it for you. You can find uses within out website or on this page.

Can I use Nitty?

Sure, just don't claim it as your own work.
You can find the script on gist.github.com. You'll need jQuery to initilize Nitty and UIKit to have the notifications show up. You can use your own css, just make sure to use the classes Nitty uses

How do I use Nitty?

Using Nitty is pretty easy. Read up on the examples and explanations about the functions. Just click on what you want to know.

• Basic usage

  Making notifications is simple, use this function in your script. You can hover over a variable for more information.
  Nitty('message','type','timeout', 'forcedTarget', 'css','animation')
  
  Let's make a notification that stays two seconds on screen. We'll insert some HTML in there too. We don't really need to fill in the rest since Nitty handles everything automatically. Click to see it in action.
  Nitty("A nice notification <span uk-icon='icon: bolt'></span>", 'primary', '2000');
  
  Here's another example. This one just stays on screen until you manually close it. Let's turn it into a warning to give it an orange color. Click to see it in action.
  Nitty("A nice orange notification <span uk-icon='icon: paint-bucket'></span>", 'warning', '0');
  
  You can also close all the Nitts by using this command. Trigger some Nitts and click here.
  NittyForceAll();

• Using NittyForce('obj');

  Remember that forcedTarget variable? It gives your Nitt an attribute called Nitty to identify itself. We can (for now) use that to close a Nitt from another spot. We use this in our Cookie Notification.
  NittyForce('obj');
  
  Let's make a notification and name it closeMe. Follow the instructions on the Nitt. Click here to check it out.
  Nitty('Hello!', 'primary', '0', 'closeMe'); || <a onclick="NittyForce('closeMe');>"></a>
  
  

• All Nitty Functions.

  Hovering over a part of the function for some explanations. Unless stated, arguments are optional.
  Nitty('message','type','timeout', 'forcedTarget', 'css','animation')

NittyForce('obj');

NittyForceAll();

NittyLoadUIKit();

I want to improve Nitty!

Thanks!
I'm helpless when it comes to Javascript. I started working on this when I wanted to learn some Javascript so you can expect Nitty to be unoptimized.
You can find the Gist here. Leave me a comment there with improvements on Nitty.