Would be great with a KSS Living Styleguide built into Radix. I've implemented a way to do it in http://github.com/vih/sport_2014.

Comments

lsolesen created an issue. See original summary.

shadcn’s picture

shadcn CreditAttribution: shadcn at Chapter Three commented

I've been working on a styleguide for Radix. I'll push it and we can test it. I'm using Markdown to generate the styleguide.

lsolesen’s picture

lsolesen CreditAttribution: lsolesen commented

@arshadcn Ok. Have you checked KSS which is inline in the CSS which makes it really easy to maintain and it will make it possible to update it right away when doing changes.

shadcn’s picture

shadcn CreditAttribution: shadcn at Chapter Three commented

Yeah kss-node was the first thing I tried. What we have right now takes some features from kss. I'll clean it up and push it this weekend. We can test :)

shadcn’s picture

shadcn CreditAttribution: shadcn at Chapter Three commented

@lsolesen, I pushed a demo theme using the Radix Styleguide Builder here: https://github.com/arshad/radix_styleguide_example. Test it out (see the README for demo and installation) and let me know what you think.

lsolesen’s picture

lsolesen CreditAttribution: lsolesen commented

@arshad It looks cool. Only thing that I really like with KSS is that the docs are written directly into the SCSS files. That means you have documented your code, and can use it for something useful when refactoring and debugging. I see the idea behind this, but often the styleguide will probably get out of date with new components etc. added during the lifespan of a theme.

This off course is much better than no styleguide :)

shadcn’s picture

shadcn CreditAttribution: shadcn at Chapter Three commented
Status: Active » Closed (outdated)

Closing this as outdated. Feel free to reopen if not. Thank you.

donquixote’s picture

donquixote CreditAttribution: donquixote commented
Related issues: +#2901879: Generate Styleguide

A style guide is still a desirable thing to have in Radix sub-themes. No reason why this should be considered outdated.
I am also reopening #2901879: Generate Styleguide which seems to have the same or a similar purpose. We can then decide which of them is a duplicate, if any.

Radix has moved from gulp to laravel-mix, so whatever was done in the example probably needs updating or rethinking.

donquixote’s picture

donquixote CreditAttribution: donquixote commented
Status: Closed (outdated) » Active
donquixote’s picture

donquixote CreditAttribution: donquixote commented

I've had some success with 'kss-webpack-plugin'. Also 'kss-bootstrap' seems to be useful.
It is not working perfectly yet, but going in a good direction.

webpack.mix.js:

[..]
const KssWebpackPlugin = require('kss-webpack-plugin');
[..]
if (!mix.inProduction()) {
  // Generate a living styleguide with KSS.
  // See https://www.npmjs.com/package/kss-webpack-plugin
  // See https://www.npmjs.com/package/kss
  // See https://github.com/kss-node/kss/blob/spec/SPEC.md
  mix
    .webpackConfig({
      plugins: [
        new KssWebpackPlugin({
          source: [
            // Styleguide components defined in SASS sources.
            'src/sass',
            // Preview pages to replicate styleguide from design contractor.
            'src/styleguide',
            // Basic bootstrap styleguide.
            'node_modules/kss-bootstrap/styleguide',
          ],
          homepage: 'src/styleguide/homepage.md',
          destination: 'assets/styleguide',
          // Add stylesheets to every styleguide page.
          // This url is relative to the styleguide root dir.
          css: [
            '../css/my_radix.style.css',
          ],
          js: [
            '../js/my_radix.script.js',
            '../../node_modules/jquery/dist/jquery.js',
          ],
        }),
      ],
    });
}