demo page for working with CSS

[clarkbw]

As we want to make changes to the reader mode CSS it would be helpful if the UX team had an easy way to view the reader mode content and edit the CSS live so they can make adjustments using familiar browser developer tools.

I'm thinking of the WordPress Theme Unit Test as inspiration, which gives designers a view into all element variations a WordPress theme needs to support.

My initial idea was that we use a gh-pages branch in this repo to create a mozilla readability page on github with variations for Android, iOS, and Desktop. While this repo doesn't contain the CSS and doesn't want pull requests against it for CSS issues I still think this repo would probably make the best central place for the CSS work. Perhaps the gh-pages can make it very clear where and how to file bugs for each platforms CSS issues.

A simple script could pull down the various CSS styles to the gh-pages branch. Marking the last time the CSS styles were updated would be a nice thing.

Here are the current locations I'm aware of:
Desktop CSS
Android CSS
iOS CSS

I'm not sure what the best method would be to create a test page. Generating one from a complex HTML page might be a good option that could update as the JS code is updated.

Updating the page would be a manual process, but hopefully with a simple gulp or similar script it could be a quick run and push to the branch to update things.

Thoughts?

[leibovic]

This is a good idea, I can try coming up with a solution here. Would you also want to be able to tweak the styles of the controls? If so, we would probably need to figure out how to load the JS we use as well, since some of the controls are generated dynamically.

Desktop/Android share the same HTML/JS, so their styles should work equally well on the same mark-up, and I think @st3fan kept things pretty similar for iOS.

We can start by just taking the HTML file we use currently, and loading a parsed article into it. I agree it would be nice to be able to quickly iterate on the CSS in a gh-pages branch, but if we want to be testing out edge cases on all sorts of different articles, it could be better to add this support to @n1k0's readable-proxy repo, so that we can test out the CSS with any arbitrary article.

[leibovic]

I also mentioned this to @clarkbw on IRC: our UX team can always use the developer tools to play around with tweaking the CSS of the reader view built into Firefox (you can do this remotely for Android, and I bet you can even do this for iOS with valence). And then if there are small changes they would like to see made, they can file a bug to have a developer whip up a quick patch. This is probably the best short-term solution to seeing improvements in the product.

[clarkbw]

Closing this out, doesn't feel like we're going to get to this and I think margaret's suggestion above works well without requiring extra work.