Successfully reported this slideshow.
Your SlideShare is downloading. ×

CSS workshop @ OutSystems

CSS workshop @ OutSystems

CSS workshop created for internal delivery @ OutSystems.

“For most people CSS is like a mystical art that nobody truly understands... Sometimes it works and sometimes it doesn’t (unexplainably) “.

Not solely introductory, but also covering more advanced topics, embark in this fantastic adventure that is CSS.

There you have it, all you must know about CSS in a NutShell.

See the videos of the workshop @ http://goo.gl/NJ3n6J

Workshop created by Marco Costa, Miguel Ventura and Rúben Gonçalves

CSS workshop created for internal delivery @ OutSystems.

“For most people CSS is like a mystical art that nobody truly understands... Sometimes it works and sometimes it doesn’t (unexplainably) “.

Not solely introductory, but also covering more advanced topics, embark in this fantastic adventure that is CSS.

There you have it, all you must know about CSS in a NutShell.

See the videos of the workshop @ http://goo.gl/NJ3n6J

Workshop created by Marco Costa, Miguel Ventura and Rúben Gonçalves

More Related Content

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all

CSS workshop @ OutSystems

  1. 1. CSS Shop Learn yourself some CSS, the fast way.
  2. 2. WhoamI? Rúben Gonçalves A CSS lover@ OutSystems ruben.goncalves@outsystems.com rubengoncalves Kudosto Marco Costa andMiguel Ventura for makingthispossible.
  3. 3. "Any technology sufficiently advanced is indistinguishable from magic." -Arthur C. Clark No Magic.
  4. 4. Advanced CSS Solutions
  5. 5. Agenda •CSS b-a-ba •Bug? Inspect it! •Bring to OSDE •Box Model •Box placement •Vertical Alignment •Browser compatibility •CSS BestPratices •Grids & Media queries *OSDE –OutSystems Development Environment
  6. 6. Agenda •CSS b-a-ba •Bug? Inspect it! •Bring to OSDE •Box Model •Box placement •Vertical Alignment •Browser compatibility •CSS BestPratices •Grids & Media queries
  7. 7. The Web “three leg stool” JavaScript HTML Colors, backgrounds, formatting, positioning, … Additional ways for the user to interact with the application Content, Data, Containers and Tables Structure Presentation Behaviour CSS
  8. 8. CSS stands for? CSS = CascadingStyleSheets WHY ? Browser Author User !important It’s all about: What ruleto apply to a certain element ais blue a is red ais gray ais purple
  9. 9. But why CSS? •A clear separation of presentation and content •A set of rules telling the browser how to display elements •Allows the sharing of style sheets across documents •Makes it easy to "skin" a web site (theme)
  10. 10. Syntax 101 <selector> { <property>: <value>; <property>: <value>; ... }
  11. 11. Syntax 101 -Selectors •by tag, like div •by class, like .MainContent •by id, like #wt13_wtMainContent •by pseudo-class, like :hover •by attribute, like [disabled]or [type=checkbox] <divid="wt13_wtMainContent"class="MainContent"> <inputtype="checkbox"disabled/>
  12. 12. Syntax 101 -Selectors •by tag, like div •by class, like .MainContent •by id, like #wt13_wtMainContent •by pseudo-class, like :hover •by attribute, like [disabled]or [type=checkbox] <divid="wt13_wtMainContent"class="MainContent"> <inputtype="checkbox"disabled/>
  13. 13. Syntax 101 -Selectors •by tag, like div •by class, like .MainContent •by id, like #wt13_wtMainContent •by pseudo-class, like :hover •by attribute, like [disabled]or [type=checkbox] <divid="wt13_wtMainContent"class="MainContent"> <inputtype="checkbox"disabled/>
  14. 14. Syntax 101 -Selectors •by tag, like div •by class, like .MainContent •by id, like #wt13_wtMainContent •by pseudo-class, like :hover •by attribute, like [disabled]or [type=checkbox] <divid="wt13_wtMainContent"class="MainContent"> <inputtype="checkbox"disabled/>
  15. 15. Syntax 101 -Selectors •by tag, like div •by class, like .MainContent •by id, like #wt13_wtMainContent •by pseudo-class, like :hover •by attribute, like [disabled]or [type=checkbox] <divid="wt13_wtMainContent"class="MainContent"> <inputtype="checkbox"disabled/>
  16. 16. Syntax 101 –Selectors •by pseudo-class: o.MainContent >:first-child o.MainContent >:last-child <divid="wt13_wtMainContent"class="MainContent"> <inputtype="checkbox"disabled/> <inputtype="text"/> <div> <inputtype="text"/> </div> </div>
  17. 17. Syntax 101 –Selectors •by pseudo-class: o.MainContent >:first-child o.MainContent >:last-child <divid="wt13_wtMainContent"class="MainContent"> <inputtype="checkbox"disabled/> <inputtype="text"/> <div> <inputtype="text"/> </div> </div>
  18. 18. Syntax 101 –Selectors •by pseudo-class: o.MainContent >:first-child o.MainContent >:last-child •by parent: o.MainContent> input[Type=“text”] o.MainContentinput o.MainContentinput + input <divid="wt13_wtMainContent"class="MainContent"> <inputtype="checkbox"disabled/> <inputtype="text"/> <div> <inputtype="text"/> </div> </div>
  19. 19. Syntax 101 –Selectors •by pseudo-class: o.MainContent >:first-child o.MainContent >:last-child •by parent: o.MainContent> input[Type=“text”] o.MainContentinput o.MainContentinput + input <divid="wt13_wtMainContent"class="MainContent"> <inputtype="checkbox"disabled/> <inputtype="text"/> <div> <inputtype="text"/> </div> </div>
  20. 20. Syntax 101 –Selectors •by pseudo-class: o.MainContent >:first-child o.MainContent >:last-child •by parent: o.MainContent> input[Type=“text”] o.MainContentinput o.MainContentinput + input <divid="wt13_wtMainContent"class="MainContent"> <inputtype="checkbox"disabled/> <inputtype="text"/> <div> <inputtype="text"/> </div> </div>
  21. 21. Syntax 101 –Selectors
  22. 22. Syntax 101 -Selector COMBOs •Apply same style to many selectors oselector 1,selector 2
  23. 23. Syntax 101 -Selector COMBOs •Apply same style to many selectors oselector 1,selector 2 •Elements one inside another o.head .title{ font-size: xx-large; }
  24. 24. Syntax 101 -Selector COMBOs •Apply same style to many selectors oselector 1,selector 2 •Elements one inside another o.head .title{ font-size: xx-large; } •By tag, class, with two attributes oinput.big[type=checkbox][disabled]{ cursor: not-allowed; }
  25. 25. Syntax 101 -Selector COMBOs #container div.deployButton a:hover, #container div.deployButton input[disabled]:active{ background-color: red; } Let’sseetheeffect
  26. 26. Syntax 101 –Rule Priority •Most specific wins 1.style=“value” 2.#someid 3..classor [attributes] 4.tags 5.*
  27. 27. Specs say: Use #IDsto apply style to single element Use .classto apply style to a class of elements But in OutSystems IDs are generated dynamically --you can't predict them… So use classes everywhere instead. PROBLEM SOLVED! OutSystems Checkpoint
  28. 28. Syntax 101 –Rule Priority •Definitionordermatters
  29. 29. Syntax101 –RulePriority Example
  30. 30. CSS Import Order
  31. 31. Syntax 101 –Rule Priority Example <divclass="outer"id="outerdiv"> <divclass="inner"id="innerdiv1"> hello </div> </div> Let’sseetheeffect
  32. 32. Syntax 101 -Properties •Text properties ofont (size, weight, style), color, transform, spacing, line, align, direction •Background ocolors, images, patterns •Box owidth, height, margin, border, shadow •Layout opositioning, visibility, overflow, white-space, floating
  33. 33. Syntax 101 -Properties Thinking of doing X? There's probably a CSS property for that. Good references: •W3C CSS spec •MDN
  34. 34. Exercise 0 •Get your gear http://goo.gl/ql8CHD •Login to your personal environment •Publish the eSpace CSSShop •Except requested, all css should be done in the respective Page.
  35. 35. Exercise 1 •Follow the instruction on page Exercise1
  36. 36. Exercise 2 •Follow the instruction on page Exercise2
  37. 37. Agenda •CSS b-a-ba •Bug? Inspect it! •Bring to OSDE •Box Model •Box placement •Vertical Alignment •Browser compatibility •CSS BestPratices •Grids & Media queries
  38. 38. http://worrydream.com/#!/LadderOfAbstraction Instant Feedback= Faster Improvement & Better Ideas
  39. 39. You need instant feedback... Uhh... Where was I?
  40. 40. Inspector Demo!
  41. 41. Inspector Demo!
  42. 42. Case Study
  43. 43. CSS3 Eye candy effects
  44. 44. CSS3 Eye candy effects And lots of really useful stuff Transforms, transitions, animations, gradients, multiple columns, multiple backgrounds, counters, flexboxes, speech, fonts, ...
  45. 45. CSS3 Cool Experimental Use with caution
  46. 46. Agenda •CSS b-a-ba •Bug? Inspect it! •Bring to OSDE •Box Model •Box placement •Vertical Alignment •Browser compatibility •CSS BestPratices •Grids & Media queries
  47. 47. Some markup you find as example in the internet is hard to reproduce in SS, such as lists or HTML5 elements: <section> <header> <nav> <ul> <li>...</li> <li>...</li> </ul> </nav> </header> </section> But do you need it? OutSystems Checkpoint
  48. 48. Converting from a template: classify everything! <sectionid="sec01"class="first"> markup styles section{font-weight: bold; } #sec01{font-style: italic; }
  49. 49. Converting from a template: classify everything! <sectionid="sec01"class="first"> markup styles .tag-section{font-weight: bold; } .id-sec01 {font-style: italic; }
  50. 50. Converting from a template: classify everything! markup styles .tag-section{font-weight: bold; } .id-sec01 {font-style: italic; } <div class="first tag-section id-sec01">
  51. 51. How about the widget tree?
  52. 52. Exercise 3 •Our customer’s webdesigner handed us a bunch of HTML and CSS files •You should convert everything to the OutSystems platform visual design tool! •Use TemplateToSSminimalism-template •Convert the whole header portion, including the DaVinci quote to SS Download the template
  53. 53. Time wise, do only the red part
  54. 54. Agenda •CSS b-a-ba •Bug? Inspect it! •Bring to OSDE •Box Model •Box placement •Vertical Alignment •Browser compatibility •CSS BestPratices •Grids & Media queries
  55. 55. How Layout Works
  56. 56. Rule: Everything is boxes!
  57. 57. Rule: Everything is boxes!
  58. 58. Box model Paragraphs live in blockboxes
  59. 59. Box model Lists live in blockboxes
  60. 60. Box model
  61. 61. Box model Some elements are inline (they run along with the text) and have no dimensions
  62. 62. Rule: Everything is boxes!
  63. 63. Rule: Boxes have dimensions
  64. 64. Box Dimensions
  65. 65. Box Dimensions –width & height
  66. 66. Box Dimensions -border
  67. 67. Box Dimensions -padding
  68. 68. Box Dimensions -margin
  69. 69. Measuring All values are editable!
  70. 70. Padding lets you breathe border: solid5pxorange; background-color: #ffa; color: red; Looks tight... Let’s give it some padding... padding: 20px; border: solid5pxorange; background-color: #ffa; color: red;
  71. 71. width: 200px; height: 200px; border: solid5pxorange; padding: 20px;
  72. 72. W3C Box ModelHeightVisible Height
  73. 73. height: 150px; border: solid5pxorange; padding: 20px;
  74. 74. W3C Box Model div { height: 20px; padding: 20px; border: 20px; } visible height will be 100px
  75. 75. However... ... we can change the way the box model works!
  76. 76. width: 200px; height: 200px; border: solid5pxorange; padding: 20px; box-sizing: border-box;
  77. 77. Agenda •CSS b-a-ba •Bug? Inspect it! •Bring to OSDE •Box Model •Box placement •Vertical Alignment •Browser compatibility •CSS BestPratices •Grids & Media queries
  78. 78. Laying out the boxes http://www.flickr.com/photos/s_volenszki/2218589271
  79. 79. Laying out the boxes
  80. 80. Document and Gravity First block... This could be the header Second block, this could be the content Third block... This could be the footer
  81. 81. Side by Side
  82. 82. Side by Side? width: 100px; First block... This could be a menu item Second block... I want to be a menu item too!
  83. 83. Floats and Clears First block... This could be a menu item Second block... I want to be a menu item too! width: 100px; float: left; Third block... This could be the footer Third block... This could be the footer clear: left;
  84. 84. The Clearfix First block... This could be a menu item Second block... I want to be a menu item too! width: 100px; float: left; Third block... This could be the footer clear: both; visibility: hidden; I am invisible!
  85. 85. “A floated boxis positioned within the normal flow, then taken out of the flow and shifted to the left or right as far as possible. (…) When a box is taken out of normal flow, all content that is still within normal flow will ignore it completely and not make space for it.” Taken from: maxdesign
  86. 86. Floats example See example
  87. 87. Avoid using floats •They’re messy and you’ll spend a lot of time clearing that mess! (more on this) •You will meet them in web tutorials for IE6 and in legacy code over and over again... •More info
  88. 88. A better float: inline-block (IE7+) First block... This could be a menu item Second block... I want to be a menu item too! width: 100px; display: inline-block; Third block... This could be the footer /* the default */ display: block; *display:inline; *zoom: 1;
  89. 89. Laying out the boxesdisplay: block;
  90. 90. Laying out the boxesdisplay: inline-block;
  91. 91. Floats and Inlines are fluid They adapt to whatever space they have
  92. 92. Non-breaking inlines •Known dimensions? oSet outer container width to the proper dimension •Unknown dimensions? (e.g. dynamic content) oSet outer container white-space to nowrap •Example: /CSSShop/floats_and_flow.aspx
  93. 93. Exercise 4 •This is a no codingexercise! •If you can print the next slide •Try to layout the context in boxes
  94. 94. Solution Time?
  95. 95. Exercise 5 •Let’s implement now the previous layout •Go to Exercise 5page
  96. 96. Think with boxing in mind (rather than tables)
  97. 97. Think with boxing in mind (rather than tables)
  98. 98. Think with boxing in mind (rather than tables)
  99. 99. Agenda •CSS b-a-ba •Bug? Inspect it! •Bring to OSDE •Box Model •Box placement •Vertical Alignment •Browser compatibility •CSS BestPratices •Grids & Media queries
  100. 100. Vertical Alignment •Applied to table cells, changes cell content •Applied to images changes the image vertical positioning relative to the line •Applied to inline-blocks... depends on the line where the inlinesits (check example) Let’sseeanexample
  101. 101. Mastering Positioning
  102. 102. Escaping the gravity,relatively First block... Second block... Third block... This could be the footer position: static; position: relative; top: -100px; left: 100px; Second block... block is kept in the normal flow Third block... This could be the footer margin-bottom: -210px;
  103. 103. Escaping the gravity,absolutely First block... Third block... This could be the footer position: static; absolute; block is removed from the normal flow... The third block moves under it Third block... This could be the footer Second block... Second block... left: 100px; top: 100px; Second block... right: 0px; bottom: 0px; Second block... inner position: absolute; bottom: 0; left: 0; inner Second block top: 0; inner absoluteactually relative to the first parent not static
  104. 104. Positioning Relativetakes space, absolutedoesn’t Absolutecoordinates are relatively absolute You can set dimensions using positioning More info
  105. 105. Exercise 6 •Follow the instruction on page Exercise 6
  106. 106. Exercise 7 •Follow the instruction on page Exercise 7 •You may do this exercise directly in the browser inspector.
  107. 107. What about old browsers?
  108. 108. Agenda •CSS b-a-ba •Bug? Inspect it! •Bring to OSDE •Box Model •Box placement •Vertical Alignment •Browser compatibility •CSS BestPratices •Grids & Media queries
  109. 109. Browser compatibility
  110. 110. Browser compatibility
  111. 111. Browser compatibility •Everyone’s Chrome version will be higher by the time this presentation ends •Firefox, Opera, ..., users are savvy enough to care about updates •IE updating resembles installing a new version of Windows, and it is many times controlled by system administrators (on corporate networks)
  112. 112. Browsers behave differently Can you live with it? Graceful Degradation Yes
  113. 113. Graceful Degradation Theart of letting go those round corners. .c { background-image: linear-gradient(blue,navy); /* fallback to a normal blue */ background-color: blue; }
  114. 114. Graceful Degradationborder radiusbox shadow inset but we can affordnot having them
  115. 115. Graceful Degradation Chrome IE 7/8
  116. 116. Browsers behave differently Can you live with it? Graceful Degradation Oh boy... Yes No
  117. 117. Browsers behave differently Oh boy... No Is there a mainbrowser? No Find one! Install it everywhere! Yes
  118. 118. DefiningthebaselineBrowser •Define fromstartbrowsers scope •Checkthesite analitics
  119. 119. DefiningthebaselineBrowser •Define fromstartbrowsers scope •Checkthesite analitics It’snotenoughto sayIE… Specifytheversionas well! (IE7, IE8, …)
  120. 120. Browsers STILLbehavedifferently Oh boy... No Baselinebrowser installed! Well… Therewillbealwaysdiferences
  121. 121. Browsers STILLbehavedifferently Oh boy... No Baselinebrowser installed! Well… Therewillbealwaysdiferences
  122. 122. Browsers STILLbehavedifferently Well… Therewillbealwaysdiferences Is IE6support required? Yes No Development time x2 QA time x2 Box model works different in IE6 x3 And there’s all the bugs that will never be fixed x4
  123. 123. FlatteningBrowsers diferences •Weapons ofchoice oCSS Hacks oConditionalCSS oModernizr, Polyfills
  124. 124. CSS Hacks •Youcanuse hacksifyouhaveto: .c {border-radius: 10px; } .c{_border: 1px solid black; } <= IE6
  125. 125. CSS Hacks •Youcanuse hacksifyouhaveto: .c {border-radius: 10px; } .c{_border: 1px solid black; } .c{*border: 1px solid black; } <= IE7
  126. 126. CSS Hacks •Youcanuse hacksifyouhaveto: .c {border-radius: 10px; } .c{_border: 1px solid black; } .c{*border: 1px solidblack; } .c{border: 1px solid black9; } <= IE8
  127. 127. CSS Hacks •Youcanuse hacksifyouhaveto: .c {border-radius: 10px; } .c{_border: 1px solid black; } .c{*border: 1px solidblack; } .c{border: 1px solidblack9; } .c{border: 1px solidblack0/; } IE8 & IE9
  128. 128. CSS Hacks •Youcanuse hacksifyouhaveto: .c {border-radius: 10px; } .c{_border: 1px solid black; } .c{*border: 1px solidblack; } .c{border: 1px solidblack9; } .c{border: 1px solidblack0/; } .c{border: 1px solid black90; } IE9
  129. 129. Conditional CSS •You can use classes if you want to <!--[if IE 7]><scripttype="text/javascript"> osjs('html').addClass('ie7'); </script><![endif]--> .c {border-radius: 10px; } .ie7 .c{border: 1px solid black; }
  130. 130. Modernizr •Isn’t really what you think it is, sorry. •Enables use of HTML5 tags in IE (but we don’t need that) •Provides feature detection mechanisms
  131. 131. Modernizr •Differentpackages •Differentoutputs .c {border-radius: 10px; } .ie7 .c{border: 1px solid black; }
  132. 132. Polyfills Scripts that enhance your browser’s capabilities... But they always come at a cost! CSS3 PIE (http://css3pie.com/) Other resources (https://github.com/Modernizr/Modernizr/wiki/ HTML5-Cross-Browser-Polyfills)
  133. 133. Polyfills •Conditionsto use: oSmallchanges oFewelements •ExampleofusageinOS: PIE
  134. 134. Agenda •CSS b-a-ba •Bug? Inspect it! •Bring to OSDE •Box Model •Box placement •Vertical Alignment •Browser compatibility •CSS BestPratices •Grids & Media queries
  135. 135. Exercise 8 •Troubleshoot the problem using the inspector •Final page should like this:
  136. 136. Exercise 8 solution BINGO!
  137. 137. CSS contaminates
  138. 138. CSS contaminatesBrowser defaults -CSS Resets •Normalize.css ohttp://necolas.github.com/normalize.css/ •Reset.css ohttp://meyerweb.com/eric/tools/css/reset/
  139. 139. CSS contaminates Building a widget library? .my-widgets-nav{/* ... */} .my-widgets-picker{/* ... */} .my-widgets-note{/* ... */} Prefix all things!
  140. 140. CSS best practices •Organize yourcode: oHTML Tags oWidgets oRichWidgets oValidations oLayout oHeader & Footer oMenu oOtherClasses •Use usefulnamingconventions •Reduce& Reuse
  141. 141. Danger of Componentization <head> <link href="_Basic.css?6430" type="text/css" rel="stylesheet"> <link href="/RichWidgets/Blocks/RichWidgets/RichWidgets/Icon.css?8" type="text/css" rel="stylesheet"> <link href="/SapphireStyleG_dev/Blocks/SapphireStyleG_dev/Content/PanelById.css?6430" type="text/css" rel="stylesheet"> <link href="/SapphireStyleG_dev/Blocks/SapphireStyleG_dev/Common/LoginInfo.css?6430" type="text/css" rel="stylesheet"> <link href="/RichWidgets/Blocks/RichWidgets/jQueryUI/jQueryUIInternal.css?8" type="text/css" rel="stylesheet"> <link href="/RichWidgets/Blocks/RichWidgets/RichWidgets/Feedback_Message.css?8" type="text/css" rel="stylesheet"> <link href="/SapphireStyleG_dev/Blocks/SapphireStyleG_dev/Private/Feedback_AjaxWait.css?6430" type="text/css" rel="stylesheet"> <link href="/SapphireStyleG_dev/Blocks/SapphireStyleG_dev/Patient/ToggleDetails.css?6430" type="text/css" rel="stylesheet"> <link href="/SapphireStyleG_dev/Blocks/SapphireStyleG_dev/Content/PageHead.css?6430" type="text/css" rel="stylesheet"> <link href="/RichWidgets/Blocks/RichWidgets/RichWidgets/Input_Calendar.css?8" type="text/css" rel="stylesheet"> <link href="/SapphireStyleG_dev/Blocks/SapphireStyleG_dev/Content/SectionTitle.css?6430" type="text/css" rel="stylesheet"> <link href="/SapphireStyleG_dev/Blocks/SapphireStyleG_dev/Content/ExpandArea.css?6430" type="text/css" rel="stylesheet"> <link href="/RichWidgets/Blocks/RichWidgets/RichWidgets/List_SortColumn.css?8" type="text/css" rel="stylesheet"> <link href="/RichWidgets/Blocks/RichWidgets/RichWidgets/List_Counter.css?8" type="text/css" rel="stylesheet"> <link href="/RichWidgets/Blocks/RichWidgets/RichWidgets/List_Navigation.css?8" type="text/css" rel="stylesheet"> <link href="/SapphireStyleG_dev/Blocks/SapphireStyleG_dev/ListRecords/LineElement.css?6430" type="text/css" rel="stylesheet"> <link href="/SapphireStyleG_dev/Blocks/SapphireStyleG_dev/DetailsBlock/Line.css?6430" type="text/css" rel="stylesheet"> <link href="/SapphireStyleG_dev/Blocks/SapphireStyleG_dev/DetailsBlock/Interaction.css?6430" type="text/css" rel="stylesheet"> <link href="/SapphireStyleG_dev/Blocks/SapphireStyleG_dev/Content/Section.css?6430" type="text/css" rel="stylesheet"> <link href="/SapphireStyleG_dev/Blocks/SapphireStyleG_dev/Tooltips/PopupMenu.css?6430" type="text/css" rel="stylesheet"> <link href="/SapphireStyleG_dev/Blocks/SapphireStyleG_dev/Tooltips/Tooltipster_Tooltip.css?6430" type="text/css" rel="stylesheet"> <link href="/SapphireStyleG_dev/Blocks/SapphireStyleG_dev/Tooltips/Tooltipster_Container.css?6430" type="text/css" rel="stylesheet"> <link href="/SapphireStyleG_dev/Blocks/SapphireStyleG_dev/Deprecated/PopupWindow.css?6430" type="text/css" rel="stylesheet"> <link href="Theme.SapphireStyleG_dev.css?6430" type="text/css" rel="stylesheet"> <link href="Theme.SapphireStyleG_dev.extra.css?6430" type="text/css" rel="stylesheet"> <script src="/SapphireStyleG_dev/Blocks/SapphireStyleG_dev/Common/MenuRight.js?6430" type="text/javascript" charset="UTF-8"></script> <script src="/SapphireStyleG_dev/Blocks/RichWidgets/jQueryUI/jQueryUIInternal.en.js?8" type="text/javascript" charset="UTF-8"></script> <script src="/SapphireStyleG_dev/Blocks/RichWidgets/jQueryUI/jQueryComponents.en.js?8" type="text/javascript" charset="UTF-8"></script> <script src="/SapphireStyleG_dev/Blocks/RichWidgets/jQueryUI/jQueryCookie.en.js?8" type="text/javascript" charset="UTF-8"></script> <script src="/SapphireStyleG_dev/Blocks/RichWidgets/jQueryUI/jQueryCurvycorners.en.js?8" type="text/javascript" charset="UTF-8"></script> <script src="/SapphireStyleG_dev/Blocks/RichWidgets/RichWidgets/Feedback_Message.en.js?8" type="text/javascript" charset="UTF-8"></script> <script src="/SapphireStyleG_dev/Blocks/SapphireStyleG_dev/Private/Feedback_AjaxWait.js?6430" type="text/javascript" charset="UTF-8"></script> <script src="/SapphireStyleG_dev/Blocks/SapphireStyleG_dev/Layouts/Layout.js?6430" type="text/javascript" charset="UTF-8"></script> <script src="/SapphireStyleG_dev/Blocks/SapphireStyleG_dev/Patient/ToggleDetails.js?6430" type="text/javascript" charset="UTF-8"></script> <script src="/SapphireStyleG_dev/Blocks/SapphireStyleG_dev/Patient/PatientDetails.js?6430" type="text/javascript" charset="UTF-8"></script> <script src="/SapphireStyleG_dev/Blocks/RichWidgets/RichWidgets/Input_Calendar.en.js?8" type="text/javascript" charset="UTF-8"></script> <script src="/SapphireStyleG_dev/Blocks/SapphireStyleG_dev/Content/TabsClient.js?6430" type="text/javascript" charset="UTF-8"></script> <script src="/SapphireStyleG_dev/Blocks/RichWidgets/RichWidgets/List_SortColumn.en.js?8" type="text/javascript" charset="UTF-8"></script> <script src="/SapphireStyleG_dev/Blocks/SapphireStyleG_dev/Content/PanelById.js?6430" type="text/javascript" charset="UTF-8"></script> <script src="/SapphireStyleG_dev/Blocks/SapphireStyleG_dev/Tooltips/PopupMenu.js?6430" type="text/javascript" charset="UTF-8"></script> <script src="/SapphireStyleG_dev/Blocks/SapphireStyleG_dev/Javascript/Tooltipster.js?6430" type="text/javascript" charset="UTF-8"></script> <script src="/SapphireStyleG_dev/Blocks/SapphireStyleG_dev/Tooltips/Tooltipster_Tooltip.js?6430" type="text/javascript" charset="UTF-8"></script> <script src="/SapphireStyleG_dev/Blocks/SapphireStyleG_dev/Deprecated/PopupWindow.js?6430" type="text/javascript" charset="UTF-8"></script> </head> IE 7/8 only import (css+JS) 30files
  142. 142. Agenda •CSS b-a-ba •Bug? Inspect it! •Bring to OSDE •Box Model •Box placement •Vertical Alignment •Browser compatibility •CSS BestPratices •Grids & Media queries
  143. 143. Platform Grid
  144. 144. Platform Grid Problems?
  145. 145. Fluid but not entirely
  146. 146. Why not entirelly? For more details check this post
  147. 147. Media Queries “allows the content rendering to adapt to conditions such as screen resolution“
  148. 148. Media queries
  149. 149. Media queries syntax Learn more @ MDN
  150. 150. RWD?!
  151. 151. “responsive web design isn’tintended to serve as a replacementfor mobile web sites”
  152. 152. Exercise 9 •Duplicate the page Exercise 5 •Rename it Exercise 9 •The exercise is to make this page Responsive •Needs to be responsive to all devices
  153. 153. Final Thoughts
  154. 154. Be Pragmatic •If CSS gets in your way, go the other way oExample: vertically centering •Use CSS as a fast-prototyping tool oIf old browsers get too quirky, print-screen and use images!
  155. 155. No magic
  156. 156. Inspect everything
  157. 157. CSS in your favor(fast prototyping), never against you!
  158. 158. Rúben Gonçalves ruben.goncalves@outsystems.com ?
  159. 159. References •Compatibilityquickreference •Checkifyoucanuse anelement •MostcommonIE Bugs •Cross-browser CSS •Normalize.css •CSS Reset •W3C CSS& HTMLvalidator •Selectors
  160. 160. References •CSS Positioning 101 •CSS Floats •Containing Floats •960 Grid System •Twitter’s Bootstrap •Basic CSS layouts(learn by view-source) •A ton of CSS Snippets(from css-tricks.com) •Modernizrlist of Polyfills
  161. 161. References •CSS 3 Modules (MDN) •CSS 3 Demo Studio

Editor's Notes

  • Welcome to the CSS Worshop


    This workshop is essentially introdutory, but event if you’ve been using CSS for years, it can still be useful. Most people think that CSS is like a mystical art that nobody truly understands... Sometimes it works, sometimes it doesn’t...
  • People are usually afraid of CSS and try to understand it as little as possible and hack with it instead of building with it. Nothing good ever comes out of this approach.
    Browser bugs and incompatibilities don’t help here, but the fact that people don’t even try to read and understand the specifications helps even less.
  • Typically this is how our css ends up looking like....
  • The three major pillars for websites and web applications are:
    HTML
    CSS
    JavaScript

    In this workshop we’ll focus on the CSS.
  • Cascading Style Sheets or CSS are set up so that you can have many properties all affecting the same element. Some of those properties may conflict with one another. For example, you might set a font color of red on the paragraph tag and then later on set a font color of blue. 


    There are three different types of style sheets

    Author Style Sheets
    User Style Sheets
    User Agent Style Sheets
  • Basic CSS rule syntax... Selectors, properties and values
  • Kinds of selectors:
    - tag: html tag (h1, div)
    class
    id
    pseudo-class: to add special effects do some selectors
    attribute: html elements can have specific attributes, not just ID and class
  • Kinds of selectors:
    - tag: html tag (h1, div)
    class
    id
    pseudo-class: to add special effects do some selectors
    attribute: html elements can have specific attributes, not just ID and class
  • Kinds of selectors:
    - tag: html tag (h1, div)
    class
    id
    pseudo-class: to add special effects do some selectors
    attribute: html elements can have specific attributes, not just ID and class
  • Kinds of selectors:
    - tag: html tag (h1, div)
    class
    id
    pseudo-class: to add special effects do some selectors
    attribute: html elements can have specific attributes, not just ID and class
  • Kinds of selectors:
    - tag: html tag (h1, div)
    class
    id
    pseudo-class: to add special effects do some selectors
    attribute: html elements can have specific attributes, not just ID and class
  • Let’s see some examples of selectors.
    Consider the html displayed below, which elements will be selected with the selectors above.
  • Let’s see some examples of selectors.
    Consider the html displayed below, which elements will be selected with the selectors above.
  • Let’s see some examples of selectors.
    Consider the html displayed below, which elements will be selected with the selectors above.
  • Let’s see some examples of selectors.
    Consider the html displayed below, which elements will be selected with the selectors above.
  • Let’s see some examples of selectors.
    Consider the html displayed below, which elements will be selected with the selectors above.
  • There are tons of kinds of selectors.
    Most of them you don’t need on a daily basis though some web designers like to use them all.
    Most browsers don’t really support all of them.
  • Selectors can be made out of combinations of selectors.
    One of the most important is the ability to define multiple selectors for the same style.
  • Another very important combo is Elements inside another.
  • Selectors can be made out of combinations of selectors
  • An example
  • If an element is matched by many selectors, the resulting style depends on the priority of the selectors:
    Inline style
    Id selector
    Class / attribute selector
    HTML tags selectors
    All elements
  • Specs recommend using #identifiers for styles that appl to a single element but that’s hard in SS because IDs are generated dynamically.
  • The order of definition in the CSS file is another important thing to have in consideration.
    The last redefinition is te one how “wons”, overriding the previous definitions and eventually adding new ones.
  • Important note, how imports work:

    Link to css added with function HTTPRequestHandler.AddStyleTag
    webblock CSS
    Theme CSS
    Page CSS
    Inline import CSS
  • Overrides: border, font-style, color
    In the end, 5 properties are merged: 2 directly applied and 1 inherited
    Every element has some style (even if user-agent provided)
    Beware of collapsed properties (eg: border)
  • There’s a ton of them. They serve several aspects of a design. Everyday new properties start getting support from browser vendors.
  • Probably there’s already a property for whatever you’re thinking of doing.
    W3C and Mozilla are good resources for finding out about properties
  • Clone eSpace CSSShopExercises
  • Clone eSpace CSSShopExercises
  • Clone eSpace CSSShopExercises
  • Now we’re going to see how can we tackle CSS problems faster
    Changing faster means faster improvements and better ideas.
    If the feedback is instantaneous, your productivity will be unmatched.
  • OutSystems allows 1-click-publish but it’s still nothing like instant feedback.
    You change, publish, wait, refresh, refresh again, get back... What were you editing?
  • We can use firebug for instant feedback. You can sit down with a stakeholder for your project or with your designer, and make changes in place.


    Some example of what could be done:
    border-radius: 10px 10px 10px 10px;
    border: 1px solid #00C812;
    color: white;
    cursor: pointer;
    font-size: large;
    padding: 10px 20px;
    background: -webkit-linear-gradient(top, #9DD53A 0%, #A1D54F 50%, #7CBC0A 100%)
    background: -webkit-linear-gradient(top, rgba(248,80,50,1) 0%,rgba(241,111,92,1) 50%,rgba(246,41,12,1) 51%,rgba(240,47,23,1) 71%,rgba(231,56,39,1) 100%);
  • We can use firebug for instant feedback. You can sit down with a stakeholder for your project or with your designer, and make changes in place.


    Some example of what could be done:
    border-radius: 10px 10px 10px 10px;
    border: 1px solid #00C812;
    color: white;
    cursor: pointer;
    font-size: large;
    padding: 10px 20px;
    background: -webkit-linear-gradient(top, #9DD53A 0%, #A1D54F 50%, #7CBC0A 100%)
  • SS doesn’t allow making use of some fancy elements. But do we need such elements?
  • We can use containers for everything and differentiate the original element tag with classes
  • We can use containers for everything and differentiate the original element tag with classes
  • We can use containers for everything and differentiate the original element tag with classes
  • Most of us have a lot of trouble when the time comes to layout stuff in the screen using CSS.
    How does it work? What guidelines can we use to help us?
  • We should recognize all elements rendered by a browser as boxes. All elements means...
  • Paragraphs live in boxes
  • Bullets live in boxes
  • Some elements aren’t really boxes... They’re inline ... But they can be inline boxes.
  • Rule of thumb... Everything is a box.
  • Another thing you should learn about boxes is that boxes have dimensions
  • Inner width and height
  • Border widths
  • Padding (an internal margin)
  • Margin, the external margin

    Do you actually know a very useful difference between margin and padding?
    Margins, if the element isn’t inline, overlap!
  • You can check those dimensions in your favorite web debugging tool... Search for Layout and see
  • You’ll often want to play with dimensions... Using borders to give elements some relevance, using padding to let their contents breathe.
  • And you’ll have to remember that most times dimensions don’t work as you’re expecting
    The box on the left has 200px height
    The box on the right has style=“height:200px;”. But it’s true taller. Why?
  • Height is the inner height, which differs from the visible height. Remember to add padding and border width.
    This is called the W3C box model.
  • In this case, 150px of height gives us a visible height of 200px.
  • Sometimes border and padding do make a lot of difference.
  • And you’ll have to remember that most times dimensions don’t work as you’re expecting
    The box on the left has 200px height
    The box on the right has style=“height:200px;”. But it’s true taller. Why?
  • So what have we seen until here?
    - We know about CSS rules
    We can use firebug for instant feedback
    We know that browsers behave differently
    We know everything is a box.
    How do we layout those boxes?
  • Let’s see lifetime
    And let’s remember that everything is a box
    Header is full of boxes, etc.
  • Boxes are layed out according to gravity, which means they go up and fill all the horizontal space they can
  • Sometimes we want to have items side by side
  • So we can’t let the boxes fill the whole horizontal space
  • We have to allow them to float
    By floating, they get cornered
    We have to apply a clear rule to escape the floating
  • A common technique known as clearfix is to have an invisible clearer.
  • The reason why floats are kind of bad is because they live in their own flow
    If you put a floated element inside a non-floated element, the outside element will act as if the inside element wasn’t even there. Yuck!
  • Inline-blocks are way more intuitive. If you can (if you don’t need to support IE6), use them. You can thank me later.
  • See lifetime? No IE6 so we have blocks (lines) and inline-blocks (columns).
    We didn’t use a tablerecords because we didn’t know how many columns (environments) we would have
    So we have a listrecords with the line-blocks, and inside it a list-records with the inline-block cells.
    Who needs tables?
  • See lifetime? No IE6 so we have blocks (lines) and inline-blocks (columns).
    We didn’t use a tablerecords because we didn’t know how many columns (environments) we would have
    So we have a listrecords with the line-blocks, and inside it a list-records with the inline-block cells.
    Who needs tables?
  • Floats and inline blocks flow in a liquid layout: they adapt to their container.
    What happens when we resize that container?
  • Now that you know about how to layout the boxes
    Try emulating this layout
  • Boxes are everywhere... If you get used to seeing them, designing with CSS will become way much easier
    Another thing that you can recognize is that most pages flow in a grid with rows and columns
  • Boxes are everywhere... If you get used to seeing them, designing with CSS will become way much easier
    Another thing that you can recognize is that most pages flow in a grid with rows and columns
  • Boxes are everywhere... If you get used to seeing them, designing with CSS will become way much easier
    Another thing that you can recognize is that most pages flow in a grid with rows and columns
  • Sometimes laying out the boxes using the document flow isn’t enough. Sometimes we just want our boxes to fly.
  • We can relatively escape the document gravity by using relative positioning.
    The base coordinates for relative positioning have their origin where the element should be
    The element’s space is kept, so if we want it to be ignored, we can specify a negative margin of it’s own size.
    Negative margins can be used to make your elements take less space and even take no space at all.
  • Another kind of positioning is the absolute positioning.
    In absolute positioning the coordinates are set in the document (more on that later) and the elements are actually removed from the document flow; their space is removed.
    You can also use right and bottom coordinates instead of left and top
    Absolute positioning sets the coordinates to the first non-static element.
  • Firebug the links to be a right menu.
  • Firebug the buttons to invert their order
  • We’ve put some gradients and round corners, etc. Those CSS properties work only in the so called modern browsers. What happens when we have to support older browsers?
  • This doesn’t mean you can forget about older browsers...
    Browser compatibility means you have to support every browser, be it through graceful degradation or other methods.
  • What browsers will you support in the next 10 years?
  • Graceful degradationi is the art of letting go. Are the round corners really that important or could the % of people using IE7 live without them?
  • As browsers get older, their share dimminuishes, so you have to manage the time you spend making things pixel-perfect-the-same
  • As browsers get older, their share dimminuishes, so you have to manage the time you spend making things pixel-perfect-the-same
  • Check your users’ browser share and don’t forget to check on IE’s versions.
    Supporting IE is different from supporting IE6…
  • Check your users’ browser share and don’t forget to check on IE’s versions.
    Supporting IE is different from supporting IE6…
  • In IE& the “shoes” and the “hat” actually count as visual height.
  • Join the movement!
  • There are some tools at your disposal to help with browser compatibility
  • You can use conditional CSS by using hacks (eg: star-property is only recognized in IE7, underscore in IE6)
  • You can use conditional CSS by using hacks (eg: star-property is only recognized in IE7, underscore in IE6)
  • You can use conditional CSS by using hacks (eg: star-property is only recognized in IE7, underscore in IE6)
  • You can use conditional CSS by using hacks (eg: star-property is only recognized in IE7, underscore in IE6)
  • You can use conditional CSS by using hacks (eg: star-property is only recognized in IE7, underscore in IE6)
  • You can use more readable approaches.
    If you were using modernizr, you could use .no-round-corners instead of .ie7.
  • Modernizr doesn’t make your browser more moddern
    It makes it recognize some elements and provides feature detection so you can verify if your browser supports round corners instead of checking if the browser is IE<9.
  • Polyfills emulate new functionality on browsers that don’t support it. Usually this happens by the means of scripts that emulate behaviors and running features that were supposed to be native using scripts comes at a cost.
    Sometimes pages hang, sometimes script errors occur, sometimes your layout gets all screwed. Be careful and test these alternatives a lot.
  • Firebug the links to be a right menu.
  • What was wrong? CSS contaminates
  • Normalize: sets the same style across browsers preserving some defaults
    Reset: completely overrides the browsers css in order to flatten them up
  • When you’re creating widgets, try to get your style self-contained.
    A good practice is to use a common prefix to all your styles and not to use selectors that are way too generic.
  • http://www.outsystems.com/forums/discussion/12100/how-to-build-a-fluid-grid/
  • Media Queries is a CSS3 module allowing content rendering to adapt to conditions such as screen resolution (e.g. smartphone vs. high definition screen). It became a W3C recommended standard in June 2012.[1] and is a cornerstone technology of Responsive web design.
  • As with all good things, this presentation must come to an end
  • Always be pragmatic
  • There’s no magic. If you don’t understand a behavior, take the time to read the standard, it will make you a lot faster in the future.
  • Instant prototyping is king
  • Questions and requests?

×