Git is a version control tool that reflects balanced team values like shared ownership and collaboration. It allows developers to work in branches and merge changes back together through pull requests. The document recommends designers create a "Kit of Parts" style guide stored in git that defines UI components and can be built upon by developers. It also provides tips for getting started with git, including using GitHub Pages to host projects.

1. Git of Parts
#balancedTeamLA
2/12/14

2. Rudy Jahchan
@rudy

3. Wolfie

4. carbon five

5. git

6. Kit of Parts

7. good 'nuff

8. Developers are idiots.
forgiveness, please.

9. I’m a developer.

10. I'm an idiot.

11. git

12. git is a tool for
developers

13. git is a tool for
developers EVERYONE!

14. We've built our cadence
on it.

15. Eliminate the "divide" by
having everyone use it.

16. Except I'm not going to
teach you it.
forgiveness, please

17. source: git-scm.com

18. source: atlassian.com/git/tutorial

19. source: try.github.io

20. git reflects
balanced team values.

21. Shared ownership.
(okay really happens by having everyone use it
but bear with me).

22. git is a versioning
system.
Just not on a file by file basis; it's your entire
project.

23. Commit
A snapshot.

24. Series of Commits

25. Series of Commits

26. Series of Commits

27. Series of Commits

28. Series of Commits

29. Series of Commits
And you can roll them back!

30. Series of Commits
And you can roll them back!

31. Series of Commits
And you can roll them back!

32. Small, frequent changes.
Contrast against the large, bloated, risky all or
nothing release.

33. Branches

34. Branches

35. Branches

36. Branches

37. Branches

38. Branches

39. Branches

40. Branches

41. bug/fix-name-123
master
feature/login-42
Branches
They are also named.

42. Many experiments.
Branches can be features, A/B variations,
whatevs!

43. Merge it Back

44. Merge it Back

45. Merge it Back

46. Pull Request
Have others check out your work, comment on it,
and approve its inclusion.

47. Encourages
collaboration.

48. What if I break
something?

49. Pull and Push to Repos
Your copy is a repo!

50. Pull and Push to Repos
Your copy is a repo!

51. Pull and Push to Repos
Your copy is a repo!

52. Pull and Push to Repos
Your copy is a repo!

53. Pull and Push to Repos
Your copy is a repo!

54. Safe Space

55. What should designers
work on?

56. What should designers
work on?
Anything you want!
Though I suggest …

57. Kit of Parts

58. Nicole Sullivan
@stubbornella

59. source: stubbornella.org

60. Object Oriented CSS

61. Web Components

62. A single location
defining all components.
Clearly defines the HTML, CSS, and Javascript.

63. Bootstrap
getbootstrap.com

64. Our Kit of Parts

65. It is not just style guide!

66. It is a living part of the
app.
Uses the SAME resources as the entire app.

67. Changes to Kit-of-Parts
affects entire app.

69. The Bootstrap Team

70. The Bootstrap Team
uses

71. The Bootstrap Team
uses
Bootstrap

72. The Bootstrap Team
uses
Bootstrap
to build

73. The Bootstrap Team
uses
Bootstrap
to build
The Bootstrap Site

74. The Bootstrap Team
Yo dawg, I
hearduses like
you
Bootstrap …
Bootstrap
to build
The Bootstrap Site

75. Pro-tip: Only accessible
in development & UAT.
We mount it under the path /kit-of-parts

76. Dev can compose new
UX from it.
Allows them to move forward if they can't get a
design pair.

77. good 'nuff

78. Chris Nodder
@uxgrump

79. EQ

80. Dev
EQ

81. Dev
UX
EQ

82. Dev
UX
good 'nuff

83. Dev
UX
good 'nuff
User

84. Dev
UX
good 'nuff

85. "It needs to be pixel
perfect."

86. Pairing

87. Navigator and Driver

93. Developer left to own
devices to decide UI.

94. source: codinghorror.com

95. good 'nuff

96. "Developers can not
design."*
* generalization. forgiveness, please.

97. "That's a lot of setup,
where do I start?"

98. "Git" of Parts

99. Tools used

100. HTML & CSS
Tools used

101. Haml & SASS
HTML & CSS
Tools used

102. Github

103. Github
Pages

104. Web-site for your
project!

105. [github-name].github.io/[project]

106. master
gh-pages
Create gh-pages branch

107. Add files

108. Add files
index.html

109. Add files
index.html
kit-of-parts.pdf

110. Add files
index.html
kit-of-parts.pdf
lol_cat.png

111. Add files
index.html
kit-of-parts.pdf
lol_cat.png
fashionable.css

112. Push it to Github

113. source: carbonfive.github.com/vimtronner

116. Get git

117. Thanks!
rudy@carbonfive.com
@rudy