Candidate for plugin: Generating wireframe boxes

[Ryuno-Ki]

Hi,

this is likely the wrong place to ask, but I couldn't find a better repository … after reading the overview article about the ecosystem styleguidekit sounded like the best place …

What do I want to suggest: In November Eric @meyerweb Meyer blogged about creating wireframes with HTML and CSS. To me that sounded like an ideal addition to PatternLab so I reached out to @bradfrost last month and he encouraged me to get in touch with you.

How would the next steps look like?

[bmuenzenmeyer]

Hello @Ryuno-Ki

I've read that article and had the pleasure to meet Eric a couple times - I love the idea of encorporating this technique into developer's workflows. I'm curious what your thoughts are about making this a workflow? Eric's technique is already pretty portable, so developers wanting to do this would merely need to add Eric's css and apply a data-attribute. I couldn't find a direct sample of Eric's implementation but someone in his comments added a svg-based codepen: https://codepen.io/gunnarbittersmann/pen/PEYYNM

Is your thought that we add a plugin that includes the CSS for them, and allows them to toggle it on and off? That would be neat! I am more than willing to help you with the plugin API Pattern Lab Node exposes

[Ryuno-Ki]

@bmuenzenmeyer Yes, exactly. I imagine a button in the top nav similiar to the Disco mode (love that one!). My first question would be, where to report it. Am I right here?

The wiki page explains how to author one plugin … I'd assume, for local development I'd fork that repo? How do you imagine the workflow?

[meyerweb]

I’m not familiar with the internals, but for what it’s worth, I definitely recommend using the SVG-based variant if at all possible. I’ve tested since that post, and vector-effect="non-scaling-stroke" seems to work for both embedded and external SVGs in Chrome, Safari, Firefox, and Opera. (I didn’t test Edge, so ¯\_(ツ)_/¯.) There’s a minor wrinkle where Firefox is slightly different than the others with external SVGs, but I don’t think it’s significant enough to kill the idea.

[bmuenzenmeyer]

@Ryuno-Ki

The wiki page explains how to author one plugin … I'd assume, for local development I'd fork that repo?

Forking plugin-node-tab is probably a good start. Understanding how that works, or perhaps plugin-node-uiextension, specifically how they use events is key.

I'd love to guide you through this process, for a couple reasons:

✨ the idea is awesome! 📄 I'd love feedback throughout on the plugin authoring experience so we can improve the documentation ⚡️ Pattern Lab Node converted to a monorepo last Friday and we are still in a bit of a messy place workflow-wise ⚡️ As part of the monorepo conversion, I've combined the styleguidekit-assets-default and styleguidekit-mustache-default repos under one banner, uikit-workshop

Someday I plan to create a plugin boilerplate repo too - perhaps this work can feed into that.

How about it?

@meyerweb Thanks for the input. That's a lot of well-researched info in such a short comment. 👏

[Ryuno-Ki]

@bmuenzenmeyer Okay, will go with plugin-node-tab then. Some questions:

1. Why don't you list @pattern-lab/patternlab-node not as peerDependency?
2. Why is there no package-lock.json in plugin-node-tab?
3. You may need to explain how to use npm link for local development (I'm going to explore the steps on how to do this).

Shall we continue discussion here or „move” the issue? (That is, closing here and open in another repository)