Content

These core packages are provided in the Kolache library. Use `@import` to import them from `kolache/core/*`.

The core packages are still a work in progress. They are subject to change while in early development. I’m adding to this documentation as I build packages, so some may be documented here before the are published to npm.

Base styles

You should import a theme and the Kolache base partials as the first two things in your stylesheet:

@import "kolache/core/theme";
@import "kolache/core/base";

The theme partial sets all the necessary variables for use in the rest of your styles (including the base styles and Kolache packages). Other themes may be used as well as long as the set values for all the same variables.

The base partial sets some default styles such as headings, tables, and other element types.

Fonts

The default Kolache theme uses a native font stack. This is assigned to the $font-family variable:

$font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
  "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji",
  "Segoe UI Emoji", "Segoe UI Symbol" !default;

If you wish to use a different font, re-assign this variable prior to @importing the base styles partial.

This variable is then assigned to $font-family-heading, which is applied to <h1> through <h4> headings. Assign a different font stack to this variable if you want a different headings font.

Font Weights

Font weights are set by four variables. These are set by the theme and may be overridden either globally or in each package where they are referenced.

  • $font-weight-light
  • $font-weight-normal
  • $font-weight-bold
  • $font-weight-black

Not all fonts support light and black weights. In those instances, the browser will fall back to normal and bold weights, respectively.

Headings

Heading styles are applied to <h1> through <h6> elements. Corresponding class names can also be used when you need to match the style but want to use a different HTML element.

Markup Example
<h1></h1>
<p class="h1"></p>

Level One

<h2></h2>
<p class="h2"></p>

Level Two

<h3></h3>
<p class="h3"></p>

Level Three

<h4></h4>
<p class="h4"></p>

Level Four

<h5></h5>
<p class="h5"></p>

Level Five

<h6></h6>
<p class="h6"></p>

Level Six

Misc styles

Many other elements are cleaned up and minimally styled, so you can add to their styles however you like.

Lists

  • item 1
  • item 2
    • item 2.1
    • item 2.2
  • item 3
<ul>
  <li>…</li>
</ul>

  1. item 1
  2. item 2
    1. item 2.1
    2. item 2.2
      1. item 2.2.1
      2. item 2.2.2
  3. item 3
<ol>
  <li>…</li>
</ol>

Tables

This is a table caption
One Two Three
Table cell Table cell Table Cell
Table cell Table cell Table Cell
Table cell Table cell Table Cell
<table>
  <caption>…</caption>
  <thead>
    <tr>
      <th>…</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>…</td>
    </tr>
  </tbody>
</table>

Blockquotes

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam iaculis tortor massa, et dictum odio molestie vitae. Quisque pulvinar nisi posuere ornare volutpat. Donec bibendum mi vitae fermentum convallis. Morbi hendrerit tincidunt mauris in ullamcorper.
<blockquote>…</blockquote>