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

Front-End Style Guides

Front-End Style Guides

From the Tech For Good & Front-End Innovators meet-up at DoSomething.org on June 23rd 2014.

A number of websites such as GitHub, BBC and CodeForAmerica utilize live style guides to enforce visual consistency throughout their site and facilitate rapid building of user interfaces. You can think of a style guide as a living document of your front-end code and design decisions, outlining the elements and patterns used throughout your website.

Front-End focused Software Engineers David Furnes and Diego Lorenzo will talk through how we created our Style Guide and Pattern Library - http://neue.dosomething.org - and how we use it on a daily basis at DoSomething.org.

You can watch a video of this talk on YouTube at: https://www.youtube.com/watch?v=4hrQ7XVjsSQ

468f2c6b3ec4879a3481ba0dab36d8ea?s=128

David Furnes

June 23, 2014
Tweet

Transcript

  1. @ LET’S DO SOMETHING ABOUT Front-End Style Guides

  2. Who needs a style guide?

  3. GitHub

  4. BBC

  5. Code for America

  6. Yelp

  7. Starbucks

  8. Mozilla

  9. You need a style guide too.

  10. PART ONE Why a style guide? PART TWO Introducing Neue

    PART THREE How it’s made PART FOUR The Future
  11. PART ONE Why a style guide?

  12. Make development easier.

  13. Make design easier.

  14. Make talking about design easier.

  15. Make your site faster.

  16. Stop re-inventing the wheel.

  17. Mocks suck.

  18. PART TWO Introducing Neue

  19. None
  20. None
  21. None
  22. Fonts & Colors

  23. Typography

  24. Fluid Grid Layout

  25. None
  26. None
  27. Re-usable Patterns

  28. Form fields Intra-page links Headings Modals Form validation Status messages

    Call-to-action banners Layout containers Galleries Campaign tiles Page headers Text callouts Legal text Smooth-scrolling Image borders Tabbed navigation Site chrome
  29. None
  30. None
  31. None
  32. Form fields Image borders Tabbed navigation Intra-page links Headings Modals

    Form validation Status messages Call-to-action banners Layout containers Galleries Campaign tiles Page headers Site chrome Text callouts Legal text Smooth-scrolling
  33. None
  34. Form fields Intra-page links Headings Modals Form validation Status messages

    Call-to-action banners Layout containers Galleries Campaign tiles Page headers Text callouts Legal text Smooth-scrolling Image borders Tabbed navigation Site chrome
  35. Form fields Intra-page links Headings Modals Form validation Status messages

    Call-to-action banners Layout containers Galleries Campaign tiles Page headers Text callouts Legal text Smooth-scrolling Image borders Tabbed navigation Site chrome
  36. None
  37. Form fields Intra-page links Headings Modals Form validation Status messages

    Call-to-action banners Layout containers Galleries Campaign tiles Page headers Text callouts Legal text Smooth-scrolling Image borders Tabbed navigation Site chrome
  38. None
  39. Animations

  40. Measurements

  41. PART THREE How it’s made

  42. SCSS

  43. KSS

  44. // Button styles for both input and anchor buttons. //

    Suitable for all-purpose use. // // :hover - Subtle hover state (will not be // displayed on touch interfaces) // :focus - Focus state for users navigating // the page using tab keys. // :active - "Pushed" button state // .disabled - Disabled (non-interactive) button // state. Consider removing button // from interface if not necessary to // avoid confusion. // .loading - AJAX loading animation. Used when // loading results inline. ==Must be // used on `a` or `button`. Will not // work with `input` elements.==
  45. // Button styles for both input and anchor buttons. //

    Suitable for all-purpose use. // // :hover - Subtle hover state (will not be // displayed on touch interfaces) // :focus - Focus state for users navigating // the page using tab keys. // :active - "Pushed" button state // .disabled - Disabled (non-interactive) button // state. Consider removing button // from interface if not necessary to // avoid confusion. // .loading - AJAX loading animation. Used when // loading results inline. ==Must be // used on `a` or `button`. Will not // work with `input` elements.==
  46. // Status message styles. These should be used to provide

    // feedback to the user for events that occur outside the // normal application flow (such as form validation // errors). ==Close button is added using JavaScript. See // `system-messages.js`.== // // .error - Used to display errors. Be careful not to // blame the user for a mistake. // // Styleguide 4.1.8 - Status Banners ! .messages { position: relative; width: 100%; background: $purple; text-align: left;
  47. // Status message styles. These should be used to provide

    // feedback to the user for events that occur outside the // normal application flow (such as form validation // errors). ==Close button is added using JavaScript. See // `system-messages.js`.== // // .error - Used to display errors. Be careful not to // blame the user for a mistake. // // Styleguide 4.1.8 - Status Banners ! .messages { position: relative; width: 100%; background: $purple; text-align: left;
  48. // Status message styles. These should be used to provide

    // feedback to the user for events that occur outside the // normal application flow (such as form validation // errors). ==Close button is added using JavaScript. See // `system-messages.js`.== // // .error - Used to display errors. Be careful not to // blame the user for a mistake. // // Styleguide 4.1.8 - Status Banners ! .messages { position: relative; width: 100%; background: $purple; text-align: left;
  49. None
  50. Fluid, Semantic Grid Layout

  51. Fluid, Semantic Grid Layout

  52. Fluid, Semantic Grid Layout

  53. Fluid, Semantic Grid Layout

  54. http://neat.bourbon.io

  55. None
  56. None
  57. .container { ! > .wrapper { padding: 1rem; position: relative;

    @include clearfix(); ! @include media($tablet) { ! } } ! }
  58. .container { ! > .wrapper { padding: 1rem; position: relative;

    @include clearfix(); ! @include media($tablet) { @include span-columns(12); } } ! }
  59. .container { ! > .wrapper { padding: 1rem; position: relative;

    @include clearfix(); ! @include media($tablet) { @include span-columns(12); @include shift(2); } } ! }
  60. None
  61. Pattern-ity test

  62. None
  63. None
  64. None
  65. None
  66. None
  67. None
  68. None
  69. None
  70. Anatomy of a Pattern

  71. A pattern is a set of rules.

  72. Defines consistent markup.

  73. Break components into reusable blocks.

  74. Break components into reusable blocks.

  75. Structuring your CSS

  76. OOCS

  77. OOCS, ACSS

  78. OOCS, ACSS, SMACSS

  79. OOCS, ACSS, SMACSS, BEM

  80. .block { } .block__element { } .block--modifier { } //

    but shit gets cray: .block__element--modifier { } .block__element--modifier__element { }
  81. <article class="tile tile--campaign"> <a class="wrapper" href="#"> <div class="tile--meta"> <h1 class="__title">Kittens</h1>

    <p class=“__tagline">They are sometimes cute.</p> </div> <img src="http://placekitten.com/g/600/600" /> </a> </article>
  82. None
  83. Sharing the style guide

  84. None
  85. Using the style guide

  86. None
  87. Semantic Versioning

  88. dosomething/bower.json ! { “name: “dosomething”, “dependencies”: { “neue”: “DoSomething/neue#~4.0.0”, “jquery”:

    “1.8.3”, “html5shiv”: “~3.7.0”, “lodash”: “~2.4.1”, /* ... */ }, /* ... */ }
  89. neue/bower.json ! { “name: “neue”, “version”: “4.0.10”, “main”: [ “dist/neue.css”,

    “dist/neue.min.js” ], "dependencies": { "jquery": ">=1.7.2" }, /* ... */ }
  90. neue/bower.json ! { “name: “neue”, “version”: “4.0.10”, “main”: [ “dist/neue.css”,

    “dist/neue.min.js” ], "dependencies": { "jquery": ">=1.7.2" }, /* ... */ }
  91. PART FOUR The Future

  92. Keeping things in sync.

  93. None
  94. None
  95. <article class="tile tile--campaign"> <a class="wrapper" href="#"> <div class="tile--meta"> <h1 class="__title">Kittens</h1>

    <p class=“__tagline">They are sometimes cute.</p> </div> <img src="http://placekitten.com/g/600/600" /> </a> </article>
  96. ui_component("gallery/tile", { href: “#", img: “”, title: “Kittens”, tagline: “They

    are sometimes cute.” })
  97. Web Components

  98. HTMLElement <div> <a> <video> <input>

  99. HTMLElement <div> <a> <video> <input>

  100. <ds-tile> HTMLElement <div> <a> <video> <input>

  101. <article class="tile tile--campaign"> <a class="wrapper" href="#"> <div class="tile--meta"> <h1 class="__title">Kittens</h1>

    <p class=“__tagline">They are sometimes cute.</p> </div> <img src="http://placekitten.com/g/600/600" /> </a> </article>
  102. <ds-tile href=“#”> <h1>Kittens</h1> <p>They are sometimes cute.</p> <img src=“http://placekitten.com/g/600/600” </ds-tile>

    !
  103. <template> <article class="tile tile--campaign"> <a class="wrapper" href="#"> <div class="tile--meta"> <content></content>

    </div> <content select=“img.thumbnail” /> </a> </article> </template>
  104. None
  105. None
  106. None
  107. KEEP THAT SHIT NICE AND DRY.

  108. DON’T BUILD MORE THAN YOU HAVE TO.

  109. BUILD THINGS TO HELP YOU BUILD THINGS.

  110. QUESTIONS? David Furnes @dfurnes ! Diego Lorenzo @weerd