Styling

There are a few ways to include a style in your skribi.

1: If you have a .css file in your templates directory, you can load it in your skribi with sk.includeStyle(style) where style is a string matching the filename of your .css file. Styles loaded in this way are not processed by Eta. You can also get the style snippet as text with sk.getStyle(style).

Styles loaded with sk.includeStyle() will cause the skribi to reload whenever the .css file is modified, just like it would if its template file was modified.

2: Creating a <style> element directly in the skribi as you would create any other element. Currently, only the first style element will be processed. You can then use Eta syntax inside of the style element.

3: To load any text as a stylesheet, use sk.child.addStyle(text). text should be parsable CSS.

Scoping

The rules defined by a skribi style element will apply only to the skribi element, which makes styling your components easy. If you want to add a global stylesheet, you can of course still use JS to do so.

When created through one of these methods, each style rule is automatically constrained. To see the rendered style, inspect the style element in the elements panel. The keyword :scope is replaced with the constraint selector, so you can target the skribi element body with :scope { ... }.