Add Custom Less Files

Appkit uses Less for generating it’s CSS files, and it’s easily extensible.

A nice way of keeping things clean is by using partial stylesheets. You can target these to specific pages if you want.

Including custom Less files

  1. Create a partials folder within your styles directory with your Less include:

      styles/
        modules/
        partials/          <-- add directory
          my-test.less     <-- add partials
        classic-settings.less
  2. Add a reference to the file to the end of classic-settings.less as an import under this import (to ensure it’s added at the end of the CSS file):

    @import "../twigkit/resources/style/settings";
    
    @import "partials/my-test.less";      <-- added import

    This file is compiled into the main twigkit.css file.

Targeting specific things using partial stylesheets

If you want more control, you can also always target your styles using a class or ID on any given page through the block:body; for example, for the addition of the ID of my-test:

<block:body response="response" id="my-test">

Then, in your custom Less file, do something like this:

#my-test {
    .tk-stl-title .value a {
        color: green;
    }
}

This targets the styling within the given page only via the ID on the body tag of #my-test. For example, only the links with a title of class .tk-stl-title on the page with body ID of #my-test will be <span style="color:green">green</span>.

This is useful, because you can be specific that the styles you apply aren’t affecting anything else.

This targeting analogy can be expanded from pages down to specific widgets, so you could even have a structure like partials/pages and partials/widgets and target specific things only, which gives you very precise control over things, and use multiple imports.