Pattern Lab Thoughts

pattern-lab.md

I love PL and the work that Dave and Brad have been doing. This is just random bullshit I've been thinking after a week of Pattern Lab use. Just

1. Just a source directory?

I've found that working on my current Pattern Lab, the only directory I really need is the source directory. That makes me think that all the config|core|extras|etc folders could not exist or be hidden from the user. That way a generic Node process that could be used by grunt, gulp, broccoli, etc might be beneficial. The "engine" is hidden from the user. Then updates could be seamlessly injected where now it'd be a bit of a manual process.

I think the simplicity of just having the files you're working on decoupled from the technology would be great for onboarding new users. Edit your source files (now at the project root) and point a nodeapp/grunt/gulp task at it.

It feels like a question of do you want it to be WordPress for patterns (engine coupled) or a Jekyll for patterns (engine decoupled/hidden).

Relevant links:

• PatternLab Jekyll

2. YAML/JSON instead of Ordinal Folders?

I've wondered if it's easier to just update some JSON instead of keeping folder and file names numerically prefixed. If you delete a pattern, it's a bit of work to re-ordinate all the other files (lots of git changes, etc).

This would maybe help in up-cycling patterns into a larger system (which is a lot of people's dream). I can then tell a backend developer to include() the molecules/global/pagination.mustache instead of molecules/02-global/03-pagination.mustache/, where the numbers seem subject to change. PL could then start existing within a directory of a larger system.

3. Extensions?

I talked with Brad about this, I know it's on the roadmap. I wonder if Jekyll's _plugins structure might be good here, and those are little web components (HTML/CSS/JS ... Polymer?) that inject features in to the style guide header. Extensions could be included/excluded using YAML/JSON as well.

A bit to unpack here but I wanted to offer my two cents…

1. Just a Source Directory

I think we're just going to have to accept that there's a fundamental difference to how (I feel) the PHP world handles system-wide installs vs. node/Ruby. I think the examples given, Wordpress vs Jekyll, really highlight this. We shouldn't be saying PL works this one way across platforms but, rather, it should default to some sort of "best practice" for a language. If it's gem install patternlab and then you just have the commands? Two thumbs up. Same with node. If the node version should follow some other best practice and leverage the strengths of that platform we should do it. We (and the maintainer, Brian) do accept PRs ;)

Frankly, that sounds to me like it's small potatoes on the vast list of questions that fall out of the larger question, "How do we think of maintaining a cohesive (not necessarily identical) project across platforms?"

2. YAML/JSON instead of Ordinal Folders?

Ordinal folder/patterns are not required to use Pattern Lab. At least the PHP version will work without them. The file system acts as the database for the nav so… if you want things to come in a certain order (e.g. templates before pages) you have to go for the numbers. As Brad noted, he matched it up to his previous version. But it can be dropped whenever. JSON sounds… indirect but it's possible to generate a JSON site map that gets hand-edited into the order one might want. Just have to make sure to keep existing orders during each build of the JSON to add new patterns.

And I can see you haven't seen pattern states (yellow dots on the home page template are a good example) and pseudo-patterns (primarily used for offering varied versions of a template/page) as they introduce more work on the file system.

3. Extensions?

Extensions/plug-ins are something that I've had rattling around in my head for a while. I just haven't spent on a ton of time on figuring it all out. Brad would say pattern states are a good candidate for a plug-in but I see that crossing so many parts of a system… it's tough to figure out how to deliver all of that and how to install it. I'm happy to follow the direction of someone else. And we can definitely split extensions between pure front-end and something more complicated like pattern states. Tackle one problem at a time. The QR code feature is a good one to use a test of modularizing the front-end specifically.

Actually, I'm shortly going to work in KSS support and maybe that's a good time to step back and think about how to do it in "plug-in" fashion since it, like pattern states, will touch on everything and only a subset of people will want to use it.I finally just did that for back-end engine support to allow patterns to be written in Twig.

4. Developing a Spec

What wasn't asked but seems to be an undercurrent to all of this is… what is Pattern Lab's (in general) spec? What qualifies as being Pattern Lab-compatible? Especially when it comes to being cross-platform and following a platforms best practices/norms? Right now it seems like there's a few… assumptions about how PL works based on docs, looking at the demo, and maybe some implementation aspects inherent in the current node version. I've really dropped the ball on a) developing a real spec and b) communicating changes to a spec. Brian has been left to pick apart and play catch-up on the PHP version. That isn't easy.

I'll take some time after I get back from holiday and write out what needs to go in and what needs to come out to be at the current version of PL. From there we can pick apart what's nice to have and what's necessary for delivering the core of PL (or a modular pattern builder thingie). That is developing and re-using patterns layered within the "viewer" for team and client review. We can then review where that leaves the node version and what we need to do to best push that forward to meet "node best practices" and the spec.

Thanks everyone for the input and feedback.

Hi all. I super-duper appreciate the thoughts above. I myself have struggled with how best to use PL - and have found success with a number of the use-cases Brad mentioned, as well as showcasing it as a more modern workflow over static PSD throw-over-the-wall-syndrome.

PL-node has always been feature-poor compared to the PHP version. I contemplated naming it patternlab-grunt, as some have indicated it could be considered an unnecessary dependency. Some decisions need to be made, however, while finding balance between approachability (see here) and cutting with the grain of current front end dev practices. The same thought was given to shipped preprocessor support if I recall.

That said, I really welcome the larger conversation, am excited to see what @dmolsen and @bradfrost consider the PL Spec, and really do welcome PRs! There is certainly a lot of ground to make up, and some basic maturity issues that need sorting out :)

Short term PL-node roadmap:

1. dependency, grunt and npm cleanup
2. documentation improvements, including contribution guidelines
3. datamodel refactoring, more dry, test-driven

Thanks!

while finding balance between approachability (see here) and cutting with the grain of current front end dev practices.

Well said, @bmuenzenmeyer. This balance is something that @dmolsen and I have taken very seriously right out of the gate. There is certainly the potential to make a really robust Pattern Lab that relies upon relatively advanced tools. But in doing that, you end up giving up that approachability to a whole lot of folks. Kudos to @dmolsen has done such a good job at keeping the dependencies to a minimum (it only requires PHP, nothing else).

What I would love to try to solve is a way to create as robust a system as humanly possible while still being approachable to folks who aren't fluent in Bower, Grunt, and the like. I enjoy playing the part of the idiot, largely because I am one :) So the goal is to create a tool that's simultaneously advanced yet approachable to beginners. I like that challenge.

IMHO PL is the patterns, not a build system (or shouldn't be), when there are much better existing alternatives that can accomplish what you need. So if the goal is to help PL become a better build system, I'm happy to give feedback if it's desired. But there probably isn't much more I can offer.

Every single thing that has been listed on this gist can be done by Assemble out of the box. Just as PL is about the patterns, Assemble is focused on being able to build components into any pattern you need. If you want to build PL with Assemble, just use the PL helpers. If you want to build YUI docs, use a YUI plugin, if you want to build OOCSS, use a plugin, and so on.

Shifting gears, on the topic of deps, IMO keeping dependencies to a minimum isn't a goal unto itself, it needs to be balanced with what needs to be accomplished. Just as developer convenience is more important than micro-performance, shaving off a couple of dependencies at the cost of losing access to context in deeply nested components would be a bad trade-off. I guess my point is that deps shouldn't even be a part of this discussion. Not until the goal is reached, then we can look for ways to optimize. just my 2c

Hi Guys! I'm just building a styleguide system similar to pattern lab.

TL;DR:
Everything is a remix. Pattern Lab was almost exactly what I needed, and what the OP is asking for is just what I built over the last few weeks - without knowing about PL when I started. Seems like we all share the same mindset and ideas...

The aims I had in mind was to recreate the structure of a "classical" styleguide without its drawbacks and with maximizing the benefits of real code, so:

• address the needs of the client, template devs and designers
• document how things work in real-life - with interaction => for the client
• document how to build HTML so it uses existing modular styles => devs working with templates
• document what building blocks are already there and how they work together, to enforce consistency of the design and help => designers
• make the whole thing really easy to maintain for us frontend devs
• and: use it as a build-tool for frontend development (like Grunt/Gulp, with things like browserify, less, sass, icon font generating etc. easily added)

Trying to build a living styleguide, I first stumpled across StyleDocco, KSS, Sassdown and the likes. Easily integrated into Grunt/Gulp, but the output was too technical to recreate the structure of a "classical" styleguide. Also, it documents the CSS rather than how to build the HTML.

So I started thinking about a usable structure. I still didn't know about Pattern Lab then:

• have a folder structure which will represent the styleguide navigation (like PL)
• organize the order of items - with TOC files or via file name prefixes (also like PL)
• provide a way to test patterns in different viewports for responsive design (hello again, PL)
• have the documentation right along with the pattern (buttons.html + buttons.md) to document the usage (like @davatron5000 suggests)
• optionally: modify single patterns with custom CSS for creating styleguide-only things (like color swatches, grid mixin documentation, font listings etc.) => I use an Iframe for each pattern to encapsulate the CSS (like StyleDocco et al)

So: each pattern consists at least of an HTML sample rendering, HTML source, and optionally usage documentation as markdown text and/or CSS.

I built the whole thing based on gulp-webapp and implemented all of the things. THEN I stumbled across Pattern Lab! Whoa! Someone did it before! And it's the brainchild of Brad Frost :) - how could I miss that!? Atomic Design FTW! The PL concept is basically the same. I just didn't think of nesting patterns inside of each other. So I added that. But there were things I missed in Pattern Lab - basically things the OP thinks about:

• the documentation is too separated in JSON files
• no frontend build tooling
• some essential design differences

Now: should I contribute to Pattern Lab? Yeah, basically I should. But it's not that easy: I'm a PHP analphabet. So: patternlab-node? Hm, the PL structure is too different and my attempt already had reached a similar progress. Fork it and bend it to a whole new direction? It would be too different, so I continued my thing.

Now that I see that our needs and ideas are so similar, I will open-source my work and see how we could make one big thing out of it!

Thanks @bradfrost, @dmolsen and @bmuenzenmeyer for your inspiring work! In the end I copied a lot from you - well, you got it just right in so many points!

Sorry for the long post, I just couldn't resist.

Cheers!

Here it is: https://github.com/levito/living-styleguide

I'd love to hear your feedback!