Home

Connect.Koi

Koi is a solution for CMS components to dynamically adjust their output to the CSS-Framework of the current page. In other words, a component can ask the page "what CSS framwork are you using?" and based on that vary the output accordingly.

It is built with all .net CMS-Solutions (or stores etc.) in mind. The current release includes an implementation for DNN 7 to 9, but it can easily ported to any other .net CMS/store, even if it runs on .net core.

Installing Connect.Koi on DNN 7 to 9

You can find the latest installable ZIP in the releases section of this github project. Install it as you would any DNN extension.

Enhance a DNN Skin/Theme with Koi

Any DNN-Skin/Theme can support Koi, even without installing the extension. You only need a koi.json configuration file in the skin/theme folder. As this has no side-effects, we urge all skin/theme makers to include the appropriate koi.json.

more...

This is what the sample koi.json looks like

{
    "instructions": {
        "purpose": "This file is placed in the folder of DNN skins/themes. It tells the Koi system, what the primary CSS framework is for the themes in this folder.",
        "discoverMore": "https://github.com/DNN-Connect/connect.koi"
    },
  "default": {
    "cssFramework": "bs3"
  }
}

For a list of standardized CSS Framework names, read on...

Customizing Look and Styles of a Component in DNN/DotNetNuke 7-9

Determining the current CSS Framework

In most situations this isn't even necessary, but if you want to know what framework is currently used, just ask for Koi.Css. Here's a trivial example in a razor file:

@using Connect.Koi;
<span>Currently using the @Koi.Css framework</span>

This will show

<span>Currently using the bs3 framework</span>

You can now use this in your code, like in switch(Koi.Css) {...} or if statements. There are more helpers, like this one:

@using Connect.Koi;
<span>Bootstrap3 status is @Koi.If("bs3", "true", "false")</span>

Note that you won't use this a lot, because of more helpers - read on.

Detecting an Unknown / Undefined Framework

If the skin doesn't publish what it has, then Koi.Css will return unk for unknown. But in most cases, you'll actually have something in mind - so the most common commands will be:

@using Connect.Koi;
<span>@(Koi.IsUnknown ? "unknown" : "it's known!")</span>

This will show unknown or it's known! depending on the situation. But there's more. This syntax is used to explicitly insert something if we have an unknown framework - for example, to include Bootstrap3 if we just don't know what's included:

@using Connect.Koi;
@Koi.IfUnknown("<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css'>")

Manually Coding the a Class Attribute

This manual way is included for those wanting more control - later on I'll show the most efficient way to do the same:

@using Connect.Koi;
@{
  var mainDivClass = "ga-albums";
  var innerDivClass = "ga-album sc-element";
  switch(Koi.Css) {
    case "bs3":
      mainDivClass += "row";
      innerDivClass += "col-xs-6 col-sm-4 col-md-4 col-lg-4";
      break;
    case "bs4":
      mainDivClass += "row4";
      innerDivClass += "col-xs-6 col-sm-4 col-md-4 col-lg-4";
      break;
    default: // unknown or any other one
      mainDivClass = "row";
      innerDivClass += "col-xs-6 col-sm-4 col-md-4 col-lg-4";
  }
}
<div class="@mainDivClass")>
  @foreach (var album in AsDynamic(Data["Default"]))
  {
    <div class="@innerDivClass">
        ...
    </div>
  }
</div>

Automatically / Quickly Create a Class Attribute

Now here's the probably easiest way to build such a class attribute:

<div @Koi.Class("all='ga-albums' bs3,unk='row' bs4='row4'")>
</div>

This does the same as above, basically containing the rules like:

1. all frameworks get the class ga-albums
2. bootstrap 3 will also get row added
3. bootstrap 4 will get row4 added
4. in case the framework isn't known, it'll do the same thing as bootstrap 3