Skip to content

Instantly share code, notes, and snippets.

@davatron5000
Last active August 29, 2015 14:00
Show Gist options
  • Save davatron5000/5dcb5d026282c89c48f5 to your computer and use it in GitHub Desktop.
Save davatron5000/5dcb5d026282c89c48f5 to your computer and use it in GitHub Desktop.
Pattern Lab Thoughts

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:

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.

@levito
Copy link

levito commented Apr 23, 2014

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!

@levito
Copy link

levito commented Sep 24, 2014

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

I'd love to hear your feedback!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment