-
Notifications
You must be signed in to change notification settings - Fork 0
/
haml.jade
78 lines (60 loc) · 2.36 KB
/
haml.jade
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
include ./shared/slide_mixins
+slideGroup
+bigTitleSlide("Haml")
:markdown
"Beautiful, DRY,
well-indented, clear markup:
templating haiku."
+littleTitleSlide("Haml Comparison to ERB")
include code/haml_comparison.txt
+bigTitleSlide("Elements")
:markdown
- Start with a `%` like `%body`
- There is no open and close we handle nesting with Indentation
+speakerNotes
:markdown
Indentation matters here %body represents <body></body> while anything
indented under that will be considered inside the body element
+littleTitleSlide("Nesting")
include:markdown code/haml_nesting.md
+speakerNotes
:markdown
Really the nesting thing should be pretty natural If you write your HTML
with a clean style your haml will just be more terse and easier to read.
+bigTitleSlide("Attributes")
:markdown
- CLASS starts with __.__ like __.container__
- ID starts with __#__ like __#menu__
- In combination with other Elements %body__.container__
- In the case of divs the element can be skipped so __#menu__ is a div with ID menu
- For everything else we use a Ruby Hash {key: "value"}
+speakerNotes
:markdown
These . and # symbols are shortcuts to make the comparison between
CSS selectors and your markup as close as possible visually
+littleTitleSlide("# and . Samples")
include:markdown code/class_and_id.md
+speakerNotes
:markdown
Order should go ID then CLASS
Notice that the divs are implied with class and id shortcuts
+bigTitleSlide("Partials")
:markdown
- Abstraction of oft repeated markup
- eg. Navigation, Headers, & Footers
- Modularization of display components
(pieces that look the same and are repeated)
- eg. Products on Ecom and Blog entries
+speakerNotes
:markdown
Abstraction is key to reducing errors and to reduce time updating things.
Making an update to a repeated structure is now encapsulated in a single file
and much easier to use in multiple pages of your site.
+littleTitleSlide("Partial Syntax")
include:markdown code/partials.md
+bigTitleSlide("MORE INFO")
:markdown
[HAML Tutorial](http://haml.info/tutorial.html)
+bigTitleSlide("Tools")
:markdown
[HTML2HAML](http://htmltohaml.com)