In most situations this isn't even necessary, but if you want to know what framework is currently used, just ask for
Koi.Css : string - current CSS framework
Koi.Css. For example to debug: This will show
Sometimes you need the CSS framework code - if it's one of the frameworks you support. Here's an example: Your component has css-files for bootstrap3 and 4, and foundation 6. And your strategy is to include the Bootstrap3 version if neither of these matches. The easiest way to do this is using
Koi.PickCss(string list[, string fallback]) : string - CSS framework if in list
@Koi.PickCss("bs3,bs4,fnd6", "bs3")which will return either the code "bs3", "bs4", "fnd6" if it's one of those, or "bs3" if it's another or an unknown framework. For example: Note that this requires Connect.Koi version 1.01
If the skin doesn't publish what it has, then
Koi.IsUnknown : bool - detect an unknown / undefined framework
unkfor unknown. But in most cases, you'll actually have something in mind - so the most common commands will be: This will show unknown or it's known! depending on the situation. But there's more.
General Html API
@Koi.If(key, trueString [, falseString]) : HtmlString - choose a value
@Koi.Ifto return a value (or an alternative): Note that you won't use this a lot, because of more helpers - read on.
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:
@Koi.IfUnknown(trueString [, falseString]) : HtmlString - output if not known
API to create
Manually Coding the a Class Attribute (not recommended)This manual way is included for those wanting more control - later on I'll show the most efficient way to do the same.
Now here's the probably easiest way to build such a class attribute:
This does the same as above, basically containing the rules like:
@Koi.Class(stringFormula) : HtmlString (recommended)
allframeworks get the class ga-albums
- bootstrap 3
bs3will also get row added
- bootstrap 4
bs4will get row4 added
- in case the framework is unknown
unk, it'll do the same thing as bootstrap 3
Further down you'll see exactly what the syntax looks like.
The keys in
Whenever you check for keys - like
@Koi.If("bs3", "it's bs3", "it's not bs3")the command supports multiple keys. So you can write the following:
The formula used in
The QuickFormula is what you'll use most, whenever you use
@Koi.Class(...). Here some basic examples:
bs3='row-m color5' bs4='row-xs color5'
all='color5' bs3='row' bs4='row-xs'
all='color5' bs3,bs4,unk='row' fnd6='fd-xyz'
all='color5' bs3,bs4,unk='row' bs3='xyz' bs4='abc' fnd6='fd-xyz'new multi-key support in v1.2
- the formula can contain many parts
- each part has the pattern keys='values'
- keys can be one or more css-framework names, so
bs3is valid, as well as
- you can also use the keys
allfor parts which should always be included
unkin case the framework is unknown, because the theme doesn't publish the css-framework it uses