-
Notifications
You must be signed in to change notification settings - Fork 2
HTML Template Style guide
Prefer using {% block head %}{% endblock head %} with <script> and <style> blocks over using blocks : style, jshead, documentready etc.
This allows PyCharm or another IDE, to parse the JavaScript and CSS with proper highlighting and referencing.
The downside is it does lock us into $(document).ready(() => {}) to run JavaScript after the page has loaded, where in future putting script tags at the bottom of the page might be a more appropriate solution.
Pages should be surrounded with <div class="container"> or <div class="continer-table">, the second having a larger maximum size until we can shrink down tables.
A page should preferably have one h3 element, followed by h4 subheadings. (Though really they should be h1s because why start at 3 except for style reasons?).
Card vs laying out with headings... I don't have a good recommendation when to do one and not the other here.
Whenever an HTML element is in relation to a django object, put the object's id as a suffix e.g. <div id="error-{{ variant.id }}">{{ variant.error }}</div>. Stops clashes but it makes automated testing harder, review this at later time
Use the ui_tab_builder tags, it has the advantage of if only one tab is visible, than that tab will just be rendered in place with a heading instead of in a tab set of 1.
Prefer Bootstrap collapse over using jQuery show()/hide(), e.g.
<a data-toggle="collapse" href="#foo-3">show more</a>
<div class="collapse" id="foo-3">More data goes here and starts off collapse automatically</div>
the link will then automatically become a toggle.
Links that are external to variantgrid should be marked with class="external-link" and taget="_blank". You can also call fixLinks() in $(document).ready(() => {fixLinks()}); to apply this to links after the fact.
As we're using stock Bootstrap rather than compiling our own, we're still marking all links as class="hover-link" which is very much like Bootstrap's default (just a different shade of blue).
Can turn inputs and links into buttons by just class="btn" then for subclass of buttons:
- btn-primary - if clicking this button is the whole point of the form and it will alter data in some way
- btn-danger - if clicking this button will delete something
- btn-outline-primary - if clicking this button is semi-optional and has no affect on data (e.g. downloads)
- btn-secondary - generally used for cancel
Prefer use of font awesome over including icons (easy to colour, quicker to load, styles better). Use the search available here https://fontawesome.com/ (for free version).