You’ve read the Zurb 6 plugin introduction. You’ve read the documentation. You want to develop your own plugin, but you still have questions or want to see a working plugin example. This article demonstrates a working Zurb
blink tag plugin. Remember these from the old Netscape days? It’s nothing elaborate, but hopefully it will help get you started. You can jump right to the working example or follow along below.
This example is using the generated version of Foundation. Which means that it’s not using Sass nor transpiled ES5 via Babel. Thus, it won’t work with IE or older Android browsers until you incorporate the plugin into your Foundation build pipeline (check ES6 classes compatibility). I’ve personally tested the
Blink plugin with the latest and greatest versions of Firefox, Chrome, and Edge. Zero issues found. However, if you find any, please let me know by leaving a comment below.
Below is the vanilla HTML markup.
Blink plugin. The
data-interval attribute overrides the default option value of 500. It’s used for the blink visible/invisible rate. This data attribute usage is consistent throughout the framework; the
Blink plugin follows along with the pattern. No need to implement
data-options differently, which could lead to confusion.
And yes, you can place multiple
Blink components on the same page (see working example) similar to having multiple
Using your browser’s F12 Dev tools, you can see that you now have access to the
interval option. When “connecting the object dots”, it flows and feels like the other plugins and components built into the framework.
And, similarly you can call the
Blink plugin methods too.
In the working example, I added two buttons to handle
click events and call the appropriate method.
If you are creating the
Blink plugin programmatically, you can invoke the methods directly too.
Hopefully this article helped you get to a starting point to begin creating Zurb plugins. Please leave a comment or question below. Or maybe you would like to see another example with additional features like
Keyboard, or responsiveness? Let me know. Go Zurb!