Skip to main content
Home  › ... 2sxc Apps

Koi Tutorials

Tutorial Home
#1 Introduction - Koi - Cool things with CSS-Frameworks and Classes

Learn how to use Connect.Koi to ensure your module/temlate has the right CSS frameworks, to either auto-include otherwise, show messages to the admin or generate different output. This uses Connect.Koi.

Some notes before we start

Koi works like magic behind the scenes, ensuring that your component knows what CSS-framework is already included, and can adapt its behavior.

For this to work, the theme must communicate what framework it's using, by including a koi.json file as explained in the docs. This is included in the default DNN themes since DNN 9.2, as well as in Bootstrap Instant, nvQuickTheme and many other.

Some themes may not include that file, so your best bet is to always have something which either alerts the user, that this is missing, or automatically adds your framework, if it can't detect what's happening.


Koi Examples

  1. Koi - Auto-Add Bootstrap4 if missing
    Automatically add the Bootstrap4 CSS package from a CDN, if the current theme does not include Bootstrap4 already, but skip it if it's already included.
  2. Koi - Auto-Add Bootstrap4 but inform Admin
    Automatically add the Bootstrap4 CSS package from a CDN (same as above), but also show a warning to admins that this happened.
  3. Koi - Switch between template files new!
    Automatically switch between Bootstrap3 and Bootstrap4 templates.

More Information around Connect.Koi

  1. Connect.Koi website
  2. Connect.Koi Github Repo
  3. Blogs