Use Less Mixins for Base Styles

Base.less includes five default color variables (@text-color, @link-color, @visited-link-color, @active-link-color, @body-bg-color) and two mixins that apply a handful of underlying styles that are needed for other mixin styles to appear correctly. The .reset() mixin applies a basic CSS reset. The .typography() mixin applies basic typography. Both mixins are intended to be applied to the body element.

Because these base styles are provided as mixins, the developer has full control over the CSS selectors used to apply these base styles, ensuring that no Appkit CSS rules unintentionally affect any non-Appkit pages of the application.

Color Variables

Five color variables are set by default and are referenced throughout Appkit mixins. The include variables for the body text color; normal, visited, and active link text color; and the body background color. These can be overridden in client stylesheets such as theme.less.

@text-color
The color for normal text.
Default: #000

@link-color
The color for normal links.
Default: hsl(@primary-hue,60%,30%)

@visited-link-color
The color for visited link
Default: desaturate(@link-color,10%).

@active-link-color
The color of normal text. Default: spin(@link-color,180)

@body-bg-color
The background color intended for the body element or other container.
Default: white

Reset

Applies a basic CSS reset.

.reset()
This mixin doesn`t accept any parameters.

Apply the .reset() mixin to the highest-level element possible, usually the body element.

body.twigkit {
    .reset();
}

The Less rule above would compile to:

body.twigkit { margin: 0; padding: 0; }
body.twigkit * { margin: 0; padding: 0; }
body.twigkit a img { border: none; }
body.twigkit fieldset { border: 0; }
body.twigkit li { list-style: none outside none; }
body.twigkit nav, body.twigkit aside, body.twigkit header, body.twigkit article, body.twigkit section, body.twigkit footer { display: block; }

Typography

Applies basic font family, font size, line height, link colors, boldface for hit highlighting, and background color styles.

.typography() This mixin doesn’t accept any parameters.

Apply the .typography() mixin to the highest-level element possible, usually the body element if Appkit is powering the entire page. In situations when Appkit is only driving a portion of the page (such as the main column, but not the header or sidebar, for example), apply the mixin to the main column container instead.

body.twigkit {
    .typography();
}

The above rule would output this Less:

body.twigkit {

    // Basic typography, background color, clearfix
    font: 0.85em/1.5em @font-stack;
    background-color: @body-bg-color;
    .clearfix;

    // Links
    a {
        color: @link-color;

        &:active {
            color: @active-link-color;
        }
        &:visited {
            color: @visited-link-color;
        }
    }

    // Hit highlighting
    li.result em {
        font-style: normal;
        font-weight: bold;
    }
}

// Icon font
@font-face {
    font-family: 'twigkit';
    src: url('../fonts/twigkit.eot');
    src: url('../fonts/twigkit.eot?#iefix') format('embedded-opentype'),
        url('../fonts/twigkit.woff') format('woff'),
        url('../fonts/twigkit.ttf') format('truetype'),
        url('../fonts/twigkit.svg#twigkit') format('svg');
    font-weight: normal; font-style: normal;
}