[WIP] Allow external usage of individual components.

[thet]

This is a proof of concept and work in progress.

The idea is to allow individual components to be usable outside this repository and not need to build/import the whole CSS bundle.
I want to individually use the CSS here in individual patterns and only if they are loaded by importing these files in JavaScript. For example like in this commit: Patternslib/Patterns@2cde595
Note this is optional and these JavaScript imports can be easily turned off (as we will be the case for ploneintranet.prototype and others without any further changes in these integration packages).

For this to achieve I have to make some adaptions.

• I did split up the _patterns.scss and moved out the generic styles into a _common.scss which can be imported by individual components. The scss compiler should be smart enough to not multiply include the same output from _common.scss in the built bundle.
• I would need fontello to be available. I found out that there is no maintained npm package which I could just import and use. AFAIK this wouldn't be easily possible anyways as fontello can be configured to only include icons which we want to use. However, usage of fonts is discouraged AFAIK. I'd love to switch to SVG icons. In Plone 6 we're using the SVG icons from https://icons.getbootstrap.com/

Due to a number of open and debatable questions it's probably faster to reach the goal of a downloadable Patternslib bundle if we just build the whole CSS and offer it for download. Which is probably huge, but we can improve later and eventually build on the ideas outlined above.

Some questions to @cornae:

• Can you build such a downloadable CSS bundle which includes just everything?
• What do you think on the ideas outlined above?
• Would it be much effort to switch to SVG icons?

Related:

• [WIP] Prepare release Patterns#827
• [WIP] Allow external usage of individual components. #1

[cornae]

@thet You raise some ideas and questions that are so big that I cannot possibly answer them here, nor can I oversee the consequences. Do you want to set up a workshop of an afternoon or perhaps longer to discuss?

[thet]

@cornae Yes, let's do that in accordance with @pilz
What about the CSS bundle? I probably can just get it from ploneintranet.prototype...?

[cornae]

The CSS bundle is work in progress. Whenever I have time I do a little bit. Recently I've made some improvements again and I hooked up another project to the centralised bundle to make it more robust. The fact that it's not ready is also the reason that I don't want to include CSS yet with the download on the patterns site.

[thet]

Hm... I think we need at least some CSS.
But I can just JavaScript-import the CSS for external libraries like the date-picker, slick-slider, tooltips and so on.

[cornae]

We haven’t had any CSS on the site so far but we are in dear need of the new site and the single universal bundle. Let’s not the basic needs because we also want something extra as a next step.

…

Op 8 apr. 2021 om 20:57 heeft Johannes Raggam ***@***.***> het volgende geschreven:  Hm... I think we need at least some CSS. But I can just JavaScript-import the CSS for external libraries like the date-picker, slick-slider, tooltips and so on. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or unsubscribe.