How To Have CSS Applied To StyleDocco Output Docs

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 appli

Solution 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:

Solution 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.