274
Views
26
Comments
Solved
Webinar: Building a Live Style Guide
Discussion
Hi there!

Over the past year, we have been creating, with great results, Live Style Guide with some customers. As such, we would like to share with you, our approach for creating an industry standard called Style Guides, through a free, in-depth technical webinar titled “Building a Live Style Guide”.


In this webinar:

  • What is a Style Guide?

  • How OutSystems Platform helps you create a Live Style Guide?

  • How to architecture a Live Style Guide?

  • How maintenance and UI productivity was highly improved, while ensuring brand guidelines?
    Yes, marketing team, will <3 you!


This 2 hour webinar was hosted on May 19th at 13:45 GMT / 08:45 EST and was delivered by Daniel Reis
EDIT: It's a wrap! Please find below the link for the recording and to the presentation:

EDIT 2: if you're a designer, you can leverage our sketch files available in dribbble as a starting point to your styleguides.

Cheers,

RG
mvp_badge
MVP
Rank: #10
Solution
Hi there,

Sorry for the late reply!
Joana has already posted the link, but I've edited the first post to have the links for the recording and the slides:
  • Recording: https://www.youtube.com/watch?v=JQrtRkquKOI
  • Slides: https://www.slideshare.net/DanielReis64/outsystem-webinar-building-a-live-style-guide

Cheers,
RG
mvp_badge
MVP
Rank: #14
yay, been building a live style guide as well, so looking for improvements :)

mvp_badge
MVP
Rank: #10
Hi J.

The webinar was post-poned.
We'll keep you posted through this thread, regarding next steps.

Cheers,
RG
mvp_badge
MVP
Rank: #10
Hi community!

This webinar is back!
Make sure to register in it!

Cheers,
RG
Rank: #12374
Excellent.  I registered and soon my team will be registering as well.

Looking forward to the webinar.

All The Best,

Luis Camarena
Asentex, Inc.
Rank: #12882
Hello, will this be posted somewhere after the webinar has taken place? Thanks!
mvp_badge
MVP
Rank: #10
Hi Elize,

We'll record the session, if the quality of the recording is good, then we''l update this thread and add the link to the recording.

Cheers,
RG
Rank: #2118
Rúben Gonçalves wrote:
Hi Elize,

We'll record the session, if the quality of the recording is good, then we''l update this thread and add the link to the recording.

Cheers,
RG
 Hi Rúben,

Is the quality of the recording good? I missed it and would like to see the webinar!

Thanks in advance,
Wendy
 
Rank: #12882
Thanks Ruben, any news on whether the recording would be good enough to be posted? Thanks!


Rúben Gonçalves wrote:
Hi Elize,

We'll record the session, if the quality of the recording is good, then we''l update this thread and add the link to the recording.

Cheers,
RG
 
 
Rank: #16381
Hope the recording went well cause I missed it.
Rank: #335
Great session guys.
 
Would it be a possibility or an option to create a UX/UI corner on the community that we can start contributing to as a recommended practice and solution sharing area? Not everything needs to or can be published to the forge as it is a general skill-set toolbox that is more valuable in this area.
 
As a start the CSS guide and this webinar could move there.
 
Here are some examples of points that I have come across along with my views:
 
There is a strong drive for the softer side of UI delivery and we keep finding ourselves trying to translate the UX and customer journey principles into an OS implementation. With Silk UI and the theme generators we can get 80% there in a structured and short time. The challenging part is closing the 20% without making a mess of the CSS and JavaScript. There is a very strong and robust structure to the theme CSS but trying to manipulate it becomes a dev session in the Chrome console of trying to untangle what can be changed and where it should be changed. A class API guide or the LESS/SASS files could be very useful.
 
To date, if I needed to create a widget it resulted in some reverse engineering and review of other widgets to get a recommended practice of putting it together. There are some definite guidelines that can be followed to do this and the method has improved greatly on Amsterdam and Bali with SilkUI developer widgets. Again this is not clear or very intuitive and requires some mastery of the environment to create widgets that are well structured.
 
There is a very clear architectural guide for building a solution in a maintainable and robust way using the 4 layers. What is not clear is how the UX architecture can exist within this landscape and what the trade-off's maybe in placing menu's in a dedicated module or in a Orchestration or End User layer module. All that is really clear is that the theme module must be in the Library layer. In my experience the UX supporting architecture can span all the layers and if it is not implemented correctly you will have a maintenance and re-use nightmare brewing.
 
