ThemePatternGuide/global-patterns.html at master · JasonStrack/ThemePatternGuide · GitHub

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
{% embed "#{styleguideThemePath}/pattern.html" with { name: "Colors" } %}
	{% block scenarios %}
		{% embed "#{styleguideThemePath}/scenario.html" %}
			{% block scenario %}
				<ul class="colors">
					{% for i in 0..50 %}<i></i>{% endfor %}
				</ul>
			{% endblock %}
		{% endembed %}
	{% endblock %}
	{% block usage %}{{ '.registerColors( colorVar1, colorVar2, colorVar3, ~"red", ... );'|e }}{% endblock %}
{% endembed %}

{% embed "#{styleguideThemePath}/pattern.html" with { name: "Atom: Blockquote" } %}
	{% block scenarios %}
		{% embed "#{styleguideThemePath}/scenario.html" %}
			{% block scenario %}
				<div class="block" data-type="quote" data-quote-quote="This is a very profound thing I said."
						data-quote-cite="Mr. Wise">
					<blockquote>
						<p>This is a very profound thing I said.</p>
						<footer><cite>Mr. Wise</cite></footer>
					</blockquote>
				</div>
			{% endblock %}
		{% endembed %}
	{% endblock %}
{% endembed %}

{% embed "#{styleguideThemePath}/pattern.html" with { name: "Atom: Button" } %}
	{% block scenarios %}
		{% embed "#{styleguideThemePath}/scenario.html" %}
			{% block scenario %}
				<br />
				<p><span class="button"><a href="#">.button > a</a></span></p>
				<p><a href="#"><span class="button">a > .button</span></a></p>
				<p><a href="#" class="button">a.button</a></p>
				<p><button class="button">button.button</button></p>
				<p><span class="button">.button:not(a)</span></p>
				<p><span class="button bleached"><a target="_blank" href="#">Bleached Button</a></span></p>
			{% endblock %}
		{% endembed %}
	{% endblock %}
	{% block usage %}{{ '<a href="#" class="button">Label</a>'|e }}{% endblock %}
{% endembed %}

{% embed "#{styleguideThemePath}/pattern.html" with { name: "Atom: Hard Rule" } %}
	{% block scenarios %}
		{% embed "#{styleguideThemePath}/scenario.html" %}
			{% block scenario %}
				Content before hard rule.
				<hr>
				Content after hard rule.
			{% endblock %}
		{% endembed %}
	{% endblock %}
{% endembed %}