Pattern Library (originally Style Guide)

[sfrisk]

This is more in the sense of having a page with all the form elements/grids/components/etc on it that we can use to visually see all elements and their various states, rather than coding standards (although we should have those too)

Example of what I'm talking about can be seen here: http://getbootstrap.com/css/#forms

[arschmitz]

So like just a kitchen sink page to quickly view everything for consistency and quick ok everything is not broken type check? Or something more docs like? that page seems to be a combo.

We used to have something like this in UI http://view.jqueryui.com/1-10-stable/tests/visual/theme.html, removed it recently due to lack of use, but for this project I think it makes a lot of sense where having tests to look for something broken is a lot harder.

[sfrisk]

I kinda meant for more of a quick check to make sure nothing is broken, with not the documentation. We can do that later.

[arschmitz]

Awesome thats what i thought from your comment :+1:

[arschmitz]

for reference same thing from mobile http://demos.jquerymobile.com/1.4.5/theme-default/

[cbracco]

Yes I see this being very useful, there is one in normalize.css and I've got a very basic one that I have used for cardinal to just quick-check common HTML elements as I add style rules.

[cbracco]

Just stumbled across this, could be a useful resource: http://styleguides.io/

[sfrisk]

Oooo, nice!

[helen]

For WordPress I'm looking at having the style guide be generated from inline documentation as much as possible. There are any number of libraries that can help with that, like hologram or StyleDocco - I see several listed in the Tools section in @cbracco's link. We plan on having those pages be used for automated regression testing in addition to being a developer documentation resource. I've also taken to calling it a pattern library guide just to reduce confusion I've seen from a number of people.

[kristoferjoseph]

@helenhousandi is right on target from my experience. Calling it a pattern library is a very useful distinction since style guides have so many different meanings to so many people. +1

We wrote Topdoc because we wanted a flexible way to generate a pattern library from comments in the source. It works really well for the limited use case we were solving for. The markup is YAML based and the engine is just a bunch of regex parsing. It could be looked at as a prototype if people are interested. The feature requests in the issues might help guide some thinking on the subject as well.

[MichaelArestad]

Another autogenerated pattern library via inline documentation is Sassdoc I have yet to really test it, but it seems pretty good.

[cbracco]

+1 Sassdoc does look nice!

[sfrisk]

Since the original intent for this thread was to discuss the Pattern Library, I've created a new issue to discuss the use of auto-generated documentation over at #31

[yask123]

+1 Interesting idea

[trailofdad]

I've come up with a general list of UI components we would want to display in the pattern library. As mentioned by arschmitz in IRC, each component can have thousands of variations, but we will have to decide which ones we include in the pattern library. Each of these list items will have a sub list of component variations. Can anyone think of more categories that I am missing here?

• Optional Grid system
• Typography
• Code
• Tables
• Forms
• Buttons
• Images/Media

[sfrisk]

On top of that, with the beginnings of Phase Two starting this summer, the pattern library would also have to take into account the various UI components that will be added over the course of the summer. (Drop down navigation, accordion, various UI widgets, etc)