Create a sister site that lists snippets/addons for h5bp

[nimbupani]

Suggested by @necolas.

Basically code that h5bp recommends using along with h5bp.

It could be a collection of code like:

1. The most elemental grid style snippet
2. recommendations for formalize, bootstrap with h5bp
3. script plugins we recommend you use with h5bp
4. code for regular patterns that would work with h5bp (e.g. tabbed nav/slideshows)

Lightboxes will _NOT_ be tolerated.

What do you all think?

[necolas]

I wasn't suggesting that we recommend other projects. That could be quite tricky.

My thought was more along the lines of creating a side-project of boilerplatey components - common, simple, independent, reusable, skeleton components that are a common sight on the web and could be bolted on to H5BP or any other boilerplate/personal template.

One example would be the "media object" that Nicole has written about and that Facebook use. Another would be a generic dropdown component. Or horizontal tabs. We avoid as many stylistic decisions as possible and focus purely on providing a robust structure and behaviour for simple components. Then people can apply their customisations and let the component inherit their site's global styles.

It could focus on a small collection of them; simple things rather than every component every conceived. And definitely avoiding complex things like lightboxes and modals that are already large stand-alone project.

I don't know if it's a good idea, or if something like this already exists. But, there it is.

[frankpf]

Mmm, something like "plugins" to H5BP (or any other boilerplate, as you said)?

+1, very nice idea.

EDIT: An example of this thing is inuit.css and its plugins ("igloos").

[chuanxshi]

i think it's good to have snippets like tab views, slideshow etc, as long as we don't follow the existing ones with theming.

I don't think any serious UX designer/developer want to customize a theme.

A simple, elegant, flexible skeleton for common JavaScript usage will definitely speed up development. Time-saving without killing others' creativity and freedom to adapt.

Shall we do that from scratch or base on an existing framework like jQuery etc? Or both.

[necolas]

EDIT: An example of this thing is inuit.css and its plugins ("igloos").

Kinda, but I don't think it should extend H5BP. It should promote best practice, like not triggering dropdowns on hover, and use JS where appropriate. I imagined it being quite a bit more abstracted too: a breadcrumb or a set of tabs is just a horizontal list that is given a specific purpose and look; the dropdown behaviour shouldn't impose the use of specific HTML elements (just a structure) on the developer; etc.

Shall we do that from scratch or base on an existing framework like jQuery etc? Or both.

Good question. cc @paulirish @mathiasbynens

[addyosmani]

Some thoughts:

Whilst I love the idea of taking a pragmatic approach to creating components from base or vanilla JS, I think that there's a large portion of the H5BP userbase that would keep jQuery in there and be using it on their pages anyway. Probably a good idea to take advantage of that (if that assumption has legs).

One also has to be careful when defining new boilerplates for components to ensure it's clear what the end goal is. Are we looking to define new optimal boilerplate plugins for things (e.g tabs) or are we looking to recommend compact, popular pieces of code already out there that have tried solving this problem in the past?. I'm sure no-one wants to re-invent the wheel but also remember if we're doing things from scratch that comes with docs, maintenance costs etc.

For what it's worth, I don't personally mind lending my experience in this area if it can help at all. The idea of a snippets side is pretty rad (especially if it's either hosted out of GH or based on github gists/repos that can be forked and improved) - prolly obvious to say that, but I've seen way too many snippet sites that are just about including a little code sample in a page which then has no trackability back to improvements made by others.

my two cents :)

[necolas]

I think that there's a large portion of the H5BP userbase that would keep jQuery

Agreed

Are we looking to define new optimal boilerplate plugins for things (e.g tabs) or are we looking to recommend compact, popular pieces of code already out there that have tried solving this problem in the past?

My idea was to bundle together simple components that are essentially just common, structural patterns - button, horizontal nav, "media block", forms. Keep things simple with no predefined "theme" so that they can be used whatever the final visual appearance. Most would probably be primarily CSS, but something like a reusable dropdown would need JS. We could avoid larger things like JS tabs, modals, etc...because there are already projects out there that have tackled those problems.

Would be great to have you involved. I was also thinking a GH repo, possibly under an h5bp username. We'd have to plan how to organize things and what to start with. Starting out simple is probably the best way to see where it goes.

[nimbupani]

Please feel free to start sharing ideas here: https://etherpad.mozilla.org/h5bp-snippets

[addyosmani]

Added some thoughts to the pad. I notice that there's a snippet section and a bootstrap section - are we thinking those are going to end up as two independent projects or would they fall under the same thing?

[necolas]

Closing. We've created the repo at h5bp/h5bp-ui