1

I'd like to add my css stylesheets to the live demo examples in the ngdocs documentation.

I want the styles to affect the demo itself, but obviously, they should not affect the entire web page.

I tried adding my stylesheet to the gruntfile ngdocs options as follows:

ngdocs: {
    options : {
        scripts: [
            ...
        ],
        styles: [
            '<%=base%>/mycss/mylayout.css'
        ],
        dest: '<%=target%>docs'
    },
    api : {
        src: [
            ...
        ]
    }
}

This does add mylayout.css as a link tag to the markup of index.html, as the last included link tag in the head section, but the styles in it override the styles on the entire page. No good.

What do I do so that my styles work within the live demo, but not on the rest of the page?

Thanks for your help! Hope this'll make a contribution to the very limited available information on ng-docs!

EDIT: What I ended up doing is creating a new css file called myNgdocsLayout.css in which I wrote a couple of styles overriding some of mylayout.css, while still allowing mylayout.css styles to apply to the live demo.

Now my pages look OK, but this is definitely not a perfect solution. I'd still appreciate if anyone can come up with an idea that would allow my styles to apply only to my live demo, without needed to override them for the rest of the page... I'd be surprised if there was no built-in way to do this in ngdocs.

code2b
  • 132
  • 2
  • 3
  • 11
  • You can try use solution from this stack question http://stackoverflow.com/questions/31719426/grunt-ngdocs-styles-file-not-included-to-demo-code – Paweł Lula Nov 10 '15 at 09:58
  • Hi Pawel Lula, thanks for your response - This doesn't help, though, since the styles on mylayout.css still override ngdocs' styles on the whole page... I'm looking for something that'll scope my styles to the live example div, and not take over the entire page. Something like 'scoped styling' - see here: http://html5doctor.com/the-scoped-attribute/ . Scoped styling is too experimental, so it won't work for me. -- Any other ideas? – code2b Nov 11 '15 at 08:26

1 Answers1

1

Can you add css class (call it for your example 'myexample' in ngdocs comments and then from css file use it befoure all you styles?

 * @example
   <example module="rfx">
   <file name="index.html">
     <div class="myexample" >
       // my example code
     </div>
   </file>
   </example>
 */
Paweł Lula
  • 310
  • 3
  • 9
  • 1
    Theoretically this might work. However I would then have to change mylayout.css so that the styles in it only apply to the ".myexample" class instead of to the entire page. Since I have tens of css files like mylayout.css, this will not work for me. I'm editing my question with what I ended up doing - though it is far from a perfect solution. – code2b Nov 11 '15 at 12:12