Sister site: Style Guide, or Atomic Style Guide / Pattern Library

[BrendonKoz]

I've just been thinking recently about "live" style guides and how, if it would be used on a live site, doesn't it make sense to implement it into the system (CMF/CMS) that would be maintaining the content, as well?

I'm curious if anyone's yet done this? Either had invisible sections of their site devoted to a style guide for showcasing various components, modules, elements, etc., or even configuring a multi-site implementation of PW for this purpose?

I haven't thought through the technical side of how one might implement this, only had the thought itself. Gantry is a framework, built in to some other CMF/CMSs, for something similar to this purpose (with additional features included) - which I originally had thought would be awesome to bring to PW, but realized it was out of my skillset. However, just a "simple" Pattern Library or Style Guide? That just might be possible.

[pwired]

If you use the delayed output strategy you can use a placeholder in _main.php to output your layout for each page. Set values for a default style in _init.php. Then on the template files for each page you can override the default values and create a new style for each page as you like. You can maintain the styles in a single folder under templates. From here you are not far from making your own style selector/guide.
https://processwire.com/docs/tutorials/how-to-structure-your-template-files/page4
(at the bottom)

 

 

 

 

 

[Macrura]

On 8/15/2017 at 6:27 PM, BrendonKoz said:

I've just been thinking recently about "live" style guides and how, if it would be used on a live site, doesn't it make sense to implement it into the system (CMF/CMS) that would be maintaining the content, as well?

I'm curious if anyone's yet done this? Either had invisible sections of their site devoted to a style guide for showcasing various components, modules, elements, etc., or even configuring a multi-site implementation of PW for this purpose?

I haven't thought through the technical side of how one might implement this, only had the thought itself. Gantry is a framework, built in to some other CMF/CMSs, for something similar to this purpose (with additional features included) - which I originally had thought would be awesome to bring to PW, but realized it was out of my skillset. However, just a "simple" Pattern Library or Style Guide? That just might be possible.

The way i see Gantry is like a really developed 'frontend api', which seems to use an mvc-ish model; I use a frontend api based on the wireRender pattern which is in some way similar to the Gantry setup. In PW, it could be done, you'd end up with several interconnected modules that simplify frontend needs, like global settings, managing per-page assets, injecting stuff (js, schema, meta etc) into the head.. There are already some frontend api modules now like Spex;

For just having a styles guide page, that would be easy, you could just have a pure html page showing all of the demo stylings, sections, shortcodes and whatever; or have a hardcoded demo site on a subdomain for the clients to reference.

 

[gmclelland]

I also had some interest in setting up a living style guide with Patternlab and Processwire using the TemplateEngineFactory module and TemplateEngineTwig module.  I haven't gotten around to creating a custom module to add the twig namespaces.

Here is where I explain the ideas behind it.  There seems to be a lot of talk about it right now in the Drupal community. 

 

[BrendonKoz]

Thanks all - was mostly curious if anyone had yet done it, and their decision over how it was implemented. Very much appreciating the discussion!

[LostKobrakai]

I've done some websites with fractal directly using the style guide templates (twig) from within processwire. I've written a (german) medium post about it: https://medium.com/webdevs/living-styleguide-mit-fractal-und-processwire-e900f05e0b79 But I'm sure with recent updates to fractal stuff might no longer work exactly as explained.

Overall it's been a nice experience to try it and for larger organisations / projects I'd expect it to make more sense. Our projects were kinda smallish and we're two people, so the overhead seemed to be a lot. As all templates came from the style guide I had to have all different versions of pages in it, so it's really easy to communicate with people, as you can view all of them in the style guide without actually having the real website in that state or getting it there locally (the website had different stages for an event registration). 

[BrendonKoz]

I remember (now) reading about this. I had completely forgotten about it. Thanks for sharing it again!