Synchronize pattern lab CSS and prototype

[daggerhart]

This is my first look at a pattern lab project, so I may be in over my head. Thanks to the readme I believe I am up and running, but not clear on what I should expect next.

Here is what I'm doing:

• I have gulp watching & compiling sass.
• I have the pattern lab server running.
• When I make changes to a pattern, I run php core/console --generate manually to regenerate the pattern lab
• My changes appear on the pattern lab server.

My question is: Should I be expecting the changes to also re-generate the prototype?

Maybe this is a fundamental misunderstanding of the pattern lab workflow. I'm not clear on how to go from "my change looks good in the pattern", to "replicate that change in the prototype". Should this be a manual recreation of the changes in files/css/style.css?

Thanks

[nerdstein]

This is a great question and one I have been pondering myself.

At this point in time, the markup/CSS/JS in pattern lab is decoupled from the prototype. But, they don't have to be. In fact, it makes sense to eventually pair the two.

The prototype was handed off from a designer I paid to mockup my D8 site. I could see some enhancements to this workflow in which Gulp pushes an updated CSS file to the prototype CSS and one would manually update the markup in the prototype's HTML files to reflect it.

But, for now, one would make changes in PL and also in the prototype (which I think is a great way for a quick "spot check". I'm also trying to see how I can wire up GitHub to rapidly preview the prototype changes in a branch. It may be optimistic to get PL generation without more CI tooling around it.

[nerdstein]

@daggerhart - also, thank you for looking at this :)

[daggerhart]

Ah, great! Good to know it's not just me.

I can imagine a future gulp task that builds a new prototype-like structure for easily comparing the existing prototype to the newly compiled output for spot checking. Keeping the existing prototype might be preferred as opposed to overwriting the prototype each build?

We'll figure it out. Happy to help and learn new stuff along the way!

[nerdstein]

I'd like to reopen this to maintain the history and plan some next steps around this.

I've edited the title accordingly.

[nerdstein]

Two things I see happening:

1. We need to get all the elements out of the prototype and into the pattern lab initially. Otherwise, we can;t see the design

2. I wonder if pattern lab has a way to export pages. At that point, we could just build them in PL and export them to HTML files for visual spot check

[nerdstein]

It would be swell to also enable some Github based HTML preview.

I did some research on Github pages and this assumes some fixed branch configuration. It wont work for any fork and any branch previewing changes.

This approach might work: http://htmlpreview.github.io/

[nerdstein]

Boom:

http://htmlpreview.github.io/?https://github.com/nerdstein/nerdstein-design-library/blob/master/prototype/index.html

[nerdstein]

Recommend adding a smoke testing step into the documentation and, should consider adding a GitHub pull request template with the user-ID, branch, and filename as tokens to perform easy smoke testing

[nerdstein]

Pattern lab has the ability to export all of it's patterns:

http://patternlab.io/docs/advanced-exporting-patterns.html

I don't see a way to export only pages, but pages are included in such an export.

Steps: php core/console --export

This exports files into the "export/*" directory, which can be configured. Pattern Lab ships with a .gitignore that adds export by default. This means it's not versioned.

Recommended next steps:

1. Change pattern lab config to export to a new prototype directory in root of repo
2. Add documentation to perform an export when making changes
3. Firm up the github pull request template to include sample links to the new export directory

[nerdstein]

@daggerhart - any recommendation to automate the "export" on watch? Or, something similar?

[nerdstein]

@daggerhart - Can you review https://github.com/nerdstein/nerdstein-design-library/pull/24?

[daggerhart]

This all sounds great. Once I have a moment to review and clean up #23, I think we can easily add another gulp-shell command to automatically export on watch.

-- you're moving fast 😀, will look at #24 now

[nerdstein]

:)

[daggerhart]

Looks like it's working well for me 👍. Ran into one tiny thing related to #23 that I'll post about there, but otherwise this is great and makes a lot of sense.

Just to clarify, with this in place:

1. the first goal would be to have html/patterns/04-pages-01-sidebar-sidebar/04-pages-01-sidebar-sidebar.html match prototype/index.html.
2. Once that is done, we remove the prototype folder and rely on html/patterns/04-pages-01-sidebar-sidebar/04-pages-01-sidebar-sidebar.html for visual spot checking

-- or something like that?

[nerdstein]

Yes.

There is another page, a blog detail page, that needs moved into PL as well

[nerdstein]

That would warrant an update to the pull request template, as it would need to be scanned for design-specific regressions

[nerdstein]

@daggerhart - i need to rebase #24, but do you think it's ready to merge?

[daggerhart]

I believe so. Had no issues when I tested early, aside from the php notice

[nerdstein]

This is merged, closing