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

Front-End: Fun, Not Frustration

Front-End: Fun, Not Frustration

Front-end development should be fun. Here is a random list of 12 things that will help you battle front-end frustration.

Roy Tomeij

April 24, 2014
Tweet

More Decks by Roy Tomeij

Other Decks in Programming

Transcript

  1. Front-End: Fun, Not Frustration

  2. @roy

  3. None
  4. None
  5. better box model

  6. * { box-sizing: content-box; } ! .element { width: 800px;

    padding: 100px; border: 10px; }
  7. ! .element margin border padding width: 1020px width: 800px

  8. * { box-sizing: border-box; } ! .element { width: 800px;

    padding: 100px; border: 10px; }
  9. .element margin border padding width: 800px

  10. great for percentage based layouts

  11. margins

  12. .element { margin: 100px; }

  13. .element 100px .element

  14. .element 200px .element

  15. that’s just the way it is

  16. positioning

  17. .element { position: static; }

  18. .element { position: relative; }

  19. .element { position: relative; left: 100px; }

  20. .element { position: fixed; }

  21. positioning is hard

  22. inline block elements

  23. li li li li ul

  24. li { display: inline-block; margin: 0; }

  25. li li ul li li

  26. ul { font-size: 0; } ! li { display: inline-block;

    margin: 0; font-size: 12px; }
  27. li ul li li li

  28. no more floats to clear

  29. vertical alignment

  30. <table> <tr> <td> content goes here </td> </tr> </table>

  31. table { width: 100%; height: 100%; } ! td {

    vertical-align: middle; text-align: center; }
  32. tables > css

  33. <div class=“element”> <div class=“content”> content goes here </div> </div>

  34. .element { display: table; width: 100%; } ! .content {

    display: table-cell; vertical-align: middle; text-align: center; }
  35. semantic markup, behaving like tables

  36. pretty buttons

  37. vs <input type=“submit” value=“Submit”> <button type=“submit”>Submit</button>

  38. <button type=“submit”> <strong>important</strong> button </button>

  39. just use <button>

  40. pseudo elements

  41. .element::before { content: “string”; } ! .element::after { content: “\2764”;

    }
  42. .element:before { content: “string”; } ! .element:after { content: “\2764”;

    }
  43. a[href^=“https”]:after { content: “ (uses SSL)”; }

  44. a[href^=“https”]:after { content: “”; display: inline-block; width: 12px; height: 12px;

    background: image-url(“lock.png”); }
  45. *, *:before, *:after { box-sizing: border-box; }

  46. less markup, more responsive

  47. css selectors

  48. vs cycle() :nth-child(odd) :nth-child(even)

  49. tr:nth-child(even) td { background: gray; }

  50. a[href$=“.pdf”]:after { content: “ (PDF)”; }

  51. :target { background: red; }

  52. <p id=“foo”> Some content </p> ! http://example.com/#foo

  53. a spec worth reading

  54. css animations

  55. a { color: red; transition: color .5s; } ! a:hover

    { color: blue; }
  56. .sidebar { width: 0; transition: width 1s; } ! .sidebar.active

    { width: 200px; } ! $(‘.sidebar’).toggleClass(‘active’);
  57. .element { transform: translateZ(0); }

  58. hardware acceleration

  59. fluidity

  60. .element { min-width: 320px; max-width: 1280px; margin: 0 auto; }

  61. low hanging fruit

  62. power of sass

  63. %underline-on-hover { text-decoration: none; ! &:hover { text-decoration: underline; }

    } ! .some-link { @extend %underline-on-hover; }
  64. $sass-list: ( “locked”: “lock.png”, “error”: “exclamation-mark.png” ); ! @each $key,

    $value in $sass-list { .#{$key} { background: image-url($value); } }
  65. it’s like programming

  66. svg

  67. retina friendly, compresses well

  68. Front-End: Fun, Not Frustration

  69. None
  70. Questions? @roy roy@appsignal.com slides: roy.io/railsconf

  71. Image credits: ! https://www.flickr.com/photos/kunfy/6801036541 ! https://www.flickr.com/photos/cmichel67/9428306062