A better future with KSS

Transcript

1. KSS
   A better future with
   

   View Slide

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

   View Slide

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

   View Slide

4. Mostly, I discuss features
   write code
   sketch
   design
   

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

8. KSS
   Knyle Style Sheets
   This  thing  I  built
   

   View Slide

9. Knyle?
   

   View Slide

10. Kyle Neath
    

    View Slide

11. Knyle Kneath?
    

    View Slide

12. Knyle Kneath?
    Recruiters  love  this  kid
    

    View Slide

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{
    ...
    }
    }
    

    View Slide

14. groan
    

    View Slide

15. warpspire.com/kss
    

    View Slide

16. Why
    How
    I built KSS
    I built KSS
    

    View Slide

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

    View Slide

18. Why?
    

    View Slide

19. View Slide

20. View Slide

21. View Slide

22. View Slide

23. View Slide

24. 39 Pages
    

    View Slide

25. Thirty Nine
    

    View Slide

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
    */
    

    View Slide

27. Designed for Machines
    

    View Slide

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

    View Slide

29. How?
    

    View Slide

30. TomDoc
    Photo Credit: Claude Nix
    

    View Slide

31. Designed for humans
    

    View Slide

32. Yet machine parseable
    

    View Slide

33. Explain the obvious
    

    View Slide

34. One page specification
    

    View Slide

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

    View Slide

36. View Slide

37. USE IT FIRST
    If you are building a tool
    Takeaway  #2
    

    View Slide

38. Tools are meant to be used
    

    View Slide

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

    View Slide

40. Started using KSS
    before I designed KSS
    

    View Slide

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{
    ...
    }
    }
    

    View Slide

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{
    ...
    }
    }
    

    View Slide

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{
    ...
    }
    }
    

    View Slide

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{
    ...
    }
    }
    

    View Slide

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
    

    View Slide

46. Tremendous value in the obvious
    

    View Slide

47. Should I be writing this code?
    

    View Slide

48. Explain yourself and write
    better code
    

    View Slide

49. View Slide

50. :hover
    

    View Slide

51. :active
    

    View Slide

52. .primary
    

    View Slide

53. +
    ×
    (default) + :hover + :active
    ×
    (default) + .primary
    

    View Slide

54. 12 variations
    

    View Slide

55. Without documentation,
    only the author knows
    

    View Slide

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
    

    View Slide

57. I need something tangible
    

    View Slide

58. I need something to make
    people love documentation
    

    View Slide

59. View Slide

60. // Styleguide 2.1.3.
    a.button.star{
    ...
    &.star-given{
    ...
    }
    &.disabled{
    Part 3 of 3
    THE STYLEGUIDE SECTION
    

    View Slide

61. Shit. I have no idea how to
    build a parser.
    

    View Slide

62. 5 hours later…
    

    View Slide

63. View Slide

64. First iteration
    TomDoc + SASS
    

    View Slide

65. View Slide

66. Second iteration
    Custom parser
    

    View Slide

67. Building software is easy
    Just try it!
    

    View Slide

68. Benefits
    

    View Slide

69. github.com/styleguide
    

    View Slide

70. Having a styleguide has
    been awesome
    

    View Slide

71. Having a styleguide has
    been awesome
    an  automatically  generated
    

    View Slide

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

    View Slide

73. Automatically generated
    =
    Never out of date
    

    View Slide

74. Living
    =
    Breaks when the site
    breaks
    

    View Slide

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

    View Slide

76. View Slide

77. Why do we have five different
    boxed styles?
    

    View Slide

78. View Slide

79. View Slide

80. View Slide

81. View Slide

82. View Slide

83. A styleguide helps you
    refactor
    

    View Slide

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

    View Slide

85. Accidental style changes
    will happen
    

    View Slide

86. View Slide

87. A styleguide is one place
    to test everything
    

    View Slide

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

    View Slide

89. CSS
    is growing up
    

    View Slide

90. View Slide

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

    View Slide

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

    View Slide

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

    View Slide

94. View Slide

95. We have some amazing tools
    

    View Slide

96. We have some amazing tools
    CSSEdit/Espresso
    SMACSS
    LESS
    SASS/SCSS
    Firebug / web inspector
    OOCS
    BOOTSTRAP
    BLUEPRINT
    compass stylus
    

    View Slide

97. None of these existed
    when I started
    

    View Slide

98. These tools are the
    future of CSS
    

    View Slide

99. Just a bunch of regular
    people building tools
    

    View Slide

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

     View Slide

101. Final  Takeaway
     WE ARE
     

     View Slide

102. So go build something
     awesome
     

     View Slide