Documentation

This is your reference manual on how to install and perform updates to your theme.

Getting started

Welcome to our documentation. Find anything from how to install your theme to learning more about our custom framework.

Install

  1. Download "Plainkit" from the official guide, extract the ZIP and add all files and folders to your server.
  2. Extract the theme ZIP and replace the assets and content folders inside the Kirby installation.
  3. Now, navigate to /site and replace the following folders:
    • blueprints
    • config
    • snippets
    • templates
  4. That's it! Visit the Panel at yourdomain.com/panel to get started.

Updates

Always backup your site before updating your theme.

  1. Download the latest version of your theme and extract the Zip.
  2. On your server, navigate to /assets and replace the build folder.
  3. Now, navigate to /site and replace the following folders:
    • blueprints
    • snippets
    • templates
  4. Finally, inside the /site/config folder, replace the config.php file.
  5. That's it, your theme is now up to date!

Curious?

You can learn more about our custom framework below. The code doesn’t rely on any third-party framework, everything is neatly organized and has been coded from scratch.

Classes

There are some core classes that defines the layout and design. They are global and not bound to any specific module.

Alignment Description
.align-center Add this class to center content.
.align-center--md Center content on tablets and mobile devices.
.align-center--sm Center content on mobile devices only.
.align-left Add this class to align content to the left.
.align-right Add this class to align content to the right.
.align-middle Align content vertically when height is unknown.
Backgrounds Description
.bg-color-gray-light Light gray background.
.bg-color-gray-medium Medium gray background.
.bg-color-gray-dark Dark gray background.
.bg-color-dark Dark background.
.bg-color-primary Primary background.
.bg-color-white White background.
.bg-gradient-light Light gray gradient background.
.bg-gradient-dark Dark gradient background.
.bg-overlay-color-light Adds a light overlay with opacity on top of image-based backgrounds.
.bg-overlay-color-dark Adds a dark overlay with opacity on top of image-based backgrounds.
.bg-overlay-gradient-light Adds a light gradient overlay with opacity on top of image-based backgrounds.
.bg-overlay-gradient-dark Adds a dark gradient overlay with opacity on top of image-based backgrounds.
Font Weight Description
.font-regular Defines normal characters.
.font-bold Defines thick characters.
.font-black Defines thicker characters.
Full Width Description
.full-screen Adding this class will make sure the module goes full screen.
.full-width This class will make sure the element goes full width.
.full-width--md Useful if you'd like an element to go full width on tablets and mobile devices.
.full-width--sm Useful if you'd like an element to go full width only on mobile.
Max Width Description
.max-width-sm Set a small maximum width of an element.
.max-width-md Set a medium maximum width of an element.
.max-width-lg Set a large maximum width of an element.
Min Width Description
.min-width-sm Set a small minimum width of an element.
.min-width-md Set a medium minimum width of an element.
.min-width-lg Set a large minimum width of an element.
Rounded Corners Description
.rounded Adds a border radius to an element.
.rounded-bottom Adds a border radius to the bottom of an element.
.rounded-left Adds a border radius to the left of an element.
.rounded-right Adds a border radius to the right of an element.
.rounded-top Adds a border radius to the top of an element.
Shadows Description
.shadow-sm Add a small amount of shadow to an element.
.shadow-md Add a medium amount of shadow to an element.
.shadow-lg Add a large amount of shadow to an element.
.shadow-none Remove all shadows from an element.
Padding Description
.padding Add padding around an element.
.padding-bottom Add padding below an element.
.padding-top Add padding above an element.
.padding-none Remove padding around an element.
.padding-bottom-none Remove padding below an element.
.padding-left-none Remove padding to the left of an element.
.padding-right-none Remove padding to the right of an element.
.padding-top-none Remove padding above an element.
Spacing Description
.space Add main space around an element.
.space-bottom Add main space below an element.
.space-top Add main space above an element.
.space-1x, 2x or 3x Add space around an element.
.space-bottom-1x, 2x or 3x Add space below an element.
.space-left-1x, 2x or 3x Add space to the left of an element.
.space-right-1x, 2x or 3x Add space to the right of an element.
.space-top-1x, 2x or 3x Add space above an element.
.space-none Remove space around an element.
.space-bottom-none Remove space below an element.
.space-left-none Remove space to the left of an element.
.space-right-none Remove space to the right of an element.
.space-top-none Remove space above an element.

Grid

Use our simple grid to build powerful layouts. You can test various combinations here.

<div class="row">
  <div class="col-1-2"></div>
  <div class="col-1-2"></div>
</div>
<div class="row">
  <div class="col-1-3"></div>
  <div class="col-1-3"></div>
  <div class="col-1-3"></div>
</div>
<div class="row">
  <div class="col-1-4"></div>
  <div class="col-1-4"></div>
  <div class="col-1-4"></div>
  <div class="col-1-4"></div>
</div>
<div class="row">
  <div class="col-1-5"></div>
  <div class="col-1-5"></div>
  <div class="col-1-5"></div>
  <div class="col-1-5"></div>
  <div class="col-1-5"></div>
</div>

You can also have unequal columns.

<div class="row">
  <div class="col-2-3"></div>
  <div class="col-1-3"></div>
</div>

Below are some options you can add to your grid.

Options Description
.row-fill-empty-columns Columns are divided equally to fill the remaining space of a row that is not filled.
.row-keep-proportions Rows will always keep the same number of columns.
.row-min-two-columns The minimum number of columns on any device is two.
.row-one-column--md No matter what, columns will go full width on tablets and mobile devices.
.row-one-column--sm No matter what, columns will go full width on mobile devices.
.row-reverse Columns are reversed when transitioning to one column.
.row-gutter-lg Increase the space around and between columns.
.row-gutter-sm Reduce the space around and between columns.
.row-gutter-none Remove all space around and between columns.

Typography

Listed below are all default styles for headings.

Class Heading
.title-hero

Hero

h1 or .title-h1

Heading 1

h2 or .title-h2

Heading 2

h3 or .title-h3

Heading 3

h4 or .title-h4

Heading 4

h5 or .title-h5
Heading 5
h6 or .title-h6
Heading 6

Lead

The main purpose of the lead style is to support headings as a subtitle.

<p class="lead"></p>

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Paragraph

With an increased font-size and line-height, the paragraph style is great for readability.

<p class="paragraph"></p>

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

"Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.

Lists

Below is the default style for unordered and ordered lists.

  • List item one
  • List item two
  • List item three
  1. List item one
  2. List item two
  3. List item three

You can also add class "list-inline" to make horizontal lists.

Buttons

Buttons are divided into types: primary, secondary and other states such as disabled.

<a href="#" class="button button-style-primary" role="button">Primary</a>
<a href="#" class="button button-style-secondary" role="button">Secondary</a>
<a href="#" class="button button-style-disabled" role="button">Disabled</a>

To change the size, you can add class "button-size-lg" for a large button. There are four pre-defined sizes: large, default, medium and small.

Forms

Input fields are divided into types and states. Below code will create two columns with a label to the left and an input to the right.

<form>

  <!-- Input -->

  <div class="form-group">
    <label for="name">Your Name:</label>
    <input id="name" type="text" name="name">
  </div>

  <!-- Select input -->

  <div class="form-group">
    <label for="country">Country:</label>
    <div class="select-wrapper">
      <select id="country" name="country">
        <option selected="" disabled="" value="">Choose country…</option>
        <option value="AT">Austria</option>
        <option value="BE">Belgium</option>
      </select>
    </div>
  </div>

  <!-- Textarea -->

  <div class="form-group">
    <label for="message">Message:</label>
    <textarea id="message" name="message"></textarea>
    <span class="form-help">500 characters max.</span>
  </div>

  <!-- Switch -->

  <div class="form-group">
    <label>Switch:</label>
    <input id="s1" class="switch" type="checkbox" value="true" checked>
    <label for="s1" class="switch"></label>
  </div>

  <!-- Checkboxes -->

  <div class="form-group">
    <label>Checkboxes:</label>
    <input id="c1" type="checkbox" name="item-one" value="item-one" checked>
    <label for="c1" class="checkbox">Item one</label>
    <input id="c2" type="checkbox" name="item-two" value="item-two">
    <label for="c2" class="checkbox">Item two</label>
    <input id="c3" type="checkbox" name="item-three" value="item-three">
    <label for="c3" class="checkbox">Item three</label>
  </div>

  <!-- Radio Buttons -->

  <div class="form-group">
    <label>Radio Buttons:</label>
    <input id="r1" type="radio" name="item" value="item-one" checked>
    <label for="r1" class="radio">Item one</label>
    <input id="r2" type="radio" name="item" value="item-two">
    <label for="r2" class="radio">Item two</label>
    <input id="r3" type="radio" name="item" value="item-three">
    <label for="r3" class="radio">Item three</label>
  </div>

</form>
500 characters max.

Alerts

Use alerts to give users quick feedback on performed tasks.

<div class="alert alert-default" role="alert">Not important, just to let you know.</div>
<div class="alert alert-negative" role="alert">Oh no! Something went wrong :(</div>
<div class="alert alert-positive" role="alert">Great! This is awesome.</div>
<div class="alert alert-warning" role="alert">Hmm.. something is not right.</div>

Tables

Built with headers and rows, a table is useful to display many items or content with measurable data.

<table>
  <tr>
    <th></th>
    <th></th>
    <th></th>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
  </tr>
</table>
Name Modified Size
Documentation Today 12.7 MB
Style Guide Yesterday 2.4 MB
Templates Yesterday 4.5 MB

Cards

A card is a great content container.

<div class="bg-color-white card card-content">
  <h4>Card Title</h4>
  <p class="paragraph">Nemo enim ipsam voluptatem quia voluptas sit.</p>
</div>

Card Title

Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit.

Appearance

If you want to turn a module dark, add class .dark to the section.

<section class="dark"></section>

Card Title

Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit.