node package manager

toth

toth

Styleguide generator that just work.

Content

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 ❤️ welcome.

Roadmap to 1.0

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

License

MIT © Filipe LInhares