Style guide
Style guide is available in MEG Docs: Style Guide.
It was implemented in Task #27789.
See also
Component templatetags implement re-usable components that adhere to the style guide.
Examples
Examples of the implementation can be found in templates/dev/components.html.
Rendered version can be accessed via /dev/components when project runs in development mode.
General
1{% extends 'base.html' %}
2{% load megforms_extras %}
3{% load components %}
4{% load i18n %}
5{% load components %}
6
7{% block content %}
8 <h1>Buttons</h1>
9 <h2>Standalone</h2>
10 <a class="btn btn-primary">{% icon "remove" %} cancel</a>
11 <a class="btn btn-success">{% icon "ok" %} Save</a>
12 <a class="btn btn-danger">{% icon "trash" %} Delete</a>
13 <a class="btn btn-default blue-icon blue">{% icon "plus" %} New</a>
14 <a class="btn btn-default">{% icon "lock" %} Admin link</a>
15 <a class="btn btn-primary" disabled>{% icon "remove" %} Disabled button</a>
16 <a class="btn btn-secondary">{% icon "bookmark" %} Bookmark</a>
17 <a class="btn btn-freeze-table-header">{% icon "eye-open" %} Table Function</a>
18
19 <h2>Button groups</h2>
20 <div class="btn-group">
21 <a class="btn btn-primary">{% icon "remove" %} Primary</a>
22 <a class="btn btn-success">{% icon "ok" %} Save</a>
23 <a class="btn btn-success" disabled>{% icon "remove" %} Disabled</a>
24 <a class="btn btn-danger">{% icon "trash" %} Delete</a>
25 <a class="btn btn-default blue-icon blue">{% icon "plus" %} New</a>
26 <a class="btn btn-default">{% icon "lock" %} Admin link</a>
27 <a class="btn btn-secondary">{% icon "bookmark" %} Bookmark</a>
28 </div>
29
30 <h2>Dropdown</h2>
31 <div class="btn-group" role="group">
32 <a class="dropper btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
33 Dropdown button <span class="caret"></span>
34 </a>
35 <ul class="dropdown-menu export-dropdown">
36 <li>
37 <a>Item 1</a>
38 </li>
39 </ul>
40 </div>
41
42 <h2>Special cases</h2>
43 <a class="btn btn-default no-caps">Button without caps</a>
44 <a class="btn btn-primary shadowed">{% icon "calendar" %} Shadowed button</a>
45
46 <h1>Tooltips</h1>
47
48 <a class="btn btn-primary" data-toggle="tooltip" title="Default tooltip placement">{% icon "chevron-up" %} Default</a>
49 <a class="btn btn-primary" data-toggle="tooltip" data-placement="right" title="Left tooltip placement">{% icon "chevron-right" %} Right</a>
50 <a class="btn btn-primary" data-toggle="tooltip" data-placement="left" title="Left tooltip placement">{% icon "chevron-left" %} Left</a>
51 <a class="btn btn-primary" data-toggle="tooltip" data-placement="down" title="Bottom tooltip placement">{% icon "chevron-down" %} Down</a>
52
53 <div class="btn-group tooltips">
54 <a title="Hello" class="btn btn-default">{% icon "ok" %} Group</a>
55 <a title="Hello" class="btn btn-primary">{% icon "ok" %} Button</a>
56 <a title="Hello" class="btn btn-danger">{% icon "ok" %} Tooltips</a>
57 </div>
58
59 <h1>Tooltips</h1>
60
61 <a class="btn btn-primary" data-toggle="tooltip" title="Default tooltip placement">{% icon "chevron-up" %} Default</a>
62 <a class="btn btn-primary" data-toggle="tooltip" data-placement="right" title="Left tooltip placement">{% icon "chevron-right" %} Right</a>
63 <a class="btn btn-primary" data-toggle="tooltip" data-placement="left" title="Left tooltip placement">{% icon "chevron-left" %} Left</a>
64 <a class="btn btn-primary" data-toggle="tooltip" data-placement="down" title="Bottom tooltip placement">{% icon "chevron-down" %} Down</a>
65
66 <div class="btn-group tooltips">
67 <a title="Default button" class="btn btn-default">{% icon "ok" %} Group</a>
68 <a title="Primary button" class="btn btn-primary">{% icon "ok" %} Button</a>
69 <button title="Hello" class="btn btn-danger">{% icon "ok" %} Tooltips</button>
70 </div>
71
72 <h1>Icons</h1>
73 {% icon "alert" %}
74 {% icon "arrow-left" %}
75 {% icon "arrow-right" %}
76 {% icon "blackboard" %}
77 {% icon "book" %}
78 {% icon "bookmark" %}
79 {% icon "calendar" %}
80 {% icon "check" %}
81 {% icon "chevron-down" %}
82 {% icon "chevron-left" %}
83 {% icon "chevron-right" %}
84 {% icon "chevron-up" %}
85 {% icon "cloud-upload" %}
86 {% icon "cog" %}
87 {% icon "copy" %}
88 {% icon "dashboard" %}
89 {% icon "download" %}
90 {% icon "download-alt" %}
91 {% icon "duplicate" %}
92 {% icon "earphone" %}
93 {% icon "edit" %}
94 {% icon "envelope" %}
95 {% icon "eye-open" %}
96 {% icon "exclamation-sign" %}
97 {% icon "file" %}
98 {% icon "floppy-save" %}
99 {% icon "fullscreen" %}
100 {% icon "info-sign" %}
101 {% icon "link" %}
102 {% icon "list" %}
103 {% icon "lock" %}
104 {% icon "log-in" %}
105 {% icon "log-out" %}
106 {% icon "new-window" %}
107 {% icon "ok" %}
108 {% icon 'option-vertical' %}
109 {% icon "pause" %}
110 {% icon "paperclip" %}
111 {% icon "pencil" %}
112 {% icon "play" %}
113 {% icon "plus" %}
114 {% icon "print" %}
115 {% icon "question-sign" %}
116 {% icon "record" %}
117 {% icon "refresh" %}
118 {% icon "remove" %}
119 {% icon "remove-circle" %}
120 {% icon "remove-sign" %}
121 {% icon "repeat" %}
122 {% icon "resize-horizontal" %}
123 {% icon "resize-vertical" %}
124 {% icon "retweet" %}
125 {% icon "scale" %}
126 {% icon "search" %}
127 {% icon "send" %}
128 {% icon "share" %}
129 {% icon "sort" %}
130 {% icon "sort-by-attributes" %}
131 {% icon "sort-by-attributes-alt" %}
132 {% icon "star" %}
133 {% icon "star-empty" %}
134 {% icon "stats" %}
135 {% icon "stop" %}
136 {% icon "tasks" %}
137 {% icon "th-list" %}
138 {% icon "trash" %}
139 {% icon "triangle-right" %}
140 {% icon "unchecked" %}
141 {% icon "upload" %}
142 {% icon "user" %}
143
144 <h1>Tables</h1>
145 <div class="table-wrapper">
146 <table class="table table-striped">
147 <thead>
148 <tr>
149 <th>Head 1</th>
150 <th>Head 2</th>
151 <th>Head 3</th>
152 <th>Action</th>
153 </tr>
154 </thead>
155 <tbody>
156 <tr>
157 <th>Row 1</th>
158 <td>Content</td>
159 <td>Content</td>
160 <td><div class="btn-group">
161 <a class="btn btn-success btn-sm">{% icon 'plus' %}</a>
162 <a class="btn btn-primary btn-sm">{% icon 'edit' %}</a>
163 <a class="btn btn-danger btn-sm">{% icon 'trash' %}</a>
164 </div></td>
165 </tr>
166 <tr>
167 <th>Row 2</th>
168 <td>Content</td>
169 <td>Content</td>
170 <td><div class="btn-group">
171 <a class="btn btn-success btn-sm">{% icon 'plus' %}</a>
172 <a class="btn btn-primary btn-sm">{% icon 'edit' %}</a>
173 <a class="btn btn-danger btn-sm">{% icon 'trash' %}</a>
174 </div></td>
175 </tr>
176 <tr>
177 <th>Row 3</th>
178 <td>Content</td>
179 <td>Content</td>
180 <td><div class="btn-group">
181 <a class="btn btn-success btn-sm">{% icon 'plus' %}</a>
182 <a class="btn btn-primary btn-sm">{% icon 'edit' %}</a>
183 <a class="btn btn-danger btn-sm">{% icon 'trash' %}</a>
184 </div></td>
185 </tr>
186 <tr>
187 <th>Row 4</th>
188 <td>Content</td>
189 <td>Content</td>
190 <td><div class="btn-group">
191 <a class="btn btn-success btn-sm">{% icon 'plus' %}</a>
192 <a class="btn btn-primary btn-sm">{% icon 'edit' %}</a>
193 <a class="btn btn-danger btn-sm">{% icon 'trash' %}</a>
194 </div></td>
195 </tr>
196 </tbody>
197 </table>
198 </div>
199
200 <div class="table-wrapper">
201 <table class="table table-striped">
202 <thead>
203 <tr>
204 <th>Head 1</th>
205 <th>Head 2</th>
206 <th>Head 3</th>
207 <th>Action</th>
208 </tr>
209 </thead>
210 <tbody>
211 {% empty_table_message _("Could not find any items") colspan=4 %}
212 </tbody>
213 </table>
214 </div>
215
216 <h1>Cards</h1>
217 <div class="card">
218 Simple card example
219 </div>
220 <div class="graph-wrapper">
221 Dashboard widget card
222 </div>
223
224 {% include 'dev/dialogs.html' %}
225{% endblock %}
Modals
1{% load megforms_extras %}
2{% load i18n %}
3{% load components %}
4
5<h1>Modals</h1>
6{% bootstrap_modal title="Sample Modal" modal_id='sample-modal' size='lg' %}
7 {% block body %}
8 <p>Sample modal body</p>
9 <p>This modal is extra wide thanks to <code>size='lg'</code> parameter</p>
10 {% endblock %}
11 {% block footer %}
12 {% modal_button_ok %}
13 {% modal_button_cancel %}
14 {% modal_button _("Close") 'remove' btn_class='btn-danger' %}
15 {% endblock %}
16{% end_bootstrap_modal %}
17
18{% bootstrap_modal title="Sample Form modal" modal_id="form-modal" %}
19 {% block content %}
20 <form method="post">
21 <div class="modal-body">
22 <input type="text">
23 <input type="number">
24 </div>
25 <div class="modal-footer">
26 <button type="submit" class="btn btn-success">{% icon 'ok' %} {% trans 'Save' %}</button>
27 </div>
28 </form>
29 {% endblock %}
30{% end_bootstrap_modal %}
31
32<button class="btn btn-primary" data-toggle="modal" data-target="#sample-modal">{% icon 'book' %} Show sample modal</button>
33<button class="btn btn-primary" data-toggle="modal" data-target="#form-modal">{% icon 'book' %} Show form modal</button>