UX Bootcamp Code Fitness

Slides from the UX Prototyping in Code workshop http://lanyrd.com/2011/ux-bootcamp-prototying-in-code/sghbr/

Transcript

1. UX BOOTCAMP
   Code Fitness
   

   View Slide

2. Before we get started
   

   View Slide

3. http://jsbin.com
   

   View Slide

4. Javascript
   window
   HTML+ CSS
   window
   Preview window
   (automatically updates)
   [
   [
   [
   View/hide windows
   X
   

   View Slide

5. Switch between code view and full screen preview
   Include a javascript library
   (we won’t need this today)
   

   View Slide

6. Save a branch
   This number changes
   Shareable link!
   

   View Slide

7. HTML
   

   View Slide

8. Interaction
   (Javascript)
   Styles (CSS)
   Markup (HTML)
   

   View Slide

9. HTML ≈ IA
   

   View Slide

10. Browser Defaults
    

    View Slide

11. Label the website printout with the following:
    •main heading
    •paragraph
    •unordered list
    •ordered list
    •image
    •subheading
    •link
    

    View Slide

12. Very basic HTML page
    
    
    
    
    Site name
    
    
    Site Content
    
    
    HTML
    

    View Slide

13. Very basic HTML page
    
    
    
    
    Site name
    
    
    Site Content
    
    
    “I’m writing HTML”
    HTML
    

    View Slide

14. Very basic HTML page
    
    
    
    
    Site name
    
    
    Site Content
    
    
    tag
    HTML
    

    View Slide

15. Very basic HTML page
    
    
    
    
    Site name
    
    
    Site Content
    
    
    browser
    information
    [
    HTML
    

    View Slide

16. Very basic HTML page
    
    
    
    
    Site name
    
    
    Site Content
    
    
    which character encoding we’re using
    HTML
    

    View Slide

17. Very basic HTML page
    
    
    
    
    Site name
    
    
    Site Content
    
    
    appears in browser tab
    HTML
    

    View Slide

18. Very basic HTML page
    
    
    
    
    Site name
    
    
    Site Content
    
    
    appears on page
    [
    HTML
    

    View Slide

19. Opening & Closing T
    ags
    A heading
    
    Some text
    
    
    Some self-closing tags:
    Some tags that close because they contain text:
    HTML
    HTML
    HTML
    HTML
    

    View Slide

20. Opening & Closing T
    ags
    
    A heading
    Some text
    
    body
    h1 p
    HTML
    

    View Slide

21. Paragraphs
    This is a paragraph.
    This is another paragraph.
    screenshot from bbc.co.uk/news
    HTML
    

    View Slide

22. Headings
    This is a heading
    This is a paragraph.
    screenshot from bbc.co.uk/news
    HTML
    

    View Slide

23. Unordered List
    
    List item 1
    List item 2
    List item 3
    
    screenshot from bbc.co.uk/news
    HTML
    

    View Slide

24. Ordered List
    
    List item 1
    List item 2
    List item 3
    
    screenshot from bbc.co.uk/news
    HTML
    

    View Slide

25. Links
    This is
    the link text.
    screenshot from bbc.co.uk/sport
    HTML
    

    View Slide

26. Images
    nyancat.jpg” />
    HTML
    

    View Slide

27. Comments
    
    HTML
    

    View Slide

28. Mark up the contents of this page:
    http://goo.gl/y2pqJ
    

    View Slide

29. Heading 1
    Paragraph
    Link
    Heading 2
    
    Unordered List
    
    
    
    Ordered List
    
    HTML
    HTML
    HTML
    HTML
    HTML
    HTML
    HTML
    

    View Slide

30. Style
    

    View Slide

31. Interaction
    (Javascript)
    Styles (CSS)
    Markup (HTML)
    

    View Slide

32. Writing CSS
    
    
    CSS Flexbox prototype
    <br/>…<br/>
    
    HTML
    

    View Slide

33. h1
    “selector”
    Writing CSS
    CSS
    

    View Slide

34. h1 {
    open the curly brace
    Writing CSS
    CSS
    

    View Slide

35. h1 {
    font-family
    “property”
    Writing CSS
    CSS
    

    View Slide

36. h1 {
    font-family:
    add a colon
    Writing CSS
    CSS
    

    View Slide

37. h1 {
    font-family: Georgia
    Writing CSS
    “value”
    CSS
    

    View Slide

38. h1 {
    font-family: Georgia;
    finish with a semi-colon
    Writing CSS
    CSS
    

    View Slide

39. h1 {
    font-family: Georgia;
    color: green;
    start a new line, add more styles
    Writing CSS
    CSS
    

    View Slide

40. h1 {
    font-family: Georgia;
    color: green;
    }
    close the curly brace
    Writing CSS
    CSS
    

    View Slide

41. h1 {
    font-family: Georgia;
    color: green;
    }
    Writing CSS
    CSS
    

    View Slide

42. Adding more styles
    h1 {
    font-family: Georgia;
    color: green;
    }
    p {
    font-family: Verdana;
    color: pink;
    }
    CSS
    

    View Slide

43. Comments
    
    /* This is a CSS comment */
    HTML
    CSS
    

    View Slide

44. Heading
    Heading
    Lorem ipsum dolor sit
    amet.
    Lorem ipsum dolor sit
    amet.
    HTML
    

    View Slide

45. Heading
    Heading
    Lorem ipsum dolor sit
    amet.
    Lorem ipsum dolor sit
    amet.
    Heading
    h1 {
    font-family: Arial;
    color: green;
    }
    Lorem ipsum dolor sit
    amet.
    HTML
    CSS
    

    View Slide

46. Heading
    Lorem ipsum dolor sit
    amet.
    Lorem ipsum dolor sit
    amet.
    Heading
    h1 {
    font-family: Georgia;
    color: green;
    }
    p {
    color: red;
    font-weight:bold;
    }
    Lorem ipsum dolor
    sit amet.
    Heading
    HTML
    CSS
    

    View Slide

47. Try giving everything on your page a
    different background color
    Open this in another tab for reference:
    http://goo.gl/tngWK
    (don’t forget, American spelling)
    

    View Slide

48. Grouping styles
    

    View Slide

49. Heading
    h1 {
    font-family: Arial;
    color: green;
    }
    p {
    font-family: Arial;
    color: green;
    }
    Lorem ipsum dolor
    sit amet.
    CSS
    

    View Slide

50. Heading
    h1 {
    font-family: Arial;
    color: green;
    }
    p {
    font-family: Arial;
    color: green;
    }
    Lorem ipsum dolor
    sit amet.
    Heading
    h1, p {
    font-family: Arial;
    color: green;
    }
    Lorem ipsum dolor
    sit amet.
    CSS
    

    View Slide

51. Try grouping styles to give all your
    paragraphs and headings the same color
    

    View Slide

52. Sectioning T
    ags
    

    View Slide

53. Heading
    Lorem ipsum dolor sit amet.
    Heading
    Lorem ipsum dolor sit amet.
    HTML
    

    View Slide

54. 
    Heading
    Lorem ipsum dolor sit amet.
    
    Heading
    Lorem ipsum dolor sit amet.
    HTML
    

    View Slide

55. 
    Heading
    Lorem ipsum dolor sit amet.
    
    Heading
    Lorem ipsum dolor sit amet.
    div {
    background-color: hotpink;
    color: white;
    }
    CSS
    HTML
    

    View Slide

56. Add some tags to the bits of content
    on your page that you think should be
    grouped
    

    View Slide

57. Dimensions
    

    View Slide

58. 
    Heading
    Lorem ipsum dolor sit amet.
    
    Heading
    Lorem ipsum dolor
    sit amet.
    div {
    background-color: hotpink;
    color: white;
    width:250px;
    }
    HTML
    CSS
    

    View Slide

59. 
    Heading
    Lorem ipsum dolor sit amet.
    
    Heading
    Lorem ipsum dolor sit
    amet.
    div {
    background-color: hotpink;
    color: white;
    width:50%;
    }
    HTML
    CSS
    

    View Slide

60. Style with class
    

    View Slide

61. Lorem ipsum
    Dolor sit amet
    Consectetuer adipiscing
    div {
    background-color:yellow; …
    }
    Dolor sit amet
    Lorem ipsum Consectetuer
    adipiscing
    HTML
    CSS
    

    View Slide

62. Lorem ipsum
    Dolor sit amet
    Consectetuer adipiscing
    div {
    background-color:yellow; …
    }
    Dolor sit amet
    Lorem ipsum
    we want to target this one
    Consectetuer
    adipiscing
    HTML
    CSS
    

    View Slide

63. Lorem ipsum
    Dolor sit amet
    Consectetuer adipiscing
    div {
    background-color:yellow; …
    }
    Dolor sit amet
    Lorem ipsum Consectetuer
    adipiscing
    HTML
    CSS
    

    View Slide

64. Lorem ipsum
    Dolor sit amet
    Consectetuer adipiscing
    div {
    background-color:yellow; …
    }
    Dolor sit amet
    Lorem ipsum Consectetuer
    adipiscing
    use classes as “hooks” for styling
    HTML
    CSS
    

    View Slide

65. Lorem ipsum
    Dolor sit amet
    Consectetuer adipiscing
    div {
    background-color:yellow; …
    }
    .alert {
    background-color:red;
    }
    Dolor sit amet
    Lorem ipsum Consectetuer
    adipiscing
    HTML
    CSS
    

    View Slide

66. Class tips
    • When using a class, think about what it is rather than
    how it looks
    • Don’t start with a numeral or symbol
    • You can use a class more than once, and have different
    styles for it depending on where it’s nested.
    

    View Slide

67. IDs
    • Can only be used once on a page
    • Used for navigating between sections on the same
    page
    
    Lorem ipsum
    
    #content {…}
    HTML
    CSS
    

    View Slide

68. Give your s different styles
    

    View Slide

69. Navigation
    

    View Slide

70. Back to the list
    
    List item 1
    List item 2
    List item 3
    
    •List item 1
    •List item 2
    •List item 3
    HTML
    

    View Slide

71. Back to the list
    •List item 1
    •List item 2
    •List item 2.1
    •List item 2.2
    •List item 3
    
    List item 1
    List item 2
    
    List item 2.1
    List item 2.2
    
    
    List item 3
    
    HTML
    

    View Slide

72. Back to the list
    •List item 1
    •List item 2
    •List item 2.1
    •List item 2.2
    •List item 3
    
    List item 1
    List item 2
    
    List item 2.1
    List item 2.2
    
    
    List item 3
    
    HTML
    

    View Slide

73. Back to the list
    •List item 1
    •List item 2
    •List item 2.1
    •List item 2.2
    •List item 3
    
    List item 1
    List item 2
    
    List item 2.1
    List item 2.2
    
    
    List item 3
    
    HTML
    

    View Slide

74. Back to the list
    
    
    List item 1
    List item 2
    List item 3
    
    
    •List item 1
    •List item 2
    •List item 3
    HTML
    

    View Slide

75. Add some navigation to your page linking to
    external sites
    

    View Slide

76. Borders, margin and padding
    

    View Slide

77. View Slide

78. View Slide

79. margin-bottom: 10px
    [
    [
    (also margin-bottom on
    the box above)
    

    View Slide

80. padding: 5px
    [
    

    View Slide

81. border: 1px solid grey
    [
    

    View Slide

82. div {
    …
    }
    Lorem ipsum dolor sit
    amet, consectetuer
    adipiscing elit. Donec
    odio.
    Quisque volutpat mattis eros. Nullam
    malesuada erat ut turpis.
    CSS
    

    View Slide

83. div {
    padding-bottom: 20px;
    }
    Lorem ipsum dolor sit
    amet, consectetuer
    adipiscing elit. Donec
    odio.
    Quisque volutpat mattis eros. Nullam
    malesuada erat ut turpis.
    CSS
    

    View Slide

84. div {
    padding: 20px;
    }
    Lorem ipsum dolor sit
    amet, consectetuer
    adipiscing elit. Donec
    odio.
    Quisque volutpat mattis
    eros. Nullam malesuada
    erat ut turpis.
    CSS
    

    View Slide

85. div {
    padding: 20px 20px 0 20px;
    }
    Lorem ipsum dolor sit
    amet, consectetuer
    adipiscing elit. Donec
    odio.
    Quisque volutpat mattis
    eros. Nullam malesuada
    erat ut turpis.
    CSS
    

    View Slide

86. div {
    margin-right: 20px;
    }
    Quisque volutpat mattis eros.
    Nullam malesuada erat ut turpis.
    Lorem ipsum dolor sit
    amet, consectetuer
    adipiscing elit. Donec
    odio.
    CSS
    

    View Slide

87. div {
    margin: 20px;
    }
    Quisque volutpat mattis eros.
    Nullam malesuada erat ut
    turpis.
    Lorem ipsum dolor sit
    amet, consectetuer
    adipiscing elit. Donec
    odio.
    CSS
    

    View Slide

88. Lorem ipsum dolor sit
    amet, consectetuer
    adipiscing elit. Donec
    odio.
    width: 200px
    Total Width: 200px
    Quisque volutpat mattis
    eros. Nullam malesuada
    erat ut turpis.
    Quisque volutpat mattis
    eros. Nullam malesuada
    erat ut turpis.
    

    View Slide

89. Lorem ipsum dolor sit
    amet, consectetuer
    adipiscing elit. Donec
    odio.
    width: 200px
    Total Width: 210px
    padding: 10px
    Quisque volutpat mattis
    eros. Nullam malesuada
    erat ut turpis.
    Quisque volutpat
    mattis eros. Nullam
    malesuada erat ut
    turpis.
    

    View Slide

90. Lorem ipsum dolor sit
    amet, consectetuer
    adipiscing elit. Donec
    odio.
    width: 200px
    Total Width: 220px
    padding: 10px padding: 10px
    Quisque volutpat
    mattis eros. Nullam
    malesuada erat ut
    turpis.
    Quisque volutpat
    mattis eros. Nullam
    malesuada erat ut
    turpis.
    

    View Slide

91. Lorem ipsum dolor sit
    amet, consectetuer
    adipiscing elit. Donec
    odio.
    width: 200px
    Total Width: 230px
    padding: 10px padding: 10px
    Quisque volutpat
    mattis eros.
    Nullam
    malesuada erat ut
    turpis.
    margin: 10px
    Quisque volutpat
    mattis eros. Nullam
    malesuada erat ut
    turpis.
    

    View Slide

92. Lorem ipsum dolor sit
    amet, consectetuer
    adipiscing elit. Donec
    odio.
    width: 200px
    Total Width: 240px
    padding: 10px padding: 10px
    Quisque volutpat
    mattis eros.
    Nullam
    malesuada erat ut
    turpis.
    Quisque volutpat
    mattis eros.
    Nullam
    malesuada erat ut
    turpis.
    margin: 10px
    margin: 10px
    

    View Slide

93. Lorem ipsum dolor sit
    amet, consectetuer
    adipiscing elit. Donec
    odio.
    width: 200px
    Total Width: 248px
    padding: 10px padding: 10px
    Quisque volutpat
    mattis eros.
    Nullam
    malesuada erat ut
    turpis.
    Quisque volutpat
    mattis eros.
    Nullam
    malesuada erat ut
    turpis.
    margin: 10px
    margin: 10px
    border:4px
    border:4px
    

    View Slide

94. Add some margin, padding and borders to
    your page.
    Tip: Try adding a left and right margin to your body. Adding
    a margin of “auto” to it centres everything.
    

    View Slide

95. Floats
    

    View Slide

96. How floats work
    nav
    div
    div
    

    View Slide

97. How floats work
    nav {
    width:30%;
    }
    div {
    width:70%;
    }
    div {
    width:70%;
    }
    

    View Slide

98. How floats work
    nav {
    width:30%;
    float:left;
    }
    div {
    width:70%;
    }
    div {
    width:70%;
    }
    

    View Slide

99. How floats work
    nav {
    width:30%;
    float:left;
    }
    div {
    width:70%;
    float:left;
    }
    div {
    width:70%;
    }
    

    View Slide

100. How floats work
     nav {
     width:30%;
     float:left;
     }
     div {
     width:65%;
     float:left;
     }
     div {
     width:70%;
     float:left;
     }
     

     View Slide

101. How floats work
     nav {
     width:30%;
     float:left;
     }
     div {
     width:65%;
     float:right;
     }
     div {
     width:65%;
     float:right;
     }
     

     View Slide

102. Have a look at:
     Try creating a 2 column layout using floats.
     How about 3 columns?
     http://goo.gl/iRwsr
     

     View Slide

103. Specificity
     

     View Slide

104. Using more than one class
     
     There’s been an error
     
     .alert {
     border: 2px solid grey;
     background-color: yellow;
     }
     There has been an error
     HTML
     CSS
     

     View Slide

105. Using more than one class
     
     There’s been an error
     
     .alert {
     border: 2px solid grey;
     background-color: yellow;
     }
     .error {
     background-color: red;
     }
     There has been an error
     HTML
     CSS
     

     View Slide

106. Lorem ipsum
     Dolor sit amet
     Dolor sit amet
     Lorem ipsum
     Specificity
     HTML
     

     View Slide

107. Lorem ipsum
     Dolor sit amet
     Specificity
     Dolor sit amet
     Lorem ipsum
     HTML
     

     View Slide

108. Lorem ipsum
     Dolor sit amet
     .highlight {
     background-color:yellow;
     }
     Specificity
     Dolor sit amet
     Lorem ipsum
     HTML
     CSS
     

     View Slide

109. Lorem ipsum
     Dolor sit amet
     .highlight {
     background-color:yellow;
     }
     Specificity
     Lorem ipsum
     ipsum
     Dolor sit amet
     HTML
     CSS
     

     View Slide

110. p.highlight {…}
     p .highlight {…}
     .highlight {…}
     Spacing is important
     Any element with a class
     of “highlight”
     Any paragraph with a
     class of “highlight”
     Anything with a class of
     “highlight” that’s within a
     paragraph
     CSS
     CSS
     CSS
     

     View Slide

111. Read CSS backwards
     div.content p .highlight {
     …
     }
     These styles apply to…
     CSS
     

     View Slide

112. Read CSS backwards
     div.content p .highlight {
     …
     }
     Anything that has a class of highlight
     CSS
     

     View Slide

113. Read CSS backwards
     div.content p .highlight {
     …
     }
     That’s within a paragraph
     CSS
     

     View Slide

114. Read CSS backwards
     div.content p .highlight {
     …
     }
     That’s within a div that has a class of “content”
     CSS
     

     View Slide

115. Lorem ipsum
     Dolor sit amet
     p.highlight {
     background-color:yellow;
     }
     Specificity
     Lorem ipsum
     Dolor sit amet
     HTML
     CSS
     

     View Slide

116. Lorem ipsum
     Dolor sit amet
     p .highlight {
     background-color:yellow;
     }
     Specificity
     Lorem ipsum
     ipsum
     Dolor sit amet
     HTML
     CSS
     

     View Slide

117. Lorem ipsum
     Dolor sit amet
     .highlight {
     background-color:yellow;
     }
     Specificity
     Lorem ipsum
     ipsum
     Dolor sit amet
     HTML
     CSS
     

     View Slide

118. Lorem ipsum
     Dolor sit amet
     span.highlight {
     background-color:yellow;
     }
     Specificity
     Lorem ipsum
     ipsum
     Dolor sit amet
     HTML
     CSS
     

     View Slide

119. Lorem ipsum
     Dolor sit amet
     span .highlight {
     background-color:yellow;
     }
     Specificity
     Lorem ipsum
     Dolor sit amet
     HTML
     CSS
     

     View Slide

120. View Slide

121. Breakdown
     Styles applied to a class will override styles for its element
     Lorem ipsum
     Lorem ipsum
     p { color:blue; }
     HTML
     CSS
     

     View Slide

122. Breakdown
     Class styles override styles applied to their element
     Lorem ipsum
     Lorem ipsum
     p { color:blue; }
     .prominent { color:pink; }
     HTML
     CSS
     

     View Slide

123. Breakdown
     If an element has 2 classes, the one declared last in the
     stylesheet will override the one declared before it
     Lorem ipsum
     Lorem ipsum
     p { color:blue; }
     .prominent { color:pink; }
     .highlight { color:green; }
     HTML
     CSS
     

     View Slide

124. Breakdown
     If an element has 2 classes, the one declared last in the
     stylesheet will override the one declared before it
     Lorem ipsum
     Lorem ipsum
     p { color:blue; }
     .highlight { color:green; }
     .prominent { color:pink; }
     HTML
     CSS
     

     View Slide

125. Breakdown
     A style will override other styles if it defines more selectors
     
     Lorem ipsum
     Lorem ipsum
     
     p { color:blue; }
     .important { color:orange; }
     .highlight { color:green; }
     .prominent { color:pink; }
     HTML
     CSS
     

     View Slide

126. Breakdown
     A style will override other styles if it defines more selectors
     
     Lorem ipsum
     Lorem ipsum
     
     p { color:blue; }
     .important { color:orange; }
     .important .prominent { color:purple; }
     .prominent { color:pink; }
     HTML
     CSS
     

     View Slide

127. Breakdown
     A style will override other styles if it defines more selectors
     
     Lorem ipsum
     
     p { color:blue; }
     .important { color:orange; }
     .important p { color:purple; }
     .important .prominent { color:grey; }
     .prominent { color:pink; }
     HTML
     CSS
     

     View Slide

128. Breakdown
     A style will override other styles if it defines more selectors
     
     Lorem ipsum
     
     p { color:blue; }
     .important { color:orange; }
     .important p { color:purple; }
     .important .prominent { color:grey; }
     .important p.prominent { color:cyan; }
     .prominent { color:pink; }
     HTML
     CSS
     

     View Slide

129. Quiz
     What colour is this paragraph?
     There has been an error
     p { color:blue; }
     .error { color:red; }
     HTML
     CSS
     

     View Slide

130. Quiz
     What colour is this paragraph?
     
     There has been an error
     
     p { color:blue; }
     .prominent { color:green; }
     .error { color:red; }
     HTML
     CSS
     

     View Slide

131. Quiz
     What colour is this paragraph?
     
     There has been an error
     
     p { color:blue; }
     .prominent .error { color:hotpink; }
     .prominent { color:green; }
     .error { color:red; }
     HTML
     CSS
     

     View Slide

132. Quiz
     What colour is this paragraph?
     There has been an
     error
     p { color:blue; }
     .prominent { color:green; }
     .error { color:red; }
     HTML
     CSS
     

     View Slide

133. Quiz
     What colour is this paragraph?
     There has been an
     error
     p { color:blue; }
     p.prominent { color:green; }
     .error { color:red; }
     HTML
     CSS
     

     View Slide

134. Open up the Hackbook:
     Try the following tasks:
     • Apply a background image to the whole page
     • Make your navigation look more realistic using
     background colors and borders
     • Add a table
     http://hackbook.hackasaurus.org
     

     View Slide

135. Advanced Knowledge
     

     View Slide

136. Absolute & Fixed Positioning…
     

     View Slide

137. Have a look at
     http://goo.gl/iizt7
     

     View Slide

138. 
     
     
     
     .box2 {
     position: absolute;
     right: 0;
     top:0;
     }
     .box1
     .box2
     Absolute & Fixed Positioning
     HTML
     CSS
     

     View Slide

139. Absolute & Fixed Positioning
     
     
     
     
     .box1 {
     position: relative
     }
     .box2 {
     position: absolute;
     right: 0;
     top: 0;
     }
     .box1
     .box2
     HTML
     CSS
     

     View Slide

140. Absolute & Fixed Positioning
     
     
     
     
     .box2 {
     position: fixed;
     right: 0;
     top: 0;
     }
     HTML
     CSS
     

     View Slide

141. Absolute & Fixed Positioning
     
     
     
     
     .box1 {
     position: relative
     }
     .box2 {
     position: fixed;
     right: 0;
     top: 0;
     }
     HTML
     CSS
     

     View Slide

142. Flexbox
     

     View Slide

143. Flexbox
     Full demo with all compatible browsers: http://goo.gl/dv9x9
     http://goo.gl/ciXp8
     http://goo.gl/NKQ18
     Not yet.
     

     View Slide

144. Flexbox
     
     …
     …
     
     
     …
     
     …
     HTML
     

     View Slide

145. Flexbox
     .row {
     display:box;
     }
     .column {
     flex-box:1;
     width:0;
     }
     
     
     …
     
     
     
     …
     
     makes columns equal width
     CSS
     

     View Slide

146. Flexbox
     .row {
     display:box;
     }
     .column {
     flex-box:1;
     width:0;
     }
     
     
     …
     
     
     
     …
     
     
     …
     
     CSS
     

     View Slide

147. Flexbox
     .row {
     display:box;
     }
     .column {
     flex-box:1;
     width:0;
     }
     
     
     …
     
     
     
     …
     
     
     …
     
     
     …
     
     CSS
     

     View Slide

148. Ninja style…
     

     View Slide

149. Ninja style
     
     
     …
     
     
     
     …
     
     
     …
     
     
     …
     
     

     View Slide

150. Ninja Style
     div.last-child {…}
     a[href$=.pdf]
     div:nth-child(3) {…} T
     argets the third child div
     of a parent
     T
     argets the last child div of
     a parent
     T
     argets all links that are
     pointing to a PDF file
     CSS
     CSS
     CSS
     

     View Slide

151. Ninja style
     .row .column:first-child {
     margin-left:0;
     }
     .row .column:last-child {
     margin-right:0;
     }
     
     
     …
     
     
     
     …
     
     
     …
     
     
     …
     
     CSS
     

     View Slide

152. Have a play with:
     http://goo.gl/Qt4oS
     

     View Slide

153. View Slide