JOIN THE PARTY

Quick Start

1) Create your new project

Create a new folder under Documents/kit55/projectsname it MyProject. That will be the home of your new project.

Add a src folder inside your newly created project folder.

2) Add your first page

Create an index.html file inside your src folder MyProject/src/index.html.

Copy the below code inside the file:

<!DOCTYPE html>
<html lang="en" class="no-js">

  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>My Simple Site</title>
  </head>

  <body>
    Hi there!
  </body>

</html>
Select a project using the project selector. You can open a page by clicking on the box next to the project page.

3) Build your project

Open Kit55 - Now your project will be visible in the dropdown box. Select it and you will be able to see your page listed in the pages box right below.

If you click in the small rectangle next to index.html, Kit55 will open your default browser and serve your page. From now on, all changes you make in your page will show right away in your browser.

4) Using templates

We haven't done anything extraordinary yet. You can create a simple HMTL page in your file system and your browser will render it as expected as well.

Now, what happens if you want to add shared elements to your pages? That is not possible to achieve by simply writing HTML. If you need a common header you will have to repeat its code in every single page of your website.

Kit55 lets you do exactly that.

Create a new file MyProject/src/header.tpl.html

Copy the below code inside it:

<header>
  <a>Header</a>
  <nav>
    <ul>
      <li><a>news</a></li>
      <li><a>careers</a></li>
      <li><a>contact</a></li>
    </ul>
  </nav>
</header>

Use the extension .tpl.html to show Kit55 that these shared files are templates, not pages. Templates are just "building blocks" and Kit55 won't show them in the "Pages" list in the UI.

We are going to add a CSS file as well, so we can style HTML. Create a new file MyProject/src/styles.css and copy the below code inside it:

body {
  margin: 0;
}

header {
  display: flex;
  align-items: center;
  padding: 30px;
  background: lightblue;
}

header>a {
  font-size: 1.3em;
  font-weight: 900;
  letter-spacing: -1px;
}

nav {
  margin-left: auto;
}

nav ul {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}

nav ul li a {
  margin-left: 50px;
}

5) Add a reference to your header in your page

Add the line {% include "header.tpl.html"%} to your page, just below the body tag.

Your file MyProject/src/index.html will look like this:

<!DOCTYPE html>
<html lang="en" class="no-js">

  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>My Simple Site</title>
    <link rel="stylesheet" href="styles.css">
  </head>

  <body>
    {% include "header.tpl.html"%}
    Hi there!
  </body>

</html>

And that's it. Now you can create new pages, e.g., MyProject/src/contact.html and include your header in them. Kit55 will include the header automatically.

Any changes you make in the header will show in any of the pages that reference it.

When Kit55 builds your pages, it takes your code from src and builds complete pages in dist.

Once you are done building your page, take the pages generated in dist and move them to your application server.

Using the include statement is the easiest way to reuse elements. However, there are more powerful ways to organize your code, template inheritance in particular.

For more details, read our FAQ.