A better future with KSS

A better future with KSS

5f2da528927a2ec9ba4fec2069cbc958?s=128

Kyle Neath

May 16, 2012
Tweet

Transcript

  1. KSS A better future with

  2. I’m Kyle Neath On the interwebs @kneath

  3. I’m Director of Design I work at GitHub. It’s a

    tech thing.
  4. Mostly, I discuss features write code sketch design

  5. I’m ≅ Designer That label frustrates me.

  6. I’m a Builder I build things with computers.

  7. I like building tools To increase your potential for building

    rad shit
  8. KSS Knyle Style Sheets This  thing  I  built

  9. Knyle?

  10. Kyle Neath

  11. Knyle Kneath?

  12. Knyle Kneath? Recruiters  love  this  kid

  13. // A button suitable for giving stars to someone. //

    // :hover - Subtle hover highlight. // .stars-given - A highlight indicating you've already given a star. // .stars-given:hover - Subtle hover highlight on top of stars-given styling. // .disabled - Dims the button to indicate it cannot be used. // // Styleguide 2.1.3. a.button.star{ ... &.star-given{ ... } &.disabled{ ... } }
  14. groan

  15. warpspire.com/kss

  16. Why How I built KSS I built KSS

  17. Building tools is exciting! (documentation is not)

  18. Why?

  19. None
  20. None
  21. None
  22. None
  23. None
  24. 39 Pages

  25. Thirty Nine

  26. /** * Homepage Style * * Standard Layout (all parts)

    for Big Little Homepage * * This style has been designed by Mina Margin. It reflects * the composition of colors through the years of the * customers project as well as the boldness it implies. * * @project Big Little Homepage * @version 0.2.8 * @package xhtml-css * @author Mina Margin * @copyright 2008 by the author * @cssdoc version 1.0-pre * @license GPL v3 * * @colordef #fff; white * @colordef #808080; standard grey */
  27. Designed for Machines

  28. Get Angry! Build something better! Takeaway  #1

  29. How?

  30. TomDoc Photo Credit: Claude Nix

  31. Designed for humans

  32. Yet machine parseable

  33. Explain the obvious

  34. One page specification

  35. This can work for CSS But where do I start?

  36. None
  37. USE IT FIRST If you are building a tool Takeaway

     #2
  38. Tools are meant to be used

  39. If I’m not using it, it’s failed

  40. Started using KSS before I designed KSS

  41. // A button suitable for giving stars to someone. //

    // :hover - Subtle hover highlight. // .stars-given - A highlight indicating you've already given a star. // .stars-given:hover - Subtle hover highlight on top of stars-given styling. // .disabled - Dims the button to indicate it cannot be used. // // Styleguide 2.1.3. a.button.star{ ... &.star-given{ ... } &.disabled{ ... } }
  42. // A button suitable for giving stars to someone. //

    // :hover - Subtle hover highlight. // .stars-given - A highlight indicating you've already given a star. // .stars-given:hover - Subtle hover highlight on top of stars-given styling. // .disabled - Dims the button to indicate it cannot be used. // // Styleguide 2.1.3. a.button.star{ ... &.star-given{ ... } &.disabled{ ... } }
  43. // A button suitable for giving stars to someone. //

    // :hover - Subtle hover highlight. // .stars-given - A highlight indicating you've already given a star. // .stars-given:hover - Subtle hover highlight on top of stars-given styling. // .disabled - Dims the button to indicate it cannot be used. // // Styleguide 2.1.3. a.button.star{ ... &.star-given{ ... } &.disabled{ ... } }
  44. // A button suitable for giving stars to someone. //

    // :hover - Subtle hover highlight. // .stars-given - A highlight indicating you've already given a star. // .stars-given:hover - Subtle hover highlight on top of stars-given styling. // .disabled - Dims the button to indicate it cannot be used. // // Styleguide 2.1.3. a.button.star{ ... &.star-given{ ... } &.disabled{ ... } }
  45. // A button suitable for giving stars to someone. //

    // :hover - Subtle hover highlight. // .stars-given - A highlight indicating you'v // .stars-given:hover - Subtle hover highlight on to // .disabled - Dims the button to indicate // Part 1 of 3 THE DESCRIPTION SECTION
  46. Tremendous value in the obvious

  47. Should I be writing this code?

  48. Explain yourself and write better code

  49. None
  50. :hover

  51. :active

  52. .primary

  53. <button> + <a> × (default) + :hover + :active ×

    (default) + .primary
  54. 12 variations

  55. Without documentation, only the author knows

  56. // :hover - Subtle hover highlight. // .stars-given - A

    highlight indicating you'v // .stars-given:hover - Subtle hover highlight on to // .disabled - Dims the button to indicate // // Styleguide 2.1.3. a.button.star{ Part 2 of 3 THE MODIFIERS SECTION
  57. I need something tangible

  58. I need something to make people love documentation

  59. None
  60. // Styleguide 2.1.3. a.button.star{ ... &.star-given{ ... } &.disabled{ Part

    3 of 3 THE STYLEGUIDE SECTION
  61. Shit. I have no idea how to build a parser.

  62. 5 hours later…

  63. None
  64. First iteration TomDoc + SASS

  65. None
  66. Second iteration Custom parser

  67. Building software is easy Just try it!

  68. Benefits

  69. github.com/styleguide

  70. Having a styleguide has been awesome

  71. Having a styleguide has been awesome an  automatically  generated

  72. Having a styleguide has been awesome an  automatically  generated  living

  73. Automatically generated = Never out of date

  74. Living = Breaks when the site breaks

  75. Hey, do we have a button for...

  76. None
  77. Why do we have five different boxed styles?

  78. None
  79. None
  80. None
  81. None
  82. None
  83. A styleguide helps you refactor

  84. All I did was change the spacing a little…

  85. Accidental style changes will happen

  86. None
  87. A styleguide is one place to test everything

  88. MOVING FAST DOCUMENTATION IS ABOUT Takeaway  #3 AS A TEAM

  89. CSS is growing up

  90. None
  91. url('/images/testing.png')

  92. url('/images/testing.png') url(/images/testing.png)

  93. Relic  of  the  past We’re  onto  better  things  now

  94. None
  95. We have some amazing tools

  96. We have some amazing tools CSSEdit/Espresso SMACSS LESS SASS/SCSS Firebug

    / web inspector OOCS BOOTSTRAP BLUEPRINT compass stylus
  97. None of these existed when I started

  98. These tools are the future of CSS

  99. Just a bunch of regular people building tools

  100. The w3c is not the future of css ... Final

     Takeaway
  101. Final  Takeaway WE ARE

  102. So go build something awesome