How to have CSS applied to StyleDocco output docs

Question

I am using grunt-styleguide with my template is set to styledocco to generate CSS style guides.

When I run the task, it works but the styledocco output files do not have CSS applied to demo elements.

My grunt init for styleguide:

styleguide: {
        dist: {
            options: {
                framework: {
                    name: "styledocco"
                },

                name: "FE KICKSTARTER V1.o"
            },

            files: {
                "assets/css/styleguide": "assets/css/**/*.less"
            }
        }
    }

My outputs are as follows:

Above image, test text and button should have been styles applied. I have checked configs, things seem fine but not sure what is missing.

How do I make this work?

Answer 1

@chris-vdp definitely puts you in the right direction. The comments in http://shekhardesigner.github.io/fe-kickstart/assets/css/styleguide/base-base.html are not recognized as valid markdown. In your Less code replace:

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

    This is a simple Base CSS

    <div class="h1">H1 type headers</div>

*/

with:

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

This is a simple Base CSS

    <div class="h1">H1 type headers</div>

*/

After removing the wrong tabs your style guide will look like that shown below:

Answer 2

for base base I would try something like.

/*Base
===

This is a simple Base CSS 
``` 
<div class="h1">H1 type headers</div> 
```

*/ 
.h1 {
    font-size:30px;
    font-weight:normal; 
}   

/*Type
===
Basic Typography styles 
``` 
<h2>h2 style might go like </h1> 
```    
*/

h2 {
    font-family:'Source Sans Pro';
    color:#f90; 
}

I had some similar problems when I started. You can see in your source from github that the html is being escaped. Also worth noting is that styledocco is quite particular about spaces.