Add support for adding CSS code snippets directly into css tab

[vdecree]

Hi David,

I love this so far, great work. Are there any plans to add the ability to perhaps have css directly on the styleguide? I'm looking through Jekyll docs at the moment trying to workout how I'd go about it. Maybe I'd need to write a custom plugin that reads an additional file?

Love to hear your thoughts on this.

[davidhund]

Thanks a lot @vdecree — This was a very quick little PoC project actually, and I should take some time to improve it in various places. One of the things would—indeed—be to have the appropriate CSS snippets together with the components.

What I wanted to provide is a way for people to simply link to their CSS and use that to style the components. I wanted to avoid coupling some opinionated CSS workflow to the styleguide. This is one of my problems with the many CSS-Comment-Based approaches: it is very hard to implement (later) with exisiting CSS and requires quite a specific workflow.

So the good thing at the moment is that it's trivial to link your CSS and see your styles reflected in the styleguide components. The problem is that it's difficult to see only the CSS that applies to the component.

In my example styleguide (using my own SCSS framework as an example) this is less of an issue because I adhere to a strict OOCSS based approach and have my component CSS in standalone files I can link to in the CSS tab.

I can think of two simple ways to display component-css inline in the CSS tab:

• You could of course duplicate your CSS and add another css YAML field to render. This is obviously not DRY but is the simplest way and does not require a css-file-per-component.
• If you do have separate _component.css files (like I do) you could use the {{page.scssurl}} to load the CSS through AJAX, perhaps?

I'm sure there are other, more DRY and cleverer, ways. Please let me know ;)