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
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:
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.
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.
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:
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:
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:
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!