Documentation

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 and extract the Zip.
2. Navigate to /site and remove the blueprints, snippets and templates folders.
3. Now, extract the theme Zip, add the assets folder and replace the content folder inside the Kirby installation.
4. Go to /site and add the following folders:
   • config
   • plugins
5. Upload all files and folders to your server.
6. That's it! Visit the Panel at yourdomain.com/panel to get started.

Updates

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. Inside the /site/plugin folder, replace everything.
4. Inside the /site/config folder, replace the config.php file.
5. Now, head over to the settings page of your site, save and that's it! Your theme is now up to date!

Classes

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

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.

Typography

Listed below are all default styles for headings.

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.

• List item one
• List item two
• List item three

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.

Buttons on a dark background:

Buttons inside a card layout:

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 class="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>

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>

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>