Update html and yml to support pill/badge design system

[gallexi]

Starting some work on the pill/badge design system, per discussion in #531

[gallexi]

@svinkle, @jenstrickland, these are my very first steps: just adding the code: field to each pattern, and starting to fill in a few. For the ones that aren't associated with a framework, do we want to do HTML, CSS, Javascript, depending on whether they actually use all three? Or maybe make a third thing, that's just like no framework, but nicer-sounding? 😁

[ericwbailey]

Looking really good so far, thank you!

"Vanilla" seems to be the go to term for frameworkless JavaScript, but it might be better to just stick with the underlying tech (HTML, CSS, JavaScript, etc.)? My thinking is if you don't know that Vanilla is an industry term, it could be confusion to beginners?

[scottaohara]

to @ericwbailey's point:
Anecdotally speaking, I've run into various junior developers who were utterly confused when I mentioned "vanilla javascript". wondering if i was talking about a new framework.

just "JavaScript" or "ES#" seemed to be perfectly understandable though.

That said, i personally like calling it "vanilla" so, as long as we just have something to indicate that vanilla = plain old no dependency javascript, I think we'd be ok

[svinkle]

To me, "vanilla" = "JavaScript". Anything not vanilla would be called by its name; jquery, angular, etc.

That said, I also think "vanilla" = ES6. I know some folks are still getting ramped up on ES6 features but pretty well all (modern) browsers have support so I don't think it's worth differentiating.

@galantlex What you've got here is great! It's what I was thinking as well. 👍

[svinkle]

We probably shouldn't merge until #568 is in.

[gallexi]

As a somewhat junior developer, yeah, I had no idea VanillaJS wasn't some other new framework 😁

I'll continue on with HTML, CSS, JS, etc, and I'll make sure to test integration with #568 before merging in 👍

[svinkle]

Stale PR: Please reissue with latest from gh-pages when available.