Oqtane Tutorials

Koi Tutorials

Tutorial Home › Koi

Introduction - Koi - Cool things with CSS-Frameworks and Classes

#2 Koi - Auto-Add Bootstrap5 if missing

Koi - Auto-Add Bootstrap5 but inform Admin

Requirements

2sxc 12.08

Resources

PageService

Auto-Include Bootstrap5 If Not Already Included

In this example, we'll assume your template needs Bootstrap5 as the preferred CSS framework. Note that this works for other frameworks as well, with minor modifications. But if it's used on any page, you may have one of the following situations:

Bootstrap5 could already be included - so you shouldn't do anything
A different CSS framework is included - so you should include Bootstrap5 automatically
The current CSS framework can't be detected, so to be safe, you should include Bootstrap 5 as well, until the theme is updated to broadcast what it's using

This page shows how to handle these problems with almost no code. Note that we've place the code in a separate file and use a helper to achieve this, as this allows us to re-use the code in multiple templates.
BTW: to see that this works, try switching the theme of this page to one without a koi.json or one with a different css-framework.

Output

The result is invisible.

@{  
  var bsCheck = CreateInstance("../shared/Bootstrap5.cs");  
  bsCheck.EnsureBootstrap5();
}

Source Code of ../shared/Bootstrap5.csusing ToSic.Razor.Blade;

public class Bootstrap5 : Custom.Hybrid.Code14
{
  // if the theme framework is not BS4, just activate/load it from the WebResources
  // this solves both the cases where its unknown, or another framework
  public void EnsureBootstrap5()
  {
    if (Kit.Css.IsUnknown) {
      Kit.Page.Activate("Bootstrap5");
    }
  }

  // show warning for admin if koi.json is missing
  public dynamic WarnAboutMissingOrUnknownBootstrap() {
    if (Kit.Css.IsUnknown && CmsContext.User.IsSiteAdmin) {
      return Tag.Div().Class("alert alert-warning").Wrap(
        Connect.Koi.Messages.CssInformationMissing,
        Tag.Br(),
        Connect.Koi.Messages.OnlyAdminsSeeThis
      );
    }
    return null;
  }
}

Introduction - Koi - Cool things with CSS-Frameworks and Classes

#2 Koi - Auto-Add Bootstrap5 if missing

Koi - Auto-Add Bootstrap5 but inform Admin

Source Code of this file

Below you'll see the source code of the file. Note that we're just showing the main part, and hiding some parts of the file which are not relevant for understanding the essentials. Click to expand the code

@inherits Custom.Hybrid.Razor14
<!-- unimportant stuff, hidden -->


<div @Sys.PageParts.InfoWrapper()>
  @Html.Partial("../shared/DefaultInfoSection.cshtml")
  <div @Sys.PageParts.InfoIntro()>
    <div class="row">
      <div class="col-lg-8">
        <h2>Auto-Include Bootstrap5 If Not Already Included</h2>
        <p>
          In this example, we'll assume your template needs <a href="https://getbootstrap.com/" target="_blank">Bootstrap5</a> as the preferred CSS framework. Note that this works for other frameworks as well, with minor modifications. But if it's used on any page, you may have one of the following situations: 
        </p>
        <ul>
          <li>Bootstrap5 could already be included - so you shouldn't do anything</li>
          <li>A different CSS framework is included - so you should include Bootstrap5 automatically</li>
          <li>The current CSS framework can't be detected, so to be safe, you should include Bootstrap 5 as well, until the theme is updated to broadcast what it's using</li>
        </ul>
        <p>
          This page shows how to handle these problems with almost no code. Note that we've place the code in a separate file and use a helper to achieve this, as this allows us to re-use the code in multiple templates. <br>
          <em>BTW: to see that this works, try switching the theme of this page to one without a <code>koi.json</code> or one with a different css-framework.</em>
        </p>
      </div>
      <div class="col-lg-4">
        <img loading="lazy" src="@App.Path/koi/assets/koi.png?w=200">
      </div>
    </div>
  </div>
</div>

  @{  
    var bsCheck = CreateInstance("../shared/Bootstrap5.cs");  
    bsCheck.EnsureBootstrap5();
  }



@* Footer *@
@Html.Partial("../Shared/Layout/FooterWithSource.cshtml", new { Sys = Sys })