For example, I have a base.css style sheet that has reset settings and other things that causes styledocco's styling to become malformed. Is it possible to tell styledocco not to render the stylesheet of the file that is being viewed?

I'm using Chrome 32.0.1700.77 (Official Build 244503). Iframe is blocked cause of CORS. The error message is below.

Uncaught SecurityError: Blocked a frame with origin "http://localhost:10080" from accessing a frame with origin "null".  The frame requesting access has a protocol of "http", the frame being accessed has a protocol of "data". Protocols must match.

Above message has occured in my local server, but styledocco's demo site has same error.

I think this problem is related #100.

Hi,

I installed the newest version and styledocco suddenly stopped working:

module.js:340
throw err;
      ^
Error: Cannot find module 'async'
at Function.Module._resolveFilename (module.js:338:15)
at Function.Module._load (module.js:280:25)
at Module.require (module.js:362:17)
at require (module.js:378:17)
at Object.<anonymous> (/usr/local/lib/node_modules/styledocco/cli.js:3:13)
at Module._compile (module.js:449:26)
at Object.Module._extensions..js (module.js:467:10)
at Module.load (module.js:356:32)
at Function.Module._load (module.js:312:12)
at Module.require (module.js:362:17)

exec error: Error: Command failed:

The version beforehand that was working like a charm. Am I doing sth. wrong?

it seems that since the iframes src is a data uri any document relative or even root relative urls without a hostname won't load

<iframe scrolling="no" name="iframe4" src="data:text/html;charset=utf-8,%3C!doctype%20html%3E%3Chtml%3E%3Chead%3E%3C%2Fhead%3E%3C%2Fbody..."></iframe>

so css with image or font urls need to include the host as well as the full path which is not really ideal

works:

.foo { background: url("http://localhost/img/foo.jpg") ; }

wont work:

.foo {  background: url("/img/foo.jpg") ; }

perhaps during css parsing the host & port could be inserted for urls? or maybe some other solution?

When using one main file that imports all my CSS with a preprocessor I was hitting the maxBuffer limit. I've changed exec to spawn so that the output gets built from the stream, without a limit.

Also fixed a typo in the regex that checks for Sass partials.

Currently StyleDocco lists the different stylesheet files in the left side navigation.

Could it be possible to generate "submenu" / childmenu after the stylesheet name, that would contain hierarchical list of markdown headings inside the stylesheet and have links to them?

Example, I could have following CSS:

/* 
Typography
==========
Here are global typography styles etc
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
*/

/* 
Headings
--------
  <h1>heading 1</h1>
  <h2>heading 2</h2>
*/
h1, h2 { /* ... */ }

/* 
Links
-----
  <a href="#example">Default link style</a>
*/
a:link, a:visited { /* ... */ }
a:active, a:hover { /* ... */ }

/* 
containers
==========
Here are styles for the different containers.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
*/

/* 
Main
----
*/
.main { /* ... */ }

/* 
Sidebar
-------
*/
.sidebar { /* ... */ }

... and it would convert to a menu that would be something like this in the styleguide left side nav:

stylesheet.css
├── Typography
│   ├── Headings
│   └── Links
└── Containers
    ├── Main
    └── Sidebar

Then these menuitems would link to matching section in the styleguide.

Hi,

I'm running Styledocco on Windows with node.js.

When I type the following:

styledocco -n "MyProject" css

*css is a folder with styles.css & styles2.css

Styledocco only parses styles.css but I want both of my files in the StyleGuide.

What should I do?

Thanks

Using Chrome Canary (version 33.0.1703.0) on the styledocco sample page: http://jacobrask.github.io/styledocco/styledocco/examples/styledocco/docs.html

Getting this error, and the preview iframes are not getting appended to the DOM.

Uncaught SecurityError: Blocked a frame with origin "http://jacobrask.github.io" from accessing a frame with origin "null". The frame requesting access has a protocol of "http", the frame being accessed has a protocol of "data". Protocols must match.

Screenshot:

I also notice a similar issue happening with my own styleguides, using Firefox 25, but for some reason the styledocco example works in Firefox...

