Netlify-cms: Feature Request: Minimal default styles for preview pane

[0x80]

Currently the preview pane is completely un-styled, and you are expected to add your own.

I think for starters and minimal use-cases, it would be useful to include some default styling. For example setting the fonts, paddings and margins to that of the rest of the interface, and making images responsive.

Not everyone is interested in providing custom styling but the un-styled defaults are unusable. I think this is a bad first impression for new-comers too.

[ghost]

I would second this. I have been trying and trying and trying to wrap my head around how the netlify-cms-example-site (with the coffee) does it, but it's just impenetrable, and there is no real guidance on how to achieve it...

[erquhart]

Yeah that's fair, agreed. @misterr8472 you can reach out in Gitter if you need help with custom previews. They're React components, but the current documented approaches don't use JSX, something we need to address.

[ghost]

Thanks, appreciate it. Re-reading my comment I realise it sounds more harsh than I intended. Perhaps my lack of knowledge in React is contributing here also. I'm comfortable in HTML, CSS and JS and I find the Netlify CMS to be an amazing solution for static sites.
Perhaps what's needed is a really, really basic setup guide to just get two or three custom previews working with minimal complexity and then build from that.
If I figure out how to do it, I'd happily even write some examples.

[erquhart]

Sounds great! Didn't think your comment was harsh at all, and agreed that React is probably the disconnect. Check out the React tutorial to get a basic feel. Again, happy to help in Gitter!

[damassi]

The unstyled preview pane is a bit confusing -- its easy to think that something has been misconfigured.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[erquhart]

One complication for this feature: the preview pane primarily exists to show how the site will look - it only makes sense when customized with your sites markup and styling. If we have default styling in place, we need a way to deactivate it if customizations are provided.

Maybe default styling is only applied when both of the following are true:

• registerPreviewStyle() has not been called
• the current entry/collection does not have a custom preview template