vue-design-system icon indicating copy to clipboard operation
vue-design-system copied to clipboard

Support of OOCSS

Open vincesp opened this issue 5 years ago • 1 comments

If a design system starts to grow and becomes more and more complex, it might be helpful to be able to use building blocks to have a more modular design. Object-oriented CSS (OOCSS) could be a solution. Have you ever though about how to integrate OOCSS into VueDS? Maybe allow for OOCSS classes to be defined as design tokens and then use them when defining components? I think it would be important that OOCSS classes can have a documentation of their own and that the components that make use of them are automatically listed as examples on the generated documentation pages.

vincesp avatar Nov 22 '18 10:11 vincesp

I have kind of a similar question. Since VueDS documents really nicely components is there a way to document CSS? We have now started using VueDS to document our Vue-component library. Merging our existing component-library to VueDS was quite easy procedure. We have also a separate css-library with framework agnostic common core styles and utility css-classes etc which have their own KSS-based living styleguide. How does VueDS with all the token-definitions relate to documenting CSS?

Now for example since we created the tokens documentation in VueDS they are not inherited in the CSS-library. I'm considering of putting the tokens in their own repo where they could be installed to both the CSS-library and to VueDS-library. But then it will be a convenience trade-off between editing tokens and of using them in both libraries. And using VueDS-library as a dependency for our CSS-library seems a bit overkill (besides the CSS-library is already a dependency in VueDS-library). Is there an opinion to achieve something like this? Should we still have a separated CSS living styleguide.

I would also like to see more real world examples of VueDS usage. Is there any besides the example project?

mtlehtin avatar Jan 11 '19 06:01 mtlehtin