# tikui

> Pattern Library tool

Latest version **1.0.0** (published 2020-01-16) · MIT license · 0 weekly downloads

## Install

```sh
npm install tikui
pnpm add tikui
yarn add tikui
bun add tikui
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.0 |
| Published | 2020-01-16 |
| First published | 2020-01-16 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Node | >=12.14.1 |
| Dependencies | 2 |
| Unpacked size | 16.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 32 |
| Author | Anthony Rey |
| Maintainers | anrey |
| Keywords | ui, ui kit, design system, pattern library |

## Links

- npm: https://www.npmjs.com/package/tikui
- Repository: https://github.com/tikui/tikui
- Homepage: https://github.com/tikui/tikui.git#readme
- Issues: https://github.com/tikui/tikui/issues
- npm.io page: https://npm.io/package/tikui

## Dependencies (2)

- [@tikui/core](https://npm.io/package/@tikui/core.md) ^1.0.0-alpha.1
- [tikuidoc-tikui](https://npm.io/package/tikuidoc-tikui.md) ^1.0.0

## Alternatives

- [@sindresorhus/slugify](https://npm.io/package/@sindresorhus/slugify.md) — 3.7M weekly downloads
- [solid-js](https://npm.io/package/solid-js.md) — 2.7M weekly downloads
- [expo-glass-effect](https://npm.io/package/expo-glass-effect.md) — 2.5M weekly downloads
- [nanoassert](https://npm.io/package/nanoassert.md) — 780.8K weekly downloads
- [@ffmpeg/ffmpeg](https://npm.io/package/@ffmpeg/ffmpeg.md) — 529.5K weekly downloads

## Recent versions

- 1.0.0 (latest) — 2020-01-16

## README

<img src="/logo-horizontal.svg" width=300 height=auto>


# Tikui

[![CircleCI](https://circleci.com/gh/tikui/tikui/tree/master.svg?style=svg)](https://circleci.com/gh/tikui/tikui/tree/master)

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

## Prerequisites

* [Node.js](https://nodejs.org) LTS version

## Development

### Install dependencies

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

```bash
npm install
```

### Serve

In development, you can run the application locally on [localhost:3000](http://localhost:3000/)

```bash
npm run serve
```

### Tutorial

#### Create a component

The source folder `src` follows the [Atomic Design](http://atomicdesign.bradfrost.com/table-of-contents/) 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:

```pug
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:

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

In `button.md` file we can add:

```markdown
## Button

A simple button.
```

Now, you can open [button](http://localhost:3000/atom.html#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:

```bash
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:

```pug
extends /layout

block body
    include button.code.pug
```

And inside `button.code.pug`:

```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:

```bash
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`:

```scss
@import 'atom/atom';
```

Inside `_atom.scss`:

```scss
@import 'button/button';
```

Inside `_button.scss`:

```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.

---
_Source: https://npm.io/package/tikui · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._