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

1. CSS Shop
Learn yourself some CSS, the fast way.

2. WhoamI?
Rúben Gonçalves
A CSS lover@ OutSystems
ruben.goncalves@outsystems.com
rubengoncalves
Kudosto Marco Costa andMiguel Ventura for makingthispossible.

3. "Any technology sufficiently advanced is indistinguishable from magic."
-Arthur C. Clark
No Magic.

4. Advanced CSS Solutions

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. 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. 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. 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. 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. Syntax 101
<selector> {
<property>: <value>;
<property>: <value>;
...
}

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. 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. 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. 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. 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. 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. 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. 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. 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. 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. Syntax 101 –Selectors

22. Syntax 101 -Selector COMBOs
•Apply same style to many selectors
oselector 1,selector 2

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. 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. Syntax 101 -Selector COMBOs
#container div.deployButton a:hover,
#container div.deployButton input[disabled]:active{
background-color: red;
}
Let’sseetheeffect

26. Syntax 101 –Rule Priority
•Most specific wins
1.style=“value”
2.#someid
3..classor [attributes]
4.tags
5.*

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. Syntax 101 –Rule Priority
•Definitionordermatters

29. Syntax101 –RulePriority
Example

30. CSS Import Order

31. Syntax 101 –Rule Priority
Example
<divclass="outer"id="outerdiv">
<divclass="inner"id="innerdiv1">
hello
</div>
</div>
Let’sseetheeffect

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. Syntax 101 -Properties
Thinking of doing X?
There's probably a CSS property for that.
Good references:
•W3C CSS spec
•MDN

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. Exercise 1
•Follow the instruction on page Exercise1

36. Exercise 2
•Follow the instruction on page Exercise2

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. http://worrydream.com/#!/LadderOfAbstraction
Instant Feedback= Faster Improvement & Better Ideas

39. You need instant feedback... Uhh... Where was I?

40. Inspector Demo!

41. Inspector Demo!

42. Case Study

43. CSS3
Eye candy effects

44. CSS3
Eye candy effects
And lots of really useful stuff
Transforms, transitions, animations, gradients, multiple columns, multiple backgrounds, counters, flexboxes, speech, fonts, ...

45. CSS3
Cool
Experimental
Use with caution

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. 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. Converting from a template: classify everything!
<sectionid="sec01"class="first">
markup
styles
section{font-weight: bold; }
#sec01{font-style: italic; }

49. Converting from a template: classify everything!
<sectionid="sec01"class="first">
markup
styles
.tag-section{font-weight: bold; }
.id-sec01 {font-style: italic; }

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. How about the widget tree?

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. Time wise, do only the red part

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. How Layout Works

56. Rule: Everything is boxes!

57. Rule: Everything is boxes!

58. Box model
Paragraphs live in blockboxes

59. Box model
Lists live in blockboxes

60. Box model

61. Box model
Some elements are inline (they run along with the text) and have no dimensions

62. Rule: Everything is boxes!

63. Rule: Boxes have dimensions

64. Box Dimensions

65. Box Dimensions –width & height

66. Box Dimensions -border

67. Box Dimensions -padding

68. Box Dimensions -margin

69. Measuring
All values are editable!

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. width: 200px;
height: 200px;
border: solid5pxorange;
padding: 20px;

72. W3C Box ModelHeightVisible Height

73. height: 150px;
border: solid5pxorange;
padding: 20px;

74. W3C Box Model
div {
height: 20px;
padding: 20px;
border: 20px;
}
visible height will be 100px

75. However...
... we can change the way the box model works!

76. width: 200px;
height: 200px;
border: solid5pxorange;
padding: 20px;
box-sizing: border-box;

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. Laying out the boxes
http://www.flickr.com/photos/s_volenszki/2218589271

79. Laying out the boxes

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. Side by Side

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. 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. 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. “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. Floats example
See example

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. 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. Laying out the boxesdisplay: block;

90. Laying out the boxesdisplay: inline-block;

91. Floats and Inlines are fluid
They adapt to whatever space they have

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. Exercise 4
•This is a no codingexercise!
•If you can print the next slide
•Try to layout the context in boxes

95. Solution Time?

97. Exercise 5
•Let’s implement now the previous layout
•Go to Exercise 5page

98. Think with boxing in mind (rather than tables)

99. Think with boxing in mind (rather than tables)

100. Think with boxing in mind (rather than tables)

101. Agenda
•CSS b-a-ba
•Bug? Inspect it!
•Bring to OSDE
•Box Model
•Box placement
•Vertical Alignment
•Browser compatibility
•CSS BestPratices
•Grids & Media queries

102. 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

103. Mastering Positioning

104. 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;

105. 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

106. Positioning
Relativetakes space, absolutedoesn’t
Absolutecoordinates are relatively absolute
You can set dimensions using positioning
More info

107. Exercise 6
•Follow the instruction on page Exercise 6

