Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Make The Most Out Of Your Screen With Responsive Patterns

Stop worrying about mobile first. Learn how to handle responsive behavior using OutSystems UI patterns! Plus, some dad jokes.

  • Be the first to comment

  • Be the first to like this

Make The Most Out Of Your Screen With Responsive Patterns

  1. 1. Make the Most Out of Your Screen With Responsive Patterns
  2. 2. | Make the Most Out of Your Screen With Responsive Patterns Bernardo Cardoso Frontend Developer | OutSystems @ in bernardo.cardoso@outsystems.com /bernardo-cardoso @Bernardoagc1990
  3. 3. | Make the Most Out of Your Screen With Responsive Patterns Why ? ? ?
  4. 4. | Make the Most Out of Your Screen With Responsive Patterns
  5. 5. | Make the Most Out of Your Screen With Responsive Patterns
  6. 6. | Make the Most Out of Your Screen With Responsive Patterns
  7. 7. | Make the Most Out of Your Screen With Responsive Patterns “Simply looking at a smartphone, tablet, and desktop machine next to one another quickly erodes the assumption that a web design should look the same in every environment.” Brad Frost, Atomic Design
  8. 8. | Make the Most Out of Your Screen With Responsive Patterns The problem 1 3 2
  9. 9. | Make the Most Out of Your Screen With Responsive Patterns
  10. 10. | Make the Most Out of Your Screen With Responsive Patterns
  11. 11. | Make the Most Out of Your Screen With Responsive Patterns
  12. 12. | Make the Most Out of Your Screen With Responsive Patterns
  13. 13. | Make the Most Out of Your Screen With Responsive Patterns Our solution Spoiler: just use OutSystems UI, you’ll be fine.
  14. 14. | Make the Most Out of Your Screen With Responsive Patterns { CSS } Device Detection Default Rules Responsive Patterns Advanced Solutions
  15. 15. | Make the Most Out of Your Screen With Responsive Patterns No @media queries
  16. 16. | Make the Most Out of Your Screen With Responsive Patterns
  17. 17. | Make the Most Out of Your Screen With Responsive Patterns Device Detection New version for OutSystems UI Device Detection { CSS }
  18. 18. | Make the Most Out of Your Screen With Responsive Patterns Server Side Client Side ● Client-side;
  19. 19. | Make the Most Out of Your Screen With Responsive Patterns Server Side Client Side ● Client-side; ● Injects classes on <body> ■ Operating system
  20. 20. | Make the Most Out of Your Screen With Responsive Patterns ● Client-side; ● Injects classes on <body> ■ Operating system ■ Browser
  21. 21. | Make the Most Out of Your Screen With Responsive Patterns ● Client-side; ● Injects classes on <body> ■ Operating system ■ Browser ■ Device
  22. 22. | Make the Most Out of Your Screen With Responsive Patterns ● Client-side; ● Injects classes on <body> ■ Operating system ■ Browser ■ Device ■ Orientation
  23. 23. | Make the Most Out of Your Screen With Responsive Patterns Server Side Client Side ● Customizable breakpoints; ● Client-side; ● Injects classes on <body> ■ Operating system ■ Browser ■ Device ■ Orientation
  24. 24. | Make the Most Out of Your Screen With Responsive Patterns Server Side Client Side ● Customizable breakpoints; ● Client-side; ● Injects classes on <body> ■ Operating system ■ Browser ■ Device ■ Orientation
  25. 25. | Make the Most Out of Your Screen With Responsive Patterns
  26. 26. | Make the Most Out of Your Screen With Responsive Patterns Default Rules { CSS } Default Rules
  27. 27. | Make the Most Out of Your Screen With Responsive Patterns { margin: 0; width: 100%; } .phone [class*="ThemeGrid_Width"] { margin: var(--space-none) var(--space-none) var(--space-base) var(--space-none); width: 100%; } Basic Rule
  28. 28. | Make the Most Out of Your Screen With Responsive Patterns /* $6.1.2 - Styles - Typography - Sizes Tablet */ .tablet .font-size-display { --font-size-display: 34px; } .tablet .heading1 { --font-size-h1: 30px; } .tablet .heading2 { --font-size-h2: 26px; } .tablet .heading3 { --font-size-h3: 24px; } .tablet .heading4 { --font-size-h4: 21px; } .tablet .heading5 { --font-size-h5: 19px; } .tablet .heading6 { --font-size-h6: 17px; } Typography
  29. 29. | Make the Most Out of Your Screen With Responsive Patterns /* $6.1.3 - Styles - Typography - Sizes Phone */ .phone .font-size-display { --font-size-display: 32px; } .phone .heading1 { --font-size-h1: 28px; } .phone .heading2 { --font-size-h2: 24px; } .phone .heading3 { --font-size-h3: 22px; } .phone .heading4 { --font-size-h4: 20px; } .phone .heading5 { --font-size-h5: 18px; } .phone .heading6 { --font-size-h6: 16px; } Typography
  30. 30. | Make the Most Out of Your Screen With Responsive Patterns
  31. 31. | Make the Most Out of Your Screen With Responsive Patterns /* $6.1.3 - Styles - Typography - Sizes Phone */ .phone .font-size-display { --font-size-display: 32px; } .phone .heading1 { --font-size-h1: 28px; } .phone .heading2 { --font-size-h2: 24px; } .phone .heading3 { --font-size-h3: 22px; } .phone .heading4 { --font-size-h4: 20px; } .phone .heading5 { --font-size-h5: 18px; } .phone .heading6 { --font-size-h6: 16px; } Typography
  32. 32. | Make the Most Out of Your Screen With Responsive Patterns
  33. 33. | Make the Most Out of Your Screen With Responsive Patterns But I don’t want your pretentious CSS rules!
  34. 34. | Make the Most Out of Your Screen With Responsive Patterns Basic Rule .phone [class*="ThemeGrid_Width"]:not(.no-responsive) { margin: var(--space-none) var(--space-none) var(--space-base) var(--space-none); width: 100%; }
  35. 35. | Make the Most Out of Your Screen With Responsive Patterns Layouts TopMenu SideMenu Want to know more about this topic? Check José Rosário presentation
  36. 36. | Make the Most Out of Your Screen With Responsive Patterns Dad joke while drinking water Want to hear a joke about paper? Nevermind it's tearable. I’m so sorry...
  37. 37. | Make the Most Out of Your Screen With Responsive Patterns Responsive Patterns { CSS } Responsive Patterns
  38. 38. | Make the Most Out of Your Screen With Responsive Patterns Structure
  39. 39. | Make the Most Out of Your Screen With Responsive Patterns Structure
  40. 40. | Make the Most Out of Your Screen With Responsive Patterns Structure
  41. 41. | Make the Most Out of Your Screen With Responsive Patterns Structure
  42. 42. | Make the Most Out of Your Screen With Responsive Patterns Columns ● GutterSize; ● TabletBehavior ● PhoneBehavior ■ All ■ First ■ Last ■ Middle ■ None
  43. 43. | Make the Most Out of Your Screen With Responsive Patterns Columns ● GutterSize; ● TabletBehavior ● PhoneBehavior ■ All ■ First ■ Last ■ Middle ■ None
  44. 44. | Make the Most Out of Your Screen With Responsive Patterns Columns ● GutterSize; ● TabletBehavior ● PhoneBehavior ■ All ■ First ■ Last ■ Middle ■ None
  45. 45. | Make the Most Out of Your Screen With Responsive Patterns Columns ● GutterSize; ● TabletBehavior ● PhoneBehavior ■ All ■ First ■ Last ■ Middle ■ None
  46. 46. | Make the Most Out of Your Screen With Responsive Patterns Columns ● GutterSize; ● TabletBehavior ● PhoneBehavior ■ All ■ First ■ Last ■ Middle ■ None
  47. 47. | Make the Most Out of Your Screen With Responsive Patterns Columns ● GutterSize; ● TabletBehavior ● PhoneBehavior ■ All ■ First ■ Last ■ Middle ■ None
  48. 48. | Make the Most Out of Your Screen With Responsive Patterns Gallery ● ItemsDesktop; ● ItemsTablet ● ItemsPhone
  49. 49. | Make the Most Out of Your Screen With Responsive Patterns
  50. 50. | Make the Most Out of Your Screen With Responsive Patterns ● Behavior; ■ DesktopOnly; ■ DesktopAndTablet ■ TabletOnly ■ TabletAndPhone ■ PhoneOnly ■ AllDevices DisplayOnDevice
  51. 51. | Make the Most Out of Your Screen With Responsive Patterns
  52. 52. | Make the Most Out of Your Screen With Responsive Patterns ● PhoneWidgetId ● TabletWidgetId MoveOnDevice
  53. 53. | Make the Most Out of Your Screen With Responsive Patterns
  54. 54. | Make the Most Out of Your Screen With Responsive Patterns ● Default behaviour TableRecords
  55. 55. | Make the Most Out of Your Screen With Responsive Patterns Responsive TableRecords
  56. 56. | Make the Most Out of Your Screen With Responsive Patterns ● ExpandableRows Responsive TableRecords
  57. 57. | Make the Most Out of Your Screen With Responsive Patterns ● ExpandableRows ● ScrollableRows Responsive TableRecords
  58. 58. | Make the Most Out of Your Screen With Responsive Patterns Dad joke while drinking water How does a penguin build its house? Igloos it together. sorry again...
  59. 59. | Make the Most Out of Your Screen With Responsive Patterns Advanced Solutions { CSS } Advanced Solutions
  60. 60. | Make the Most Out of Your Screen With Responsive Patterns Advanced FormatServer Actions
  61. 61. | Make the Most Out of Your Screen With Responsive Patterns Server Actions
  62. 62. | Make the Most Out of Your Screen With Responsive Patterns Advanced Format Want to know more about this topic? Check Rita Dias presentation
  63. 63. | Make the Most Out of Your Screen With Responsive Patterns Advanced Format Want to know more about this topic? Check Rita Dias presentation
  64. 64. | Make the Most Out of Your Screen With Responsive Patterns DEMO!!!
  65. 65. | Make the Most Out of Your Screen With Responsive Patterns Recap
  66. 66. | Make the Most Out of Your Screen With Responsive Patterns Device Detection { CSS } Default Rules Responsive Patterns Advanced Solutions
  67. 67. Thank You! @ in bernardo.cardoso@outsystems.com /bernardo-cardoso
  68. 68. RATE THE SESSION Want to help us improve ODC even more? Then don’t forget:

×