Prototyping 2 — Structure

Close look at HAML, SASS + a Git & Github “crash tour”.

Transcript

1. Prototyping in the browser
2. II / Structure
3. — Recap
4. Homebrew
5. Download Install Configure Update Remove brew install brew uninstall brew upgrade brew list
6. Git * * More on Git/Github in a bit
7. ## MAC OS .DS_Store ## TEXTMATE *.tmproj tmtags [...] ## PROJECT::GENERAL .sass-cache coverage rdoc pkg ## PROJECT::SPECIFIC *.gem .rvmrc .bundle
8. RVM
9. Install Remove Sandbox rvm install rvm uninstall rvm use rvm gemset
10. rvm_gemset_create_on_use_flag=1 rvm use ruby-1.9.3-p125@foobar
11. Ruby
12. module ViewHelpers # Calculate the years # for a copyright def copyright_years(start_year) end_year = Date.today.year if start_year == end_year "\#{start_year}" else "\#{start_year} ↵ –\#{end_year}" end end # Add your own helpers below... end
13. Rubygems
14. source :rubygems gem 'serve' gem 'haml' gem 'sass'
15. Serve
16. http://localhost:4000/ http://localhost:4000/hello
17. http://localhost:4000/stylesheets/screen.css http://localhost:4000/ http://localhost:4000/images
18. Create Run Export serve serve create serve export
19. Layouts
20. !!! 5 %html %head %title= @title %link(rel="stylesheet" ↵ href="/ stylesheets/screen.css") %body = yield
21. Layout Content yield:
22. Logic: Which layout?
23. GIT & GITHUB ”Crash Tour“
24. Version control
25. 1 Revision 2 3 4 5 6 7 8 9 Revert
26. Branches
27. 1 Merge 2 7 9 10 4 5 6 8 Branch
28. Collaboration
29. Remote Local Local User B User A
30. Workflow
31. git init git add . git status git commit -m “Commit message”
32. git add path/file.rb git rm path/file.rb git mv path/file.rb
33. git remote add origin git@github.com:polarblau/foo.git git clone git@github.com:polarblau/foo.git git fetch origin git merge origin git pull [...] git push
34. git checkout -b my-branch git checkout master
36. Github
38. HAML
39. %tag(attribute="value") Content <tag attribute="value">Content</tag>
40. Nesting
41. !!! 5 %html %head %title Hello HTML %body %p Hello World!
42. %body %div %h1 Hello World! %div %h1 Hello World!
43. Attributes
44. #foo(title="Hello!") Hello World <div title="Hello">Hello World</div>
45. Classes & IDs
46. #foo Hello World <div id="foo">Hello World</div>
47. .foo Hello World <div class="foo">Hello World</div>
48. .foo.bar Hello World <div class="foo bar">Hello World</div>
49. #foo.foo.bar Hello World <div class="foo" class="foo bar">Hello World</div>
50. #foo(id="bar") Hello World
51. #foo(id="bar") Hello World <div class="foo_bar">Hello World</div>
52. Boolean attributes
53. %input(selected=true) <input selected />
54. Comments
55. / A comment .foo Hello World <!-- A comment --> <div class="foo">Hello World</div>
56. / .foo Hello World <!-- <div class="foo">Hello World</div> -->
57. -# A comment .foo Hello World <div class="foo">Hello World</div>
58. Inline Ruby
59. - headline = "Hello World" %h1= headline <h1>Hello World</h1>
60. - id = 2 + 5 %h1(id="headline-#{id}") Headline <h1 id="headline-7">Hello World</h1>
61. %ul - ["Huey", "Dewey", "Louie"].each do |name| %li= name <ul> <li>Huey</li> <li>Dewey</li> <li>Louie</li> </ul>
62. Escaping HTML
63. %h1 &= "Adam & Eve" <h1>Adam &amp; Eve</h1>
64. Partials (via Serve)
65. %footer = render "shared/footer" Layout Footer Page
66. Errors
67. SASS
69. SASS
70. h1, h2 font-size: 24px color: red
71. Nesting
72. Selectors
73. article font-size: 1em h1 font-size: 1.5em span color: red font-weight: bold
74. article { font-size: 1em; } article h1 { font-size: 1.5em; } article h1 span { color: red; font-weight: bold; }
75. Properties
76. article .foo border: left: width: 4px color: red
77. article .foo { border-left-width: 4px; border-left-color: red; }
78. Reference parent
79. article section &.foo color: red &.bar color: blue
80. article section.foo { color: red; } article section.bar { color: blue; }
81. article section body.js & color: red body.no-js & color: blue
82. body.js article section { color: red; } body.no-js article section { color: blue; }
84. Variables
85. $headline-highlight: #f00 h1 span color: $headline-highlight
86. h1 span { color: red; }
87. Operations
88. $width: 100px div width: $width / 2
89. div { width: 50px; }
90. $width: 100px div width: $width / 2 - 20px
91. div { width: 30px; }
92. Functions
93. $headline-highlight: #f00 h1 color: lighten($headline-highlight, 50%)
94. h1 { color: #ff3333; }
95. Interpolation
96. $side: top div border-#{$side}: 3px solid red
97. div { border-top: 3px solid red; }
98. Mixins
99. =very-important font-weight: bold font-size: 24px color: red h1 +very-important
100. h1 { font-weight: bold; font-size: 24px; color: red; }
101. Arguments
102. =very-important($color: red) font-weight: bold font-size: 24px color: $color h1 +very-important h2 +very-important(blue)
103. h1 { font-weight: bold; font-size: 24px; color: red; } h2 { font-weight: bold; font-size: 24px; color: blue; }
104. Includes
105. @import "shared/colors"
106. Errors
108. FROM MOCKUP TO PROTOTYPE
109. WHAT THE FL*G?