DNN Community Blog

The Community Blog is a personal opinion of community members and by no means the official standpoint of DNN Corp or DNN Platform. This is a place to express personal thoughts about DNNPlatform, the community and its ecosystem. Do you have useful information that you would like to share with the DNN Community in a featured article or blog? If so, please contact .

The use of the Community Blog is covered by our Community Blog Guidelines - please read before commenting or posting.


Supporting Many CSS Frameworks in Components using Connect.Koi

Creators of DNN Modules or 2sxc Apps want them to look great immediately. This requires the rendered output to match the Theme look-and feel. Previously, this was impossible, but not any more. Welcome Connect.Koi - harmony across css frameworks.

Goal: Perfect HTML for any CSS Framework

Let's start by looking at what we really want: When an editor adds a component to the page (a DNN module or 2sxc Content Block or a 2sxc App) this component should look great right away, and it should use the CSS framework which the skin is also using - like this: 

Here's what should happen:

  1. The Theme / Skin should "broadcast" which framework it uses
  2. The Component templates should ask for this...
  3. ...and render the correct HTML based on the setting
  4. Ideally, there are helper commands to switch between output variations

Themes/Skins broadcast their preferred CSS Framework

Skin/theme must simply add a koi.json file to the skin folder containing the information needed - that's all there is to it:

    koi.json file in the theme (skin) folder

    {
      "default": "bs3"
    }

    What's really great is that you can include koi.json in your skin-package without any side-effects, even if Koi isn't installed. We've built Koi in such a way that it will automatically pick up this file, assume "unk" (meaning unknown) if the file is missing. Here's the full documantion and additional koi.json template files.

    Component Adjust their Output based on the CSS Framework

    Connect.Koi offers a simple API to get things done - here's the full API docs. You'll find commands like:

    1. Koi.Css - giving you the string-code of the current framework
    2. Koi.If(...) to pick between values depending on the current framework
    3. Koi.IfUnknown(...) to show something like a css-include if the framework isn't known
    4. Koi.Class(...) to generate class-attributes in tags, like <div @Koi.Class("bs3='row' fnd6='fnd-row'")>

    ...and more. The full API is documented here.

    How the Output Changes

    To deliver the correct HTML, the views/templates will usually want to adapt...

    • include files to load (containing alternate CSS rules) - for this you'll use @Koi.If or your own syntax
    • the css-class names in the html itself - usually using @Koi.Class
    • in rare cases, the HTML structure must also vary - so just use @if(Koi.Css == ...)

    Some Examples

    Let's assume the following results are expected, depending on the framework the skin communicates: 

      Some HTML in Bootstrap 3

      <link rel="stylesheet" href="@App.Path/dist/styles.css" data-enableoptimizations="true" />
      <div class="ga-wrapper">
        <div class="ga-albums row">
          @foreach (var album in AsDynamic(Data["Default"]))
          {
            <div class="ga-album sc-element col-xs-6 col-sm-4 col-md-4 col-lg-4">
               ...
            </div>
          }
        </div>
      </div>

        The same HTML in Bootstrap 4

        <link rel="stylesheet" href="@App.Path/dist/styles.css" data-enableoptimizations="true" />
        <div class="ga-wrapper">
          <div class="ga-albums row4"> <!-- changed -->
            @foreach (var album in AsDynamic(Data["Default"]))
            {
              <div class="ga-album sc-element bs4-stuff"> <!-- changed -->
                 ...
              </div>
            }
          </div>
        </div>

          The same HTML with an unknown Framework

          <!-- also include BS3, as no framework is known -->
          <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
          
          <link rel="stylesheet" href="@App.Path/dist/styles.css" data-enableoptimizations="true" />
          <div class="ga-wrapper">
            <div class="ga-albums row"> <!-- like BS3, because we now include BS3 -->
              @foreach (var album in AsDynamic(Data["Default"]))
              {
                <div class="ga-album col-xs-6 col-sm-4 col-md-4 col-lg-4"> <!-- like BS3 -->
                   ...
                </div>
              }
            </div>
          </div>

          A thing to note is that there will be some parts (often classes) which all frameworks use (in this case the ga-wrapper and ga-albums) and other classes which change. Here's how the Razor API could support this in an easy syntax:

            How the generic view could be coded

            @using Connect.Koi;
            
            <!-- optionally include BS3 CSS if it's not known to exist -->
            @Koi.IfUnknown("<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css'>")
            
            <link rel="stylesheet" href="@App.Path/dist/styles.css" data-enableoptimizations="true" />
            <div class="ga-wrapper">
            
              <div @Koi.Class("all='ga-albums' bs3,unk='row' bs4='row4'")> <!-- 3 rules -->
            
                @foreach (var album in AsDynamic(Data["Default"]))
                {
                  <div @Koi.Class("all='ga-album sc-element' bs3,unk='col-xs-6 col-sm-4 col-md-4 col-lg-4' bs4='col-xs-6 col-sm-4 col-md-4 col-lg-4'")> 
                     ...
                  </div>
                }
              </div>
            </div>

            This example provides a simple helper command @Koi.Class(...) which takes a string determining which classes to apply in which framework. 

            Notes:

            • If you don't like the Koi.Class syntax, you can create your own - this is just our first recommendation after trying many options
            • there is a special key for unknown, which we called unk
            • and to reduce duplicate entries, you can use multiple keys together, like x,y,z=classes

            Koi also works in AJAX mode

            We've enhanced Koi, so controls rendered using AJAX can still query what skin they are using, and what variation should be used :). This is especially useful for modern solutions like 2sxc, which provide AJAX editing of content. 

            Download, Play, Contribute

            Love from Switzerland,
            Daniel, Raphael, Tom & Luca
            (the Koi-Team)


            Daniel Mettler grew up in the jungles of Indonesia and is founder and CEO of 2sic internet solutions in Switzerland and Liechtenstein, an 20-head web specialist with over 800 DNN projects since 1999. He is also chief architect of 2sxc (see github), an open source module for creating attractive content and DNN Apps.



            Read more posts by Daniel Mettler

            Comments

            There are currently no comments, be the first to post one.

            Comment Form

            Only registered users may post comments.

            NewsArchives


            Aderson Oliveira (17)
            Alec Whittington (11)
            Alex Shirley (10)
            Andrew Hoefling (2)
            Andrew Nurse (30)
            Andy Tryba (1)
            Anthony Glenwright (5)
            Antonio Chagoury (28)
            Ash Prasad (35)
            Ben Schmidt (1)
            Benjamin Hermann (25)
            Benoit Sarton (9)
            Beth Firebaugh (12)
            Bill Walker (36)
            Bob Kruger (5)
            Bogdan Litescu (1)
            Brian Dukes (2)
            Brice Snow (1)
            Bruce Chapman (20)
            Bryan Andrews (1)
            cathal connolly (55)
            Charles Nurse (163)
            Chris Hammond (211)
            Chris Paterra (55)
            Clinton Patterson (67)
            Cuong Dang (21)
            Daniel Bartholomew (2)
            Daniel Mettler (162)
            Daniel Valadas (1)
            Dave Buckner (2)
            David Poindexter (8)
            David Rodriguez (3)
            Dennis Shiao (1)
            Doug Howell (11)
            Erik van Ballegoij (30)
            Ernst Peter Tamminga (75)
            Francisco Perez Andres (4)
            Geoff Barlow (12)
            George Alatrash (12)
            Gifford Watkins (3)
            Gilles Le Pigocher (3)
            Ian Robinson (7)
            Israel Martinez (17)
            Jan Blomquist (2)
            Jan Jonas (3)
            Jaspreet Bhatia (1)
            Jenni Merrifield (6)
            Joe Brinkman (274)
            John Mitchell (1)
            Jon Henning (14)
            Jonathan Sheely (4)
            Jordan Coopersmith (1)
            Joseph Craig (2)
            Kan Ma (1)
            Keivan Beigi (3)
            Kelly Ford (2)
            Ken Grierson (10)
            Kevin Schreiner (6)
            Leigh Pointer (31)
            Lorraine Young (60)
            Malik Khan (1)
            Matthias Schlomann (15)
            Mauricio Márquez (5)
            Michael Doxsey (7)
            Michael Tobisch (3)
            Michael Washington (202)
            Miguel Gatmaytan (3)
            Mike Horton (19)
            Mitchel Sellers (29)
            Nathan Rover (3)
            Navin V Nagiah (14)
            Néstor Sánchez (31)
            Nik Kalyani (14)
            Peter Donker (54)
            Philip Beadle (135)
            Philipp Becker (4)
            Richard Dumas (22)
            Robert J Collins (5)
            Roger Selwyn (8)
            Ruben Lopez (1)
            Ryan Martinez (1)
            Sacha Trauwaen (1)
            Salar Golestanian (4)
            Sanjay Mehrotra (9)
            Scott McCulloch (1)
            Scott S (11)
            Scott Wilkinson (3)
            Scott Willhite (97)
            Sebastian Leupold (80)
            Shaun Walker (237)
            Shawn Mehaffie (17)
            Stefan Cullmann (12)
            Stefan Kamphuis (12)
            Steve Fabian (31)
            Steven Fisher (1)
            Timo Breumelhof (24)
            Tony Henrich (3)
            Torsten Weggen (2)
            Vicenç Masanas (27)
            Vincent Nguyen (3)
            Vitaly Kozadayev (6)
            Will Morgenweck (40)
            Will Strohl (165)
            William Severance (5)

            Content Layout

            Subscribe to DNN Digest

            Subscribe to DNN Digest

            DNN Digest is our monthly email newsletter. It highlights news and content from around the DNN ecosystem, such as new modules and themes, messages from leadership, blog posts and notable tweets. Keep your finger on the pulse of the ecosystem by subscribing.  


            Copyright 2018 by DNN Corp Terms of Use Privacy
            What is Liquid Content?
            Find Out
            What is Liquid Content?
            Find Out
            What is Liquid Content?
            Find Out