Quick and Easy

• Compose your HTML and CSS
• Write your content using Markdown
• Upload via FTP and enjoy

One Page Example

• Customize the HTML of index.php
• Add your CSS and Javascript to @assets/ folder
• Edit the contents of the main.md file
• Optionally edit the meta.json file

Micro Website Example

• Open @template/index.php and customize general layout and functions
• Duplicate the @template/ folder for each page and rename it with a friendly slug
• Customize each page as explained above in One Page Example

Quick Reference

Root Folder Structure

@kowari/ contains the little magic, do not remove or rename
@template/ contains the basic page template you can easily custom and duplicate
@assets/ contains the common files your website frontend relies on
index.php is the home page template
main.md is the home page main content written in Markdown
meta.json is the home page meta information file (optional but recommended)

Template File Structure

Every page is rendered by its unique index.php file where HTML and content are composed, for example:

<?php 
    // Required Block
    define('ROOT', $_SERVER['DOCUMENT_ROOT']);
    require_once ROOT . '/@kowari/bootstrap.php';
?>

<?php get_part('header') ?>

<section class="content">
    <?php get_content() ?>
</section>

<?php get_part('footer') ?>

The template file is made up of some calls to get_part('part') to retrieve individual common pieces of code and one ore more calls to get_content() to retrieve and parse the markdown content.

The only required instructions are in the first PHP block where the ROOT is defined and the website is bootstrapped.

You are free to define how many and which parts to use, how to name them and how to arrange them on the page, but if you are looking for inspiration you can see our examples.

Page Folder Structure

index.php – the page template
main.md – the main content

(optional files)
meta.json – the page information file
intro.md – the intro (or any other name) content
intro.css – the intro specific CSS file

Picture 1 Element Test

Picture 2 Element Test