Koi Library

2sxc includes Koi - a helper library to let components / modules know what CSS framework is used, and use that information to create templates which adjust to that CSS framework.

Tip

2sxc has Polymorphism. It lets you place different editions of a Razor file in folders matching various CSS frameworks. This is easiest way to leverage Koi, and your code doesn't even need to know about it.

Discover More in the Koi Tutorials

We have an rich series of Koi tutorials. You should really check them out 👍.

Example

The following example will automatically include Bootstrap4 from a CDN if the theme doesn't already include it.

@if(!Kit.Koi.Is("bs4")) {
  <link rel="stylesheet" 
    href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" 
    integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" 
    crossorigin="anonymous">
}

Tip

For more examples, check out the tutorial or various Apps which implement Koi, like the main Content App.

Older Example (v12)

This does the same, but assumes that Kit doesn't exist yes, so we must use GetService<..>().

@{
  var pageCss = GetService<Connect.Koi.ICss>();
}
@if(!pageCss.Is("bs4")) {
  <link rel="stylesheet" 
    href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" 
    integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" 
    crossorigin="anonymous">
}

Old Example with Koi v1.0 (will only work in Dnn ☢️)

@using Connect.Koi;
@if(!Koi.Is("bs4")) {
  <link rel="stylesheet" 
    href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" 
    integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" 
    crossorigin="anonymous">
}

Learn to Leverage Koi

Visit Connect-Koi Website
Check out the Koi Tutorials
Install the default content-templates and discover how it's used there

History

Introduced in 2sxc v11
Upgrade to Koi 2.0 in 2sxc v12
Added to ServiceKit on Kit.Koi in 2sxc 14

Table of Contents