Webinar: Building a Live Style Guide

Back to Forums

Post Closed

Ruben Goncalves

Solved

Webinar: Building a Live Style Guide

Discussion

Announcement

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

14 Apr 2016

Ruben Goncalves

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

See solution in context

02 Jun 2016

MVP

yay, been building a live style guide as well, so looking for improvements :)

14 Apr 2016

Ruben Goncalves

Hi J.

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

Cheers,
RG

19 Apr 2016

Ruben Goncalves

Hi community!

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

Cheers,
RG

29 Apr 2016

Luis Camarena

Excellent. I registered and soon my team will be registering as well.

Looking forward to the webinar.

All The Best,

Luis Camarena
Asentex, Inc.

30 Apr 2016

Elize Rowe

Hello, will this be posted somewhere after the webinar has taken place? Thanks!

12 May 2016

Ruben Goncalves

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

16 May 2016

2 replies

Last reply 23 May 2016

Show thread

Hide thread

Wendy Wubben

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

20 May 2016

Elize Rowe

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

23 May 2016

Michiel Peters

Hope the recording went well cause I missed it.

20 May 2016

Ouen Worth

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

20 May 2016

Michael Anderson

Yes, does anyone know when this will be available? I missed it as well.

23 May 2016

Chris O'Reilly

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.

25 May 2016

Hugo Matthioli

Hey guys,

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

Thanks.

30 May 2016

Chris O'Reilly

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/

02 Jun 2016

Ruben Goncalves

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

02 Jun 2016

Pedro Remedios

Great work, Ruben!

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

Pedro

07 Jun 2016

Ruben Goncalves

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

08 Jun 2016

Pedro Remedios

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

08 Jun 2016

Daniel Reis

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

08 Jun 2016

Tiago Freitas

Hi there,

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

23 Mar 2017

2 replies

Last reply 03 Apr 2017

Show thread

Hide thread

Daniel Reis

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

27 Mar 2017

Tiago Freitas

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?

03 Apr 2017

MFR

Dear Daniel,

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

That would be very useful.

Thanks in advance.

08 Jul 2017

Gordana Jarcevic

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

01 Feb 2018

May Chai

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!!

26 Nov 2020

Alberto Ferreira

Hello May

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

Regards

28 Nov 2020