silk ui from basics to advanced

www.outsystems.com

The Silk UI framework web

Samuel Jesus

OutSystems (4 Years)Experts Team - Silk UI Team Leader

AgendaIntroduction

CSSFront-End FrameworksWhat is Silk UI ?Themes, Samples and Patterns

Silk UI Basics

Responsive in Silk UI

Silk UI Advanced

Questions

AgendaIntroduction

Silk UI BasicsSilk UI ArchitectureBuild an App with Silk UI

DemoCustomize your app

DemoResponsive in Silk UI

Silk UI Advanced

Questions

AgendaIntroduction

Silk UI Basics

Responsive in Silk UIServer-side ApproachGain control of ResponsiveDevice SimulationDemo

Silk UI Advanced

Questions

AgendaIntroduction

Silk UI Basics

Silk UI AdvancedCustom CSS made easierDemo

Questions

AgendaIntroduction

Silk UI Basics

Silk UI Advanced

Questions

Introduction

.Box {background-color: white;font-size: 12px;border: 1px solid black;

Simple,right?

@media screen and (max-width: 700px) and (min-width: 340px) and (device-pixel-ratio: 2) {

.content > li.kpbb a:hover {position: relative;box-sizing: border-box;padding: 30px 0 0;font-size: .857142857142857rem;background-image: -webkit-gradient(linear, from(#4d90fe),to(#357ae8));

z-index: -1!important;}

.aok-clearfix:after,.aok-clearfix:before, .clearfix:after,.clearfix:before {display: table;content: "";line-height: 0;font-size: 0

@media screen and (max-width: 700px) and (min-width: 340px) and (device-pixel-ratio: 2) {

.content > li.kpbb a:hover {position: relative;box-sizing: border-box;padding: 30px 0 0;font-size: .857142857142857rem;background-image: -webkit-gradient(linear, from(#4d90fe),to(#357ae8));

z-index: -1!important;}

.aok-clearfix:after,.aok-clearfix:before, .clearfix:after,.clearfix:before {display: table;content: "";line-height: 0;font-size: 0

Responsive Menu

over 3000 lines of CSS

GreatUIwithoutCSS

UltimateGoal

GreatUIwithoutCSS

UltimateGoal

Front-EndFrameworks

There’sabetterway

What is Silk UI ?

Themes, Samples and Patterns

Dublin

Liverpool

Lisbon Tokyo

Vanilla

labs.outsystems.net/SilkUI

Silk UI Basics

Silk UI Architecture

Silk UI Framework

Lisbon Template

Tokyo Template

Dublin Template

Liverpool Template

Vanilla Template

YourCustom

Template

Your Application

Silk UI Framework

Lisbon Template

Tokyo Template

Dublin Template

Liverpool Template

Vanilla Template

YourCustom

Template

Your Application

2 modules (eSpaces)● SilkUIFonts● SilkUIFramework

○ Stylesheets (Themes)■ Patterns_SilkUI - Basic stylesheet, contains all the patterns CSS■ Patterns_Dublin - Patterns customization for Dublin■ Email - Empty stylesheet

Silk UI Framework

Lisbon Template

Tokyo Template

Dublin Template

Liverpool Template

Vanilla Template

YourCustom

Template

Your Application

Silk UI Framework

Lisbon Template

Tokyo Template

Dublin Template

Liverpool Template

Vanilla Template

YourCustom

Template

Your Application

Silk UI Framework

Lisbon Template

Tokyo Template

Dublin Template

Liverpool Template

Vanilla Template

YourCustom

Template

Your Application

Silk UI Framework

Lisbon Template

Tokyo Template

Dublin Template

Liverpool Template

Vanilla Template

YourCustom

Template

Your Application

Silk UI Framework

Lisbon Template

Tokyo Template

Dublin Template

Liverpool Template

Vanilla Template

YourCustom

Template

Your Application

2 modules (eSpaces)● DublinTheme

○ Structure Elements■ Layout■ Header/Footer

○ Stylesheets (Themes)■ DublinTheme - CSS for structure and look and feel

● Template_Dublin - Starting point for every new application.

Silk UI Framework

Lisbon Template

Tokyo Template

Dublin Template

Liverpool Template

Vanilla Template

YourCustom

Template

Your Application

Silk UI Framework

Lisbon Template

Tokyo Template

Dublin Template

Liverpool Template

Vanilla Template

YourCustom

Template

Your Application

Silk UI Framework

Lisbon Template

Tokyo Template

Dublin Template

Liverpool Template

Vanilla Template

YourCustom

Template

Your Application

Silk UI Framework

Lisbon Template

Tokyo Template

Dublin Template

Liverpool Template

Vanilla Template

YourCustom

Template

Your Application

Silk UI Framework

Lisbon Template

Tokyo Template

Dublin Template

Liverpool Template

Vanilla Template

YourCustom

Template

● Can have all the necessary modules (eSpaces)● Will contain all the CSS for your specific application● Created based on a Template (starter app)

Your Application

Silk UI Framework

Lisbon Template

Tokyo Template

Dublin Template

Liverpool Template

Vanilla Template

YourCustom

Template

Your Application

Silk UI Framework

Lisbon Template

Tokyo Template

Dublin Template

Liverpool Template

Vanilla Template

YourCustom

Template

Your Application

● Avoid Changing Silk UI Framework Application● Avoid Changing Silk UI Template Applications● Changes will prevent you from an easy upgrade

Silk UI Framework

Lisbon Template

Tokyo Template

Dublin Template

Liverpool Template

Vanilla Template

YourCustom

Template

Your Application

Build an app with Silk UI - Demo

Create the following application based on Liverpool Theme

Build an app with Silk UI - Demo

Create the following application based on Liverpool Theme

RichWidgets Icon

lisbonbig.jpg

lisbonsmall.jpg

Customize your app

Customize the look and feel of your application

labs.outsystems.net/SilkUI/Themes.aspx

Server-side approach

Mix of server-side code (user agent) and client-side dimensionsServer understands the deviceCode and Content optimization server-sideEasily create responsive behaviour

1 2 3 4

1 2 3 4 5

1 2 3 4 5 6

Gain control of Responsive How?1. Responsive Columns

- Configurable- Predictable behaviour

1 2 3 4

1 2 3 4 5

1 2 3 4 5 6

1 2 3 4Don’t break

Break first

Break last

Break middle

Break all

1 2 3 4

1 2 3 4 5

1 2 3 4 5 6

Break first

Break last

Break middle

Break all

1 2 3 4

1 2 3 4 5

1 2 3 4 5 6

Break first

Break last

Break middle

Break all

1 2 3 4

1 2 3 4 5

1 2 3 4 5 6

Break first

Break last

Break middle

Break all

1 2 3 4

1 2 3 4 5

1 2 3 4 5 6

Break first

Break last

Break middle

Break all

Gain control of Responsive How?2. Responsive Patterns

Select if an element should be loaded in a specific deviceAvoid loading unnecessary data depending on device type

Gain control of Responsive How?

Loads content only when close to display on the viewportPrevents high loading times

2. Responsive Patterns

Define target container for content in different device types without duplicating information

Load different images depending on the current devicePerfect to change the image size or resolution depending on the

device

Makes table rows stack on top of each other in phone

Can hide content for specific devices and creates a link to expand it

Only loads content on user request

Device Simulation

Available in non-productive EnvironmentsTriggered on window resizeCan be switched on/off on each browserControlled by a cookie

Device Simulation

Available in non-productive EnvironmentsTriggered on window resizeCan be switched on/off on each browserControlled by a cookie

Device Simulation

Turn On in ProductionNot recommended

Device Simulation reduces application performance

Using all the responsive capabilities of Silk UI, optimize your app for mobile devices

Silk UI Advanced

Custom CSS made easier

No @Media Queries

Custom CSS made easierDevice: desktop, tablet, phone

Dimension: big, hd, small

Orientation: landscape, portrait

Browser: chrome, firefox, IE10, IE11, Safari, etc.

Language: en, nl, etc.

Operating System: windows, ios, osx, android, ubuntu, linux, unknownos

Exercise 4 - DEMOTransform the following pattern into a responsive pattern using Silk UI classes

Desktop

Exercise 4 - DEMOTransform the following pattern into a responsive pattern using Silk UI classes

DesktopPhone

Questions?

Thank You

silk ui from basics to advanced

Technology