108. Exercise 7
•Follow the instruction on page Exercise 7
•You may do this exercise directly in the browser inspector.

109. What about old browsers?

110. Agenda
•CSS b-a-ba
•Bug? Inspect it!
•Bring to OSDE
•Box Model
•Box placement
•Vertical Alignment
•Browser compatibility
•CSS BestPratices
•Grids & Media queries

111. Browser compatibility

112. Browser compatibility

113. 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)

114. Browsers behave differently
Can you live with it?
Graceful Degradation
Yes

115. Graceful Degradation
Theart of letting go those round corners.
.c {
background-image:
linear-gradient(blue,navy);
/* fallback to a normal blue */
background-color: blue;
}

116. Graceful Degradationborder radiusbox shadow inset but we can affordnot having them

117. Graceful Degradation
Chrome
IE 7/8

118. Browsers behave differently
Can you live with it?
Graceful Degradation
Oh boy...
Yes
No

119. Browsers behave differently
Oh boy...
No
Is there a mainbrowser?
No
Find one!
Install it everywhere!
Yes

120. DefiningthebaselineBrowser
•Define fromstartbrowsers scope
•Checkthesite analitics

121. DefiningthebaselineBrowser
•Define fromstartbrowsers scope
•Checkthesite analitics
It’snotenoughto sayIE… Specifytheversionas well!
(IE7, IE8, …)

122. Browsers STILLbehavedifferently
Oh boy...
No
Baselinebrowser installed!
Well… Therewillbealwaysdiferences

123. Browsers STILLbehavedifferently
Oh boy...
No
Baselinebrowser installed!
Well… Therewillbealwaysdiferences

124. 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

126. FlatteningBrowsers diferences
•Weapons ofchoice
oCSS Hacks
oConditionalCSS
oModernizr, Polyfills

127. CSS Hacks
•Youcanuse hacksifyouhaveto:
.c {border-radius: 10px; }
.c{_border: 1px solid black; }
<= IE6

128. CSS Hacks
•Youcanuse hacksifyouhaveto:
.c {border-radius: 10px; }
.c{_border: 1px solid black; }
.c{*border: 1px solid black; }
<= IE7

129. CSS Hacks
•Youcanuse hacksifyouhaveto:
.c {border-radius: 10px; }
.c{_border: 1px solid black; }
.c{*border: 1px solidblack; }
.c{border: 1px solid black9; }
<= IE8

130. 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

131. 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

132. 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; }

133. 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

134. Modernizr
•Differentpackages
•Differentoutputs
.c {border-radius: 10px; }
.ie7 .c{border: 1px solid black; }

135. 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)

136. Polyfills
•Conditionsto use:
oSmallchanges
oFewelements
•ExampleofusageinOS: PIE

137. Agenda
•CSS b-a-ba
•Bug? Inspect it!
•Bring to OSDE
•Box Model
•Box placement
•Vertical Alignment
•Browser compatibility
•CSS BestPratices
•Grids & Media queries

138. Exercise 8
•Troubleshoot the problem using the inspector
•Final page should like this:

139. Exercise 8 solution
BINGO!

140. CSS contaminates

141. CSS contaminatesBrowser defaults -CSS Resets
•Normalize.css
ohttp://necolas.github.com/normalize.css/
•Reset.css
ohttp://meyerweb.com/eric/tools/css/reset/

142. CSS contaminates
Building a widget library?
.my-widgets-nav{/* ... */}
.my-widgets-picker{/* ... */}
.my-widgets-note{/* ... */}
Prefix all things!

143. CSS best practices
•Organize yourcode:
oHTML Tags
oWidgets
oRichWidgets
oValidations
oLayout
oHeader & Footer
oMenu
oOtherClasses
•Use usefulnamingconventions
•Reduce& Reuse

144. 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

145. Agenda
•CSS b-a-ba
•Bug? Inspect it!
•Bring to OSDE
•Box Model
•Box placement
•Vertical Alignment
•Browser compatibility
•CSS BestPratices
•Grids & Media queries

146. Platform Grid

147. Platform Grid Problems?

148. Fluid but not entirely

149. Why not entirelly?
For more details check this post

150. Media Queries
“allows the content rendering to adapt to conditions such as screen resolution“

151. Media queries

152. Media queries syntax
Learn more @ MDN

153. RWD?!

154. “responsive web design isn’tintended to serve as a replacementfor mobile web sites”

156. 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

157. Final Thoughts

158. 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!

159. No magic

160. Inspect everything

161. CSS in your favor(fast prototyping), never against you!

162. Rúben Gonçalves
ruben.goncalves@outsystems.com
?

163. References
•Compatibilityquickreference
•Checkifyoucanuse anelement
•MostcommonIE Bugs
•Cross-browser CSS
•Normalize.css
•CSS Reset
•W3C CSS& HTMLvalidator
•Selectors

164. 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

165. References
•CSS 3 Modules (MDN)
•CSS 3 Demo Studio