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.
Upcoming SlideShare
Top front-end techniques for OutSystems
Next

12

Share

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

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
  • RodrigoCatarino1

    Dec. 17, 2019
  • ricoabas

    Nov. 23, 2019
  • boryn

    Mar. 27, 2019
  • clementlouis2293

    Feb. 28, 2019
  • phongdle5

    Jan. 3, 2018
  • marinellamastrosimone

    Dec. 12, 2017
  • rfeliberty

    Mar. 15, 2017
  • bass4angerburst

    Aug. 21, 2016
  • MariaanBosman

    Aug. 12, 2016
  • leeroystanderzeiler

    Apr. 21, 2016
  • IdlioVstias

    Mar. 2, 2016
  • BilalHaniff1

    Apr. 19, 2015

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

Views

Total views

6,074

On Slideshare

0

From embeds

0

Number of embeds

13

Actions

Downloads

0

Shares

0

Comments

0

Likes

12

×