Tikui

The component should respect the structure of a component.

A documentation area contains a description, the render and a code area.

There are two kinds of documentation area: componentDoc and templateDoc.

It's possible to generates a component using @tikui/cli with tikui create ….

Structure

The structure of a component ({NAME} is the component name) looks like this:

{NAME}/
  {NAME}.md
  {NAME}.code.pug
  {NAME}.render.pug

For a button it looks like:

button/
  button.md
  button.code.pug
  button.render.pug

The button.md file contains a markdown to propose a textual documentation of the button.

The button.code.pug file contains the code used to show the button.

The button.render.pug file is used to render the button.

Common practices

In addition of the standard structure, it's relevant to add the style file near to the component files. It's also a good idea to make a mixin file to use the component in multiple parts of the documentation:

{NAME}/
  _{NAME}.scss
  …
  {NAME}.mixin.pug
  …

At the end, a button component will looks like:

button/
  _button.scss
  button.md
  button.code.pug
  button.mixin.pug
  button.render.pug

componentDoc

include:componentDoc(height={HEIGHT}) {PATH}.md

The {PATH} is the link of the component, it's important to reference the markdown file to import the other part of the component.

The {HEIGHT} is optional and it's the pixel size of the render height.

Example with a button atom and 42px of render height:

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

templateDoc

include:templateDoc {PATH}.md

The {PATH} is the link of the component, it's important to reference the markdown file to import the other part of the component.

Example with a template-page template:

include:templateDoc template-page/template-page.md

Component documentation

Structure

Common practices

componentDoc

templateDoc