So I forked and cloned Styledocco. It really is just what I need and I want to be able to hack, adapt and possibly help improve it. But as it turns out I have no idea how to run it from the working copy. Can you give me some pointers? I feel stupid right now.

It seems like this project is geared towards smaller projects and could use some improvements for larger code bases.

For example, I've got close to a hundred css files that I've started documenting for StyleDocco. Here are some issues I've encountered:

• My css is modular and some modules depend on others, but I can only include one css file globally. I guess the easiest solution would be to include all css that's processed.
• I don't need docs for all files. A more granular method to process specific files would be appreciated.
• Some things depend on javascript as well... I'd like to be able to include those for functionality, not necessarily to document.
• I don't always want code examples to be rendered. In my case, I've got some php I'd like to include as an example. I know I can hide that comment entirely from StyleDocco, but I still want it to appear with the rest of the documentation.

I think that covers all of it. Let me know if any of these are already possible; I don't know all of version 0.4's new features.

Note: None of this are stopping me from using StyleDocco, they'd just be nice to have :)

Hi there,

I'd like to use docco husky and styledocco together for my projects. husky has a package.json file which contains the project name and I'd like to use that name for styledocco as well and link beetween them via the readme file. I tried to fetch it with a bash script, but styledocco does not use the name from the variable, it just inserts "true".

Maybe my script is wrong, but when I use echo it outputs sth. like styledocco -name "name from json file" css which is correct. Here is my script:

#!/bin/bash
name=`cat package.json | grep name | sed -e "s/^.*\"\(.*\)\".*$/\"\1\"/"`
echo $name
styledocco -name $name css 
docco-husky js

Regards, Tom

Hello, just installed and tried to see how styledocco works but I keep getting this error:

"throw new TypeError('Path must be a string. Received ' + inspect(path));"

I'm using it with Gulp (gulp-styledocco), however, I also tried to use it directly on the command line and I keep getting that error. This is the output I get from "gulp-styledocco" styledocco --out ./build/css/ --name "Herdez" --no-minify /Users/krrrunch/Code/herdez-front/build/css/main.css

I'm pretty sure I installed it correctly with npm install -fg styledocco

this is my gulp function

gulp.task('styledocco',  function () {
  gulp.src('./build/css/*.css')
    .pipe(styledocco({
      out: './build/css/',
      name: 'Herdez',
      'no-minify': true
    }));
});

I know this is not the gulp-styledocco repository but I really think is a styledocco issue.

Any ideas?

I am trying to get styledocco to work with the project I am working on. I am using the less version of Bootstrap and the Aurelia framework. I am able to Generate documentation for my project using the following command: styledocco -n "heimdall-uiapp" -o src/styleguide --preprocessor "less src/less/*" styles. I have added the following comment to one of my custom less files and I have prefixed my HTML with 4 spaces (I also also tried to "```" notation as well):

/*  
Base
===============

Standard Bootstrap button

    <button class="btn btn-primary">Button</button>

*/

But when I view my documentation I get the following view. How would I resolve this issue? I can provide any additional information.

Some additional information. I have a main LESS file where I am importing all the Bootstrap LESS files, and then importing the customize LESS files.

The demo I saw generated doc text.

Is it possible to also generate an HTML element and apply the style to it as a preview of the styles?

I wasn't able to tell if this does that or not. Some of the demo URLs are 404

I am working in a big, grown project with hells of CSS, trying to introduce SCSS/SASS and Styledocco there step for step.

For the examples of the output styledocco gives me (we are using maven and grunt), I include generated sprite css files (which works fine with the include option). Is there any way to include the images the CSS is relying on as well?

Hi,

Does hologram supports, or plan to support templates include from CSS comments? Like

/*
My example

\```html_example
    @inclute template.hbs
\```
*/

HTML placed in CSS comments is hard to maintain, and easpecially keep up to date, because of you're always forced to copy paste it from real codebase to comments. Also, you don't have any syntax highlight and writing bigger chunks of HTML examples will bloat your CSS.