Ruben Goncalves
mvp_badge
MVP
Rank: #10
274Views
26Comments
Solved
Webinar: Building a Live Style Guide
Discussion
UI
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
7
0
on 2016-04-14
Copy link to comment
Ruben Goncalves
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
See solution in context
0
0
on 2016-06-06
Copy link to comment
J.
mvp_badge
MVP
Rank: #14
yay, been building a live style guide as well, so looking for improvements :)

1
0
on 2016-04-14
Copy link to comment
Ruben Goncalves
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
0
0
on 2016-04-19
Copy link to comment
Ruben Goncalves
mvp_badge
MVP
Rank: #10
Hi community!

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

Cheers,
RG
0
0
on 2016-04-29
Copy link to comment
Luis Camarena
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.
0
0
on 2016-04-30
Copy link to comment
Elize Rowe
Rank: #12882
Hello, will this be posted somewhere after the webinar has taken place? Thanks!
0
0
on 2016-05-12
Copy link to comment
Ruben Goncalves
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
0
0
on 2016-05-16
Copy link to comment
Wendy Wubben
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
 
0
0
on 2016-05-20
Copy link to comment
Elize Rowe
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
 
 
0
0
on 2016-05-23
Copy link to comment
Michiel Peters
Rank: #16381
Hope the recording went well cause I missed it.
0
0
on 2016-05-20
Copy link to comment
Ouen Worth
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
6
0
on 2016-05-20
Copy link to comment
Michael Anderson
Rank: #5260
Yes, does anyone know when this will be available?  I missed it as well.
0
0
on 2016-05-23
Copy link to comment
Chris O'Reilly
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.
3
0
on 2016-05-25
Copy link to comment
Hugo Matthioli
Rank: #26763
Hey guys,

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

Thanks.
0
0
on 2016-05-30
Copy link to comment
Chris O'Reilly
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/
0
0
on 2016-06-02
Copy link to comment
Ruben Goncalves
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
0
0
on 2016-06-02
Copy link to comment
Pedro Remedios
Rank: #0
Great work, Ruben!

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

Pedro
0
0
on 2016-06-07
Copy link to comment
Ruben Goncalves
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
0
0
on 2016-06-08
Copy link to comment
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 
 
0
0
on 2016-06-08
Copy link to comment
Daniel Reis
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
0
0
on 2016-06-08
Copy link to comment
Tiago Freitas
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?

0
0
on 2017-03-23
Copy link to comment
Daniel Reis
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


0
0
on 2017-03-27
Copy link to comment
Tiago Freitas
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?   


0
0
on 2017-04-03
Copy link to comment
MFR
Rank: #3530

Dear Daniel,


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


That would be very useful.


Thanks in advance.

0
0
on 2017-07-08
Copy link to comment
Gordana Jarcevic
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

0
0
on 2018-02-01
Copy link to comment
May Chai
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!!

0
0
on 2020-11-26
Copy link to comment

Hello May 

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

Regards

0
0
on 2020-11-28
Copy link to comment
Post Closed