Using Twitter Bootstrap with KRL

2011-11-20T21:38:00.001-07:00

Twitter recently released Bootstrap, a library of CSS styles and set of javascript plugins to kickstart development of webapps and sites. I have found it to be a real time saver when building prototypes with KRL. Since Bootstrap uses jQuery it was easy to enhance the code to work with Kynetx KRL. I have updated the Bootstrap demo pages to use the embedded version of jQuery in KRL. The updated demo includes links to the updated javascript files that can be used with KRL.

View Demo Online Download Source Code

To use the embedded version of jQuery within KRL change the last like in each Bootstrap plugin from:

}( window.jQuery || window.ender );

}( window.$KOBJ );

We are 90% done! The remainder of the effort is to move Javascript includes from the HTML file to the KRL webapp with use javascript resource.

View Demo Online Download Source Code

CSS Inception with Kynetx

2011-10-25T23:22:00.000-06:00

While developing an administrative interface for a web application I only wanted to load the CSS stylesheet for the administrative view when it was needed. KRL provides the ability to define CSS in the global section and load external CSS files. However, both methods insert the CSS into the page every time the Ruleset is evaluated. I really did not want to load hundreds of lines of useless CSS into every page.

View Demo Online Download Source Code

My solution was to harvest the load external stylesheet code from the KRL runtime and wrap it in a defaction.

loadStylesheet = defaction(cssURL) {
  loadCode = <<
    var head=document.getElementsByTagName('head')[0];
    var new_style_sheet=document.createElement("link");
    new_style_sheet.href="#{cssURL}";
    new_style_sheet.rel="stylesheet";
    new_style_sheet.type="text/css";
    head.appendChild(new_style_sheet);
  >>;
  emit << eval(loadCode);  >>;
};

Now I can load external stylesheets programatically:

rule inject_css {
  select when click "#ignite"
  {
    loadStylesheet("http://assets.lobosllc.com/css/inception.css");
  }
}

View Demo Online Download Source Code

edoism

Using Twitter Bootstrap with KRL

CSS Inception with Kynetx