Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Prototyping with HTML and CSS

Prototyping with HTML and CSS

A basic primer on HTML/CSS for designers.

6389097e6acf134606d06217a3c41e47?s=128

Mike Aparicio

April 07, 2014
Tweet

More Decks by Mike Aparicio

Other Decks in Design

Transcript

  1. Prototyping with
 HTML & CSS Mike Aparicio User Interface Engineer


    maparicio@groupon.com @peruvianidol
  2. ! codepen.io

  3. None
  4. None
  5. Front-End • HTML = Content (what is means) • CSS

    = Presentation (what it looks like) • JavaScript = Behavior (what it does)
  6. HTML • HyperText Markup Language • Document Object Model (DOM)

    • An outline of content • Tags give elements semantic meaning
 <p>This  is  a  paragraph.</p> • Attributes provide additional information
 <a  href=“http://groupon.com”>Link  to  groupon.com</a>
  7. ! Hello, World

  8. None
  9. HTML Formatting • Indentation is not necessary but is crucial

    for legibility • Whitespace outside of elements will not be rendered • Tags are case insensitive but all lowercase is the norm • Quotes are not necessary around attributes but are the norm • Make sure elements are nested properly
 <p><em>This  is  properly  nested</em></p>
 <p><em>This  is  not  properly  nested</p></em> • <!-­‐-­‐  Use  comments  liberally  -­‐-­‐>
  10. None
  11. None
  12. None
  13. Typography

  14. None
  15. None
  16. None
  17. None
  18. None
  19. None
  20. None
  21. Images

  22. None
  23. Forms

  24. None
  25. None
  26. Default Email URL Phone Date Contextual Keyboards

  27. None
  28. None
  29. None
  30. Tables

  31. None
  32. Container Elements

  33. None
  34. HTML5 Elements • header • footer • section • article

    • figure • figcaption • aside
  35. CSS • Cascading Style Sheets • Describes the visual properties

    of elements • Uses element, class and ID selectors to target elements in the DOM • Browsers have limited default styles for each element
  36. None
  37. The Box Model

  38. None
  39. None
  40. None
  41. Vendor Prefixes • -webkit- (Chrome, Safari, Blackberry) • -moz- (Firefox)

    • -ms- (Internet Explorer) • -o- (Opera)
  42. None
  43. A CSS Rule p  {
   font-­‐size:  18px;  
  

    line-­‐height:  1.5;
   font-­‐weight:  bold;
   font-­‐style:  italic;
   font-­‐family:  OpenSans,  ‘Helvetica  Neue’,  Arial,  sans-­‐serif;
   color:  #555;
 }   /*  Here’s  a  comment  */
  44. CSS Selectors • * (Universal selector) • .class (class selector)

    • #id (id selector) • x (element selector) • x y (descendant selector) • x + y (adjacent selector) • x > y (direct children selector) • x ~ y (sibling combinator) • x[attr] (attribute selector) • x[attr=“value”] (matches attribute) • x[attr*/^/$=“value”] (regex attribute) • x:hover (pseudo-selector) • x:not(selector) (negation selector) • x::pseudoElement (pseudo element selector) • x:nth-child(n) (nth-child selector) • x:nth-of-type (nth-of-type selector) http://code.tutsplus.com/tutorials/the-30-css-selectors-you-must-memorize--net-16048
  45. Generated Content • x:before, x:after • Creates an element before

    or after an existing one that doesn’t appear in the markup. (content: “?”) • Lots of creative uses - clearfix, carats, layered content, icon fonts, etc. • Should have no semantic meaning or functional use
  46. None
  47. CSS Properties margin padding height width border background font-family font-size

    font-weight line-height color letter-spacing word-spacing word-wrap white-space text-align text-transform text-decoration text-overflow text-shadow box-shadow opacity display visibility position overflow z-index list-style transform transition box-sizing cursor min-height max-height min-width max-width
  48. CSS Values • Can include one or more values depending

    on property • Many properties can combine multiple properties
 (ex. font, margin, padding, background, border) • Some values may include shorthand
 margin:  10px  10px  10px  10px (top, right, bottom, left)
 margin:  10px  10px (top/bottom, right/left)
 margin:  10px (all sides)
  49. Precedence • Inline styles take highest precedence.
 <p  style=“color:  black”>

    • Styles in the head of the document take the next highest precedence.
 <head>
        <style>
                p  {  color:  black;  }
        </style>
 </head> • Styles linked from an external file take the lowest precedence.
 <head>
        <link  href=“style.css”  rel=“stylesheet”>
 </head>
  50. Specificity • Element selectors affect every element of that type

    • Class selectors override element selectors; multiple elements with a class can exist in a document. • ID selectors override element AND class selectors; only one element with an ID can exist in a document. • Adding !important to a declaration overrides everything.
  51. None
  52. None
  53. None
  54. None
  55. None
  56. None
  57. Specificity Tips • Always link to styles externally • Use

    class selectors instead of element selectors whenever possible • Never use IDs to style elements • Limit nesting of selectors as much as possible • Never use !important to override styles
  58. Positioning • Just use tables! • Floats • Relative Positioning

    • Absolute Positioning • Fixed Positioning • Flexbox
  59. Positioning • Just use tables! • Floats • Relative Positioning

    • Absolute Positioning • Fixed Positioning • Flexbox
  60. Floats

  61. None
  62. None
  63. None
  64. None
  65. None
  66. None
  67. None
  68. None
  69. Relative Positioning • Element is positioned relative to its normal

    position • Reserved space for element is preserved within the document flow • Can overlap other elements • Set order of overlapping elements using z-index property • If z-index is not set, element positioned last in HTML will appear on top • Often used as container for absolutely positioned elements
  70. Absolute Positioning • Positioned relative to the first parent element

    with position other than static (default); normally <html> • Removed from normal flow of document; can overlap other elements • Can be used in place of floats, which can be problematic • Must ensure proper space so elements don’t unintentionally overlap
  71. Fixed Positioning • Positioned relative to the browser window •

    Does not move when window is scrolled • Removed from normal flow of document; can overlap other elements • Useful for navigation
  72. Flexbox • Newfangled layout system in CSS3 • Gives containers

    the ability to alter their dimensions to best fill the available space • Good for distributing space evenly within, between or around elements • Supported in most current browsers (<IE 10 not supported) • http://devbryce.com/site/flexbox/
  73. CSS Transitions • Animates between states of CSS properties •

    transition: property duration timing-function delay • transition:  opacity  .3s  ease-­‐in-­‐out  .5s;   • Pretty good support in current browsers without vendor prefixes • <IE10 fuggedaboutit
  74. CSS Transforms • Manipulates elements in a 2D or 3D

    space • transform: transform-function • transform:  rotate(90deg);   • Decent browser support with vendor prefixes • 3D transforms less supported • Often used in conjunction with CSS transitions • Examples: sliding navigation, flip cards, image galleries
  75. Media Queries

  76. None
  77. Media Queries • Allow for styles to take affect when

    certain client criteria are met • width, height, aspect ratio, resolution, media type (screen/print) • @media  screen  and  (max-­‐width:  768px)  {  }   • “The first media query is no media query.” - Yoda? • Not supported in IE8 and below
  78. CSS Methodologies

  79. SMACCS • Scalable Modular Architecture for CSS • Divide CSS

    into base, layout, module, state and theme rules • Base - default element styles • Layout - grid and positioning styles • Module - small chunks of reusable styles • State - styles affected by behavior (JavaScript) • Theme - variations on existing styles • http://smacss.com/
  80. Atomic Design • Style modules in increasing order of complexity

    • Atoms - individual elements, basic building blocks • Molecules - simple combinations of atomic elements (ex. search form) • Organisms - a complex, distinct section of an interface (ex. header) • Templates - groups of organisms combined to create pages (low-fi) • Pages - specific instances of templates (high-fi) • http://bradfrostweb.com/blog/post/atomic-web-design/
  81. OOCSS • Object-Oriented CSS • Identify and create reusable patterns

    independent of each other • Separate structure and skin, container and content • https://github.com/stubbornella/oocss/wiki
  82. CSS Frameworks • Twitter Bootstrap, Zurb Foundation, Groupon Interface Guidelines

    (ahem) • Set of base CSS and JS that provide minimally designed components for fast, high-fidelity prototyping • Include responsive grid, form, table, button styles, JS components such as modals and alerts • Can cause sites to look the same (which can be good or bad) • Often include more code than a single project needs
  83. jQuery • JS library that simplifies navigating the DOM and

    selecting elements • Useful for toggling classes to trigger CSS changes on interactions • Adds some overhead (~32k) but widely used • Lightweight alternatives exist (Zepto ~10k) • jQuery is JavaScript but JavaScript is not jQuery
  84. Putting it All Together

  85. None
  86. Step 1: Semantic Markup

  87. None
  88. None
  89. None
  90. Step 2: Look for Patterns

  91. None
  92. Step 3: Add Additional Structure

  93. None
  94. None
  95. None
  96. None
  97. Step 4: Style Content

  98. None
  99. None
  100. None
  101. None
  102. None
  103. Step 5: Add Layout Styles

  104. None
  105. Resources • Sublime Text (http://www.sublimetext.com/) • w3 Schools (http://www.w3schools.com/) •

    CSS Tricks (http://css-tricks.com/) • Can I Use (http://caniuse.com/) • A Book Apart (http://www.abookapart.com/) • Developing with Web Standards, John Allsopp (http://idol.pe/OsT9gl)
  106. Thank You!