Sassdoc Pheek Theme
A stylish but agnostic SASSDoc theme with heavy focus on rendering code examples.
- Code examples styled to match atom.io One Dark Theme
- SASS filenames for easy reference
- Previews for colours both in the main body of the documentation and in the sidebar navigation
TODO Still a couple of things I want to tidy up before this hits 1 dot release
- Fix the inconsistent left alignment of annotation details
- Use FontAwesome icons for function, variable and mixin labels on the @see and @usedby annotation blocks
Let me know if you find any other display quirks and I'll patch 'em. If you end up using the theme - thanks - and ping me a link. I'm @petehotchkiss on Twitter
Up and running...
Assuming you even know what Sassdoc is, and already have the bad-boy installed. Install the theme via
npm i --save sassdoc-theme-pheek
Depending on which way your skinning your configuration cat, change the theme value to
Using sassdoc.config file
Changing display items
The theme will look automatically for a file called your_logo.svg in the assets/images folder of where your docs are built to. To change this, edit the
package.json file, amending the
logo property to your prefered file name.
Other stuff you should read
Note: Current SassDoc instance appears to have bug 464 which means anything documented with a @group annotation isn't correctly referenced with an #anchor point. Subsequently, should the items be referenced with a @see annotation the incorrect link is injected into the page.
There is a pending pull request PR which fixes this and exposes a
see.groupvalue to the
see.html.swigtemplate file. Once this PR is authorsied this theme will automatically pick up the feature and the linking will work correctly on your next documentation generation.