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

LinkedIn Basics (New UI)

Golden Demo - SAP UI · Golden Demo Manufacturing Basics ... 10 3.1.4 Show Material Flow ... 12 3.1.6 Run Load Leveling

HighJump One – UI Basics One – UI Basics Lab Exercises ... This manual contains self-directed exercises for the HighJump One User ... The exercises are designed to be stand-alone

UX & UI - University of Michiganweb.eecs.umich.edu/~sugih/courses/eecs441/w17/07-UXUI.pdf · UX & UI THE BASICS PERSONAS “Never ever think you ... Online community for portfolio

Kasim Silk Emporiumfabrics like designer silk fabrics, organza silk fabrics, cotton silk fabrics, etc. About Us One of the foremost company, ‘Kasim Silk Emporium’ is a renowned

S v 1 TO MP v 2 I g ui d e Back to basics My

Jaysee Silk : Color Changing Silk

Mulberry silk charmeuse pillowcase lily silk bedding

The Silk Road Why “Silk”?

Chinese Silk and the Silk Road

Kendo Ui BASICS. What we will do? What is Kendo UI? Check browser support Licensing Download and Install Add it to web application

SiLK Tool Suite Quick Reference Binary Output SiLK …tools.netsa.cert.org/silk/SiLK-QuickRef-2016-06.pdfSiLK Tool Suite Quick Reference June 2016 for SiLK v 3.12 Binary Output SiLK

Spse01501 Ui Basics

Soft Silk Sarees - V.Muthuswamy Silks · Pure Silk Sarees & Raw Silk Yarn . v.mut/i sa ugwam¶ i 5 Pure Silk Sarees & Raw Silk Yarn . v.mut/i sa ugwam¶ i 5 Pure Silk Sarees & Raw

OutSystems - RAD Remakes Modern UI Frameworks: SILK UI Is Born - NextStep Americas 2015

Printed Silk Fabrics by Kasim Silk Emporium

DOM, HTML, CSS UI Development Basics Confidential

Sharda Group Of Indian Silk Industries, Nagpur, Silk Fabrics & Silk Yarns

by rajkumarandco@ravit.com PHOTO ALBUM SILK SCARVES · 100% silk scarves . SILK SCARVES SIZE 22” X 70 INCH TextBox. SILK SCARVES 100X100 CM. SILK SCARVES 22” X 70 INCH. SILK SCARVES

SILK PAINTINGS Silk festmények