With the way that OutSystems empowers the citizen developer and requires the UX designer to become more involved in development, I feel that it would be very beneficial to create a dedicated space to meet and discuss the pretty side of application delivery on OS.
 
Thanks
Ouen
Rank: #5260
Yes, does anyone know when this will be available?  I missed it as well.
Rank: #1330
We didn't miss it, it was really interesting, but too quick to follow it completely during the session.

Please put the recording up, hopefully soon.

Chris.
Rank: #26763
Hey guys,

nice topic! Any news on the recording being posted here?

Thanks.
Rank: #1330
It's up! Scroll down to "Previous webinars" and it's first on the list at the moment.

Chris.

https://www.outsystems.com/forums/discussion/17800/outsystems-training-webinars-whats-coming-up-and-previous-webinars/
mvp_badge
MVP
Rank: #10
Solution
Hi there,

Sorry for the late reply!
Joana has already posted the link, but I've edited the first post to have the links for the recording and the slides:
  • Recording: https://www.youtube.com/watch?v=JQrtRkquKOI
  • Slides: https://www.slideshare.net/DanielReis64/outsystem-webinar-building-a-live-style-guide

Cheers,
RG
Pedro Remedios
Rank: #0
Great work, Ruben!

How did you go about merging patterns_silkui.css and patterns_lisbon.css?

Pedro
mvp_badge
MVP
Rank: #10
Hi Pedro,

Not sure if I understand your question.
If you merge those two files, you'll the loose the capacity to update Silk UI app.

Let me know if this answers to your question.

Cheers,
RG
Pedro Remedios
Rank: #0
Rúben Gonçalves wrote:
Hi Pedro,

Not sure if I understand your question.
If you merge those two files, you'll the loose the capacity to update Silk UI app.

Let me know if this answers to your question.

Cheers,
RG
 In the video, you pasted CSS in the ACME_Theme that resulted in merging Patterns_SilkUI and Patterns_Lisbon. I wanted to know if you merged the two by hand or if you used an application.

Pedro 
 
Staff
Rank: #28399
Hi Pedro, The merging was made by hand, because the 2 css have different type of rules (one for patterns and special classes, and the other one for structure), they complement each other. So the merging should be straight forward. I hope that helps. Regards Daniel
Rank: #22087

Hi there,

Now with Outsystems 10 how can I create a general Style Guide that can be used in both web and mobile apps?

Staff
Rank: #28399

Tiago Freitas wrote:

Hi there,

Now with Outsystems 10 how can I create a general Style Guide that can be used in both web and mobile apps?

Hi Tiago,

OutSystems 10 have different runtimes regarding Mobile and Web.

For now, in order to have a sane architecture, you should build 2 different bases for each runtime.

Let me know if this answers to your question.

Regards


Rank: #22087

Daniel Reis wrote:

Tiago Freitas wrote:

Hi there,

Now with Outsystems 10 how can I create a general Style Guide that can be used in both web and mobile apps?

Hi Tiago,

OutSystems 10 have different runtimes regarding Mobile and Web.

For now, in order to have a sane architecture, you should build 2 different bases for each runtime.

Let me know if this answers to your question.

Regards


Okey, so is possible to have a sample style guide for mobile? Something like Silk UI Mobile Styleguide. I notice that when i do a "try it now" on the silk ui mobile, it opens a styleguide, it is possible to use it has our base guide, like the ACME?

Another question, to create our custom mobile theme, we just need to clone mobile patterns and use it as a theme? Why there isn't any info about mobile themes and their customization?   


Rank: #3530

Dear Daniel,


Is there a way to get the merged CSS files for Lisbon?


That would be very useful.


Thanks in advance.

Rank: #25586

Hi Daniel,

I can not figure out how did you create these e-spaces: Rep_patterns en Rep_Styleguide. Can you give some more help here. Thanks!

ScreenE-spaces.png

Rank: #12186

Hello, Daniel,

Not too sure the reason why is that when you do the merging of the CSS files, you take away the Text Formating?

How will it goes if we keep that one?

Thanks!!

Hello May 

You wake up an old discussion from more than a year ago. Better start a new one.

Regards