toth

Styleguide generator that just work.

• Demo
• Demo source

Content

• Installation
• CLI usage
• Styleguide markup
• Custom themes

Installation

npm install --global toth

CLI usage

Options

g, generate

toth generate css/*.css

s, server

toth server

w, watch

toth watch css/*.css

Flags

-p, --port

toth server --port 8080

-d, --dir

toth generate --dir outputDir
toth server --dir outputDir

-t, --theme

toth generate scss/*.scss --theme {theme-folder or theme-package}

Styleguide documentation syntax

@cssurl and @jsurl

Load an external resource into your styleguide when compiled.

/*
 * @cssurl http://my-site/my-source-style.css
 * @jsurl http://my-site/my-source-interaction.js
 */

@name

Your component's name.

// @name Button

@description

Your component's description.

/*
 * @description My description lorem ipsum dolor sit a met
 */

@state

Your component modifier, you need to follow these pattern nome-do-modifier - descrição do modifier with a dash between the name and the description.

/*
 * @state .small - A small button
 */

@markup

The markup is used to build the code example and the element into your styleguide.

/* @markup
 *	<button class="btn">I'm button</button>
 */

@color

The markup is used to build the code example and the element into your styleguide.

/*
 * @colors #fff - --variable-name
 */

Custom themes

TODO: Add content

Contribute

Your contributions and suggestions are :heart: welcome.

Roadmap to 1.0

• [x] Create the toth watch command
• [x] Create a way to make custom themes
• [x] Improves default theme's code
• [x] Compile template in the back like Jekyll do
• [x] Add color palette support
• [ ] Design a bealtiful toth-default-theme
• [ ] Improves documentation

License

MIT © Filipe LInhares