A better future with KSS

Kyle Neath

May 16, 2012

Tweet Share

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