murb_design_system 0.1.0 → 0.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +4 -4
- data/.ruby-version +1 -0
- data/CHANGELOG.md +23 -1
- data/Gemfile +1 -0
- data/Gemfile.lock +61 -20
- data/README.md +16 -6
- data/_navigation.html.erb +15 -0
- data/basis.html.erb +340 -0
- data/bin/build +41 -0
- data/bin/watch +25 -0
- data/blocks.html.erb +161 -0
- data/dist/.gitkeep +0 -0
- data/dist/GLOBE---1850-2024-MO.png +0 -0
- data/doc/calculations.ods +0 -0
- data/html2canvas.min.js +20 -0
- data/index.html.erb +127 -0
- data/layout.html.erb +84 -0
- data/lib/murb_design_system/version.rb +1 -1
- data/navigation.html.erb +80 -0
- data/print.html.erb +76 -0
- data/promo.html.erb +247 -0
- data/vendor/assets/stylesheets/article.scss +115 -0
- data/vendor/assets/stylesheets/buttons.scss +64 -35
- data/vendor/assets/stylesheets/cards.scss +4 -8
- data/vendor/assets/stylesheets/devise.scss +1 -0
- data/vendor/assets/stylesheets/forms.scss +93 -15
- data/vendor/assets/stylesheets/grid.scss +78 -0
- data/vendor/assets/stylesheets/html.scss +325 -13
- data/vendor/assets/stylesheets/invoice.scss +10 -2
- data/vendor/assets/stylesheets/list-variants.scss +83 -0
- data/vendor/assets/stylesheets/meta.scss +30 -0
- data/vendor/assets/stylesheets/microformats.scss +39 -0
- data/vendor/assets/stylesheets/navigation.scss +75 -7
- data/vendor/assets/stylesheets/notice.scss +63 -5
- data/vendor/assets/stylesheets/print.scss +53 -5
- data/vendor/assets/stylesheets/tables.scss +39 -1
- data/vendor/assets/stylesheets/utils.scss +54 -5
- data/vendor/assets/stylesheets/variables.scss +55 -13
- data/vendor/assets/stylesheets/works.scss +3 -3
- metadata +52 -8
- data/vendor/assets/stylesheets/customers.scss +0 -3
data/blocks.html.erb
ADDED
|
@@ -0,0 +1,161 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
|
|
4
|
+
<head>
|
|
5
|
+
<meta charset="utf-8">
|
|
6
|
+
<meta http-equiv="x-ua-compatible" content="ie=edge">
|
|
7
|
+
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
|
8
|
+
<link rel="stylesheet" href="dist/murb_design_system.css">
|
|
9
|
+
|
|
10
|
+
<title>murb design system</title>
|
|
11
|
+
<% if ENV['REFRESH'] %>
|
|
12
|
+
<meta http-equiv="refresh" content="<%=ENV['REFRESH'] %>">
|
|
13
|
+
<% end %>
|
|
14
|
+
|
|
15
|
+
</head>
|
|
16
|
+
|
|
17
|
+
<body>
|
|
18
|
+
<%= File.read("_navigation.html.erb") %>
|
|
19
|
+
|
|
20
|
+
<main>
|
|
21
|
+
|
|
22
|
+
<section id="alerts-notices" class="visual-comparison-block">
|
|
23
|
+
<h2>Alerts & notices</h2>
|
|
24
|
+
|
|
25
|
+
<p class="alert hide-for-print">
|
|
26
|
+
<code>.alert</code>: climate change is happening
|
|
27
|
+
</p>
|
|
28
|
+
|
|
29
|
+
<p class="callout hide-for-print">
|
|
30
|
+
<code>.callout</code>: did you know that most CO<sub>2</sub> is emitted by electricity and heat
|
|
31
|
+
</p>
|
|
32
|
+
|
|
33
|
+
<p class="notice hide-for-print">
|
|
34
|
+
<code>.notice</code>: great to hear you've stopped long distance travel
|
|
35
|
+
</p>
|
|
36
|
+
|
|
37
|
+
<p>
|
|
38
|
+
When you use these classes with <code>section</code>s or <code>div</code>s, it will consume more space
|
|
39
|
+
</p>
|
|
40
|
+
|
|
41
|
+
<div class="alert hide-for-print">
|
|
42
|
+
<code>.alert</code>: climate change is happening
|
|
43
|
+
</div>
|
|
44
|
+
|
|
45
|
+
<section class="callout hide-for-print">
|
|
46
|
+
<p>
|
|
47
|
+
<code>.callout</code>: did you know that most CO<sub>2</sub> is emitted by electricity and heat
|
|
48
|
+
</p>
|
|
49
|
+
</section>
|
|
50
|
+
|
|
51
|
+
<section class="notice hide-for-print">
|
|
52
|
+
<h5>Perhaps a title is even better</h5>
|
|
53
|
+
<p>
|
|
54
|
+
<code>.notice</code>: great to hear you've stopped long distance travel
|
|
55
|
+
</p>
|
|
56
|
+
</section>
|
|
57
|
+
</section>
|
|
58
|
+
|
|
59
|
+
|
|
60
|
+
<section id="navigation" class="visual-comparison-block">
|
|
61
|
+
<h2 id="navigation">Navigation</h2>
|
|
62
|
+
|
|
63
|
+
<p>
|
|
64
|
+
You have already seen the main navigation in the top, wrap an unordered list
|
|
65
|
+
in a
|
|
66
|
+
<code>nav</code>
|
|
67
|
+
-element. Make it sitcky by adding the
|
|
68
|
+
<code>.sticky</code>
|
|
69
|
+
class (see this page's main nav)
|
|
70
|
+
</p>
|
|
71
|
+
|
|
72
|
+
<p>
|
|
73
|
+
You can also have navigation in main; as a sub-navigation. Make sure you
|
|
74
|
+
give your navigation a unique `aria-label` (leave out 'navigation, it will
|
|
75
|
+
otherwise be double read').
|
|
76
|
+
</p>
|
|
77
|
+
|
|
78
|
+
<nav aria-label="demo">
|
|
79
|
+
<ul>
|
|
80
|
+
<li><a href="#principles" class="active">Active principles</a></li>
|
|
81
|
+
<li><a href="#principles">Principles</a></li>
|
|
82
|
+
</ul>
|
|
83
|
+
|
|
84
|
+
<ul>
|
|
85
|
+
<li><a href="#" class="button secondary">Other button</a></li>
|
|
86
|
+
<li><a href="#" class="button secondary">Other button</a></li>
|
|
87
|
+
<li><a href="#" class="button alert">Fake sign out button</a></li>
|
|
88
|
+
</ul>
|
|
89
|
+
</nav>
|
|
90
|
+
</section>
|
|
91
|
+
|
|
92
|
+
<section id="cards" class="visual-comparison-block">
|
|
93
|
+
<h2>Cards</h2>
|
|
94
|
+
|
|
95
|
+
<p>
|
|
96
|
+
These have been heavily influenced by
|
|
97
|
+
<a href="https://inclusive-components.design/cards/">Inclusive Component Cards</a>
|
|
98
|
+
</p>
|
|
99
|
+
|
|
100
|
+
<ol class="cards">
|
|
101
|
+
<li>
|
|
102
|
+
<article class="card">
|
|
103
|
+
<div class="text">Text before image</div>
|
|
104
|
+
<div class="img">Image</div>
|
|
105
|
+
</article>
|
|
106
|
+
</li>
|
|
107
|
+
<li>
|
|
108
|
+
<article class="card">
|
|
109
|
+
<div class="text">Text</div>
|
|
110
|
+
<div class="img">Image</div>
|
|
111
|
+
</article>
|
|
112
|
+
</li>
|
|
113
|
+
<li>
|
|
114
|
+
<article class="card">
|
|
115
|
+
<div class="text">Text</div>
|
|
116
|
+
<div class="img">Image</div>
|
|
117
|
+
</article>
|
|
118
|
+
</li>
|
|
119
|
+
<li>
|
|
120
|
+
<article class="card">
|
|
121
|
+
<div class="text">Text</div>
|
|
122
|
+
<div class="img">Image</div>
|
|
123
|
+
</article>
|
|
124
|
+
</li>
|
|
125
|
+
<li>
|
|
126
|
+
<article class="card">
|
|
127
|
+
<div class="text">Text</div>
|
|
128
|
+
<div class="img">Image</div>
|
|
129
|
+
</article>
|
|
130
|
+
</li>
|
|
131
|
+
<li>
|
|
132
|
+
<article class="card">
|
|
133
|
+
<div class="text">Text</div>
|
|
134
|
+
<div class="img">Image</div>
|
|
135
|
+
</article>
|
|
136
|
+
</li>
|
|
137
|
+
<li>
|
|
138
|
+
<article class="card">
|
|
139
|
+
<div class="text">Text</div>
|
|
140
|
+
<div class="img">Image</div>
|
|
141
|
+
</article>
|
|
142
|
+
</li>
|
|
143
|
+
</ol>
|
|
144
|
+
</section>
|
|
145
|
+
|
|
146
|
+
<section id="meta">
|
|
147
|
+
<h2>Meta section</h2>
|
|
148
|
+
<p>Meta before meta was just meta. So that's something you want to add to the top of your article.</p>
|
|
149
|
+
<section class="meta">
|
|
150
|
+
<p>This article was published about 2 hours ago.</p>
|
|
151
|
+
</section>
|
|
152
|
+
<h3>Meta below a title</h3>
|
|
153
|
+
<section class="meta">
|
|
154
|
+
<p>The paragraph won't exercise any margin on bottom.</p>
|
|
155
|
+
</section>
|
|
156
|
+
<p>This is a paragraph after the meta though.</p>
|
|
157
|
+
|
|
158
|
+
</section>
|
|
159
|
+
</body>
|
|
160
|
+
|
|
161
|
+
</html>
|
data/dist/.gitkeep
ADDED
|
File without changes
|
|
Binary file
|
|
Binary file
|