Add a "preview switcher" to Web UI #176

ugreen opened this Issue Nov 9, 2016 · 4 comments


None yet

4 participants

ugreen commented Nov 9, 2016

Hi there. I use Fractal for our styleguide where I work. The company has a sub brand with its own site. The sub brand is more or less a mirror of the main site, but with a different color scheme. Generated from the same source files, markup, js and sass (with different sass vars obviously). We would like to document the components from both brands in the same styleguide.

So what I'm looking for is a way to generate a 2nd set of rendered components for the sub brand, but where the "@preview" use another stylesheet. And I'd like to have a "Toggle brand" button in the WebUI when viewing components. The solution should also generate the actual html files and not just switch the stylesheet with JS.

Can you @allmarkedup or someone else reading this, point me in the right direction. I just need some pointers on the best way to implement this feature.


I'm also interested in something like this as there is multiple assets where I am at.


@ugreen currently I don't think that there is a way to implement what you need I'm afraid. You could add a stylesheet switcher into the UI easily enough but it would only be using JS to swap out the stylesheet.

Out of interest, why would a JS solution not work for you?

ugreen commented Nov 17, 2016

@allmarkedup, because then I wouldnt be able to provide a link to a static page with the sub brand to the stakeholders. And I guess it would also make visual regression tests harder on the sub brand pages.

I guess its possible to make some js on the preview layouts, that looks for a url parameter and switches the stylesheet accordingly. And then just add the param to the links we hand out. But it doesn't feel that elegant :)


jumping in on this issue... We're going through the process of adding new design patterns to the existing (slightly maligned) component library (not in Fractal (yet)). The main requirement for patterns to work in the old codebase is to have their own set of divs around them to adhere to the CSS. It would be neat if I could 'switch' the preview so that we can have one codebase - the new clean stuff and the old stuff that's being refactored. This would be great as a build option too.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment