Styleguides and subthemes: inheritance?

[nedjo]

Thanks for your great work here. Navigating the many options for front end development is a challenge. You've given the rest of us a huge leg up.

A question I'm working on is how to provide styleguide components in a subtheme.

The default option is to have separate styleguides, one for the base theme and one for the child theme. This kinda sorta works, but with many challenges and shortcomings--you can't see all components in one place, the child theme doesn't get styles from the base theme, and so on.

The ideal might be inheritance, such that the base theme styleguide dynamically brings in components provided by any subtheme.

Any tips appreciated!

[nedjo]

Maybe something like this....

Say the setup is:

• I'm building a subtheme of a subtheme.
• Parent theme in themes/contrib/mybasetheme. Child theme is themes/contrib/mychildtheme. Custom theme based on mychildtheme is themes/custom/mycustomtheme.

1. Create directory styleguide in project root.
2. Install the subset of node packages required to generate a styleguide.
3. Write custom gulp-tasks/styleguide.js that iterates through the three theme to generate source data.

[zhawkins]

Innnnnteresting.

One possible solution could be to have gulp-tasks/styleguide.js scan those other theme directories for files with the special KSS comments.

      source: [
        dirname + '/src/global',
        dirname + '/src/components',
        dirname + '/src/layout',
        '../path/to/parent/theme/' + '/src/components',
        '../path/to/child/theme/' + '/src/components'
],

You'd likely need to also include the CSS / JS from the other themes as well which could be done within the same gulp task.

[mariohernandez]

There are ways in which you can access components from the base theme by using that theme's names space (i.e. {% include '@base-theme-namespace/component-name/component-name.twig' ...%}

Closing issue due to inactivity.