A built in styleguide

I was thinking that this could be useful when working on sites that are being exported for use in a cms, wordpress for a example.
I have thought about making one page as a style guide when I making websites but never actually done it. Now I exported one of my designs in Webflow and started to make a wp-theme. WP maybe offer things that you didn’t think of designing for in WF and you end up go back to WF change some thing and then back to copy and pasting into WP or change the css of course…

For example that page can include all the headings. If for example h3 is not styled I will see that quickly on that page and will be able to add a style to before exporting.

I know WF is not made for this kind of stuff to begin with I’m throwing out ideas.

Maybe some one already have a good solution for this already.

Hi @jorn , do you mean like a button you could press, to open a window that shows you a preview of all styles in your site in a list format? I like that idea… You can of course preview in preview mode, but you are thinking of a quick reference of all styles in your site that have been set, and show in a list somehow, right?

1 Like

Yes sort of, could be a page with all the styles on top of each other to look at visually somehow. And it should show html elements I didn’t style that is likely to show up in a cms that a user will maintain through a wysiwyg-editor for a example. Like:

h1

h2 (no style) h3 (no style)

h4

h5(no style) a(no style) and so on

Handy but maybe not super important =D

Currently I already do that, haha: http://clickemforma.webflow.com/css

could be possible to edit the css directly, (without being able to delete anything webflow, but adding), so would to create some segments hows:

a {}
. style1 .style2 {} (afects style2 only when inside the style1, no need to create a new style)
. style1, .style2, .style3 {}
{!important}

I do not know how much it can break the site if you miss something, etc… Just a thought.

1 Like

Well, I think that if something has the possibility of saving time and effort, and helps to bring clarity to the design, then I believe it to be an important idea to push :smile: We’ll see what we can do! Cheers

I really like the idea. I would imagine it would be a styles manager in which you would visually manage all the applied styles and would be able to copy them.

Cheers,
Martin