A better future with KSS

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?
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?
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
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
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…
64. First iteration TomDoc + SASS
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...
77. Why do we have five different boxed styles?
83. A styleguide helps you refactor
84. All I did was change the spacing a little…
85. Accidental style changes will happen
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
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
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