Repository files navigation

Write maintainable CSS styleguides efficiently using a Markdown.

ℹ️ This package is forked fromStyledown.

Add the github registry in your.npmrc for @peopledoc scoped package:

# Points to Github NPM registry@peopledoc:registry=https://npm.pkg.github.com

Then you can install it:

npm install -g @peopledoc/styledownstyledown --help

Styledown is made to work in most web development setups. It doesn't favor any framework or language or any preprocessor.

• Document your CSS files with inline comments, or as a separate.md file.
• Create a file with styleguideconfiguration.
• Invokestyledown *.css > styleguide.html.
• Enjoy your styleguide! Read more about theformat.

Here's a generic guide on getting started with Styledown on any project. We'regonna assume that you're using Sass and that your project bundles all CSS filesinto one file.

Let's assume that your files are incss/, and that your final styleguide willbe inpublic/styleguide.html.

                    Example setup.----------------------.     .---------------------.| css/                 |     |                     ||     config.md        |     |  public/            ||     button.scss      | ==> |    styleguide.html  ||     forms.scss       |     |                     ||     whatever.scss    |     |                     |'----------------------'     '---------------------'

Document your project's stylesheets with inline comments, or as separate.mdfiles.

/** * Component name: * `.your-component-here` - documentation on what your * component is goes here. Markdown is encouraged. * *     @example *     div.your-component-here *       h3 Sample code *       p goes here */.your-component-here {display: block;/*...*/}

Read more:Documenting ▸

Make a file, let's call itconfig.md. (styledown --conf > config.md) Thislets you define what will be in the output head/body.

#Styleguide options###Headlink(rel="stylesheet" href="/assets/application.css")<style>  /* styledown css */</style><script>  /* styledown js */</script>###Bodyh1 My Awesome Styleguidesdiv#styleguides(sg-content)

The first one (application.css) should point to your project's concatenatedstylesheets. The second and third one (styledown.css andstyledown.js)point to the default Styledown CSS/JS files.

Read more:Configuration ▸

Invokestyledown to generate an HTML file. (Make sure that the extras.css ispassed on the end, since anything after the "Styleguide options" heading is ignored.)

 styledown css/*.css css/config.md> public/styleguides.html

Now openpublic/styleguides.html in your browser.

Styledown generates.html styleguides. It can take CSS files or Markdownfiles, or a combination of the two.

Inline CSS mode: Parses comments from CSS files. This is what happens whenyou pass .css, .sass, .scss, .less and .styl files.

 styledown*.css> styleguide.html

Markdown mode: Takes Markdown files.

 styledown*.md> styleguide.html

Read more:Markup format ▸

rstacruz

KamiKillertO

ryuran

MrChocolatine

GreatWizard

Erol