I am trying to figure out how the Live Style guide works.
I downloaded the Reactive Live Style Guide template and created and app from the template, but it is equal to a blamk app. How do I get the preview patterns in there? DO I have to code the entire thing myself?
I downloaded the ACME example and in the Style Guide is a lot of code written, so do I ahve to write all that myself? I thought the idea was that the Live Style Guide will give you all the OutSYstems UI patterns so you can test what they will look like in your theme, now I ahve to code an entire app to get this done? I can just as well go and code my actual app than waste that time?
THere is also no clear documentation as to the steps and actual work to achieve this, I have watched 4 videos and all give Live Demo with the Live Style Guide apps already created and do not really go into the steps to do this.
Is there documentation to get these steps for a novice please?
Hi Elize,
Did you already check out the outsystems.com/learn site regarding this topic?
and there is also: https://www.outsystems.com/videos/build-live-style-guide-training-webinar/
Regards,
Daniel
Hi Daniel,
Thank you, yes I did watch the first video, but I stopped when he cloned the Silk UI, because I want to create it for React and the Silk UI is not applicable, but I will go back and finish it, perhaps there are some clues.
The second one I did not watch because I am not adapting an existing style guide, but again perhaps I should watch it, there may be some clues as to what the actual steps are.
You are right, i am pretty sure there is one for OutSystemsUI, funny though I cannot find it easily.
I will see if someone else knows.
In the video
he uses a Rep_StyleGuide with a full demo of all the UI patterns, where did he get that from? That is the question. Do you have to code that yourself?
OK, I think he does say you can copy what he did in the ACME Style Guide, so it seems you have to code the style guide views of all the patterns yourself.
Please refer the below link and see if it works for you.
https://success.outsystems.com/Documentation/11/Developing_an_Application/Design_UI?_gl=1*5mprp4*_ga*OTA2NjY2NzE5LjE2MDEwNDAyNjg.*_ga_ZD4DTMHWR2*MTYxMDU0NTI0Mi4yNDEuMS4xNjEwNTU3NDQyLjU3
Thanks & Kind Regards,
Sachin
Thank you Sachin,
This is not a Live Style Guide, I am not sure what they are trying to demonstrate here, they change the theme CSS directly in Chrome inspector and copy it back to the app? That is not related to what a Live Style Guide is though.
On the 2020 NextStep Craig St. Jean, OutSystems MVP, also gave a presentation on how to create a live style guide:
https://www.outsystems.com/nextstep/list/creating-application-templates/
as well as 2018 ODC:
https://www.outsystems.com/training/lesson/1704/creating-style-guides-in-the-blink-of-an-eye-with-outsystems