styledocs

Generate style guide from your stylesheet.

npm install styledocs
2 downloads in the last month

Styledocs

Styledocs is a style document generator. It parse through stylesheet and creates style documents based on the comments provided in it. Its a customized version of jacobrask's styledocco.

Installation

npm install -g styledocs

Usage

styledocs [options] [INPUT]

styledocco -n "My Project" css or styledocco -n "My Project" style.css

Options

  • --name, -n Name of the project (required)
  • --out, -o Output directory (default: "docs")
  • --resources, -s Directory for custom template, CSS and JavaScript. Can be the same as the output directory if you don't want to overwrite your changes. StyleDocco defaults will be used for any required file not found in this directory. (optional)
  • --preprocessor Custom preprocessor command. To disable preprocessing, use none. (optional) (ex: --preprocessor "scss --load-path=deps/")
  • --include Prepend specified CSS file to the documentation stylesheet. (optional) (ex: --include mysite.css)

    Example

/#breadcrumb <div class="breadcrumb"><a href="">Home</a><span>Email</span></div> /

.breadcrumb a{ padding-right:10px; text-decoration:none; } .breadcrumb a:after{ content: '>'; width: 15px; height: 14px; display: inline-block; background: red; font-size: 11px; text-align: center; border-radius: 15px; margin-left: 10px; color: white; font-weight: bold;

} .breadcrumb a:hover{ color:gray; } .breadcrumb span{ color:green; }

/ #search <form id="searchFrmNormal" action="" method="get" class="search" onsubmit="return searchboxValidate('Search')"><input accesskey="f" name="q" type="text" id="search-text" class="txt-search" placeholder="Search" value="Search"><input type="submit" class="btn-search" value=">"></form> /

.search{ background:#f1f1f1; border:1px solid #ccc;
padding:5px 10px; display:inline-block; border-radius:5px; }

.search input{ background:none; border:0;
}

.search input[type="submit"]{ border-radius:5px; background:#333; font-size:13px; font-weight:bold; color:#fff; }

npm loves you