tikui v1.0.0

Tikui

Tikui is a MIT-licensed free software project allowing you to create a web pattern library.

Prerequisites

• Node.js LTS version

Development

Install dependencies

After cloning the repository, please go to the root Tikui directory and run this command:

npm install

Serve

In development, you can run the application locally on localhost:3000

npm run serve

Tutorial

Create a component

The source folder src follows the Atomic Design methodology.

To make your first component, we will take an atom example: a button.

Inside src/atom/atom.pug, you have to describe your button by adding an inclusion at the end of the file:

include:componentDoc(height=55) button/button.md

Now, you have to create your atom by adding the button folder and the button documentation as a markdown file:

mkdir src/atom/button
touch src/atom/button/button.md

In button.md file we can add:

## Button

A simple button.

Now, you can open button atom inside your browser (serve is needed).

Components Parts

You can see a title Button, a content A simple button and two files to create:

touch src/atom/button/button.render.pug
touch src/atom/button/button.code.pug

The file button.render.pug represents the render of your component and button.code.pug represents its code.

Inside button.render.pug, you can add:

extends /layout

block body
    include button.code.pug

And inside button.code.pug:

button.tikui-button Button

Style

Then you can see a button on the browser. Now, you have to change the appearance of this button on _atom.scss and _button.scss files:

touch src/atom/_atom.scss
touch src/atom/button/_button.scss

Before going into these two new files, edit the default scss file:

Inside tikui.scss:

@import 'atom/atom';

Inside _atom.scss:

@import 'button/button';

Inside _button.scss:

.tikui-button {
    border: 1px solid #47a;
    border-radius: 3px;
    background-color: #47a;
    padding: 5px;
    line-height: 1.5rem;
    color: #fff;
    font-size: 1rem;
}

As you can see in the browser, there is a documented blue button with an example of code.