src/ej/templates/jinja2/pages/info-styles.jinja2
{% extends 'base.jinja2' %}
{% set content_title = _('Styles') %}
{% macro example_row(cls, text=None) %}
<tr>
<td class="monospace">.{{ cls }}</td>
<td class="{{ cls }}">{{ text or cls }}</td>
</tr>
{% endmacro %}
{% block content %}
<div class="container pad-y3 pad-x2">
<p>
Reference page for all styles in the current EJ instance. Use this page to tweak the
theme to your linking and see the effects of colors, typography and layout elements.
</p>
<section>
<h1>Global configurations and variables</h1>
<h2>Typography</h2>
<h3>Header sizes</h3>
<div class="text-faded">
{% for i in range(1, 7) %}
<h{{ i }}>H{{ i }} Title (<strong>strong</strong>, <em>em</em>)</h{{ i }}>
{% endfor %}
<h3>Modifiers</h3>
<table>
<thead>
<tr>
<th>{{ _('Class') }}</th>
<th>{{ _('Example') }}</th>
</tr>
</thead>
<tbody>
{{ example_row('text-1', 'Text (h1).') }}
{{ example_row('text-2', 'Text (h2).') }}
{{ example_row('text-3', 'Text (h3).') }}
{{ example_row('text-4', 'Text (h4).') }}
{{ example_row('text-5', 'Text (h5, p).') }}
{{ example_row('text-6', 'Text (h6).') }}
{{ example_row('text-7', 'Tiny text.') }}
{{ example_row('text-8', 'Very tiny text.') }}
<tr>
<th colspan="2">Text modifiers</th>
</tr>
{{ example_row('sans-serif') }}
{{ example_row('serif') }}
{{ example_row('monospace') }}
{{ example_row('cursive') }}
<tr>
<th colspan="2">Default styles</th>
</tr>
{{ example_row('text', 'Default text for paragraphs.') }}
{{ example_row('heading', 'Titles and headings.') }}
<tr>
<th colspan="2">Overridable styles</th>
</tr>
{% for opt in 'italic uppercase lowercase capitalize underline line-through'.split() %}
{{ example_row(opt) }}
{% endfor %}
<tr>
<th colspan="2">Alignment</th>
</tr>
{% for opt in 'left right center justify'.split() %}
{{ example_row('text-' + opt) }}
{% endfor %}
{% for opt in 'baseline top middle bottom text-top text-bottom'.split() %}
{{ example_row('align-' + opt) }}
{% endfor %}
</tbody>
</table>
<p>
This is a paragraph of text and a <a href="#">link</a>.
Text can be styled with <strong>strong</strong> and <em>emphasis</em>.
</p>
</div>
<h2>Colors</h2>
<h3>Main color scheme</h3>
<table>
<thead>
<tr>
<th>{{ _('Class') }}</th>
<th>{{ _('Example') }}</th>
</tr>
</thead>
<tbody>
{% for opt in ('brand-lighter brand-light brand brand-dark brand-darker'.split()
+ 'accent-lighter accent-light accent accent-dark accent-darker'.split()
+ 'action primary secondary positive warning negative'.split()) %}
{{ example_row('color-' + opt) }}
{% endfor %}
</tbody>
</table>
</section>
<section>
<h1>Generic Elements</h1>
<h2>Buttons</h2>
<p>
<button>button</button>
<button class="is-primary">button.is-primary</button>
<button class="is-secondary">button.is-secondary</button>
<button class="is-positive">button.is-positive</button>
<button class="is-warning">button.is-warning</button>
<button class="is-negative">button.is-negative</button>
<button class="is-ghost">button.is-ghost</button>
</p>
<p>Links can also be styled as buttons, by adding the ".button" class like in
<code>{{ '<a class="button">Link</a>' }}</code>.
<p>
<a href="#" class="button">a.button</a>
<a href="#" class="button is-primary">a.button.is-primary</a>
<a href="#" class="button is-secondary">a.button.is-secondary</a>
<a href="#" class="button is-positive">a.button.is-positive</a>
<a href="#" class="button is-warning">a.button.is-warning</a>
<a href="#" class="button is-negative">a.button.is-negative</a>
<a href="#" class="button is-ghost">a.button.is-ghost</a>
</p>
<h2>Forms</h2>
<p>
{% for input in 'email number password search tel url color date month week datetime datetime-local'.split() %}
<label for="input-{{ input }}">{{ input.title() }}:</label>
<input type="{{ input }}" value="{{ input }}" id="input-{{ input }}">
{% endfor %}
<label for="input-input">Input:</label>
<input value="standard input" id="input-input">
<label for="input-textarea">Input:</label>
<textarea id="input-textarea">Textarea text</textarea>
<label for="input-checkbox">Checkbox:</label>
<p><input type="checkbox" id="input-checkbox"> Checkbox</p>
<label for="input-radio">Radio:</label>
<div id="input-radio">
<label><input type="radio" name="radio" value="1"> Radio 1</label>
<label><input type="radio" name="radio" value="2"> Radio 2</label>
</div>
<label for="input-select">Select:</label>
<select id="input-input">
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>
<h2>Links</h2>
<p>
A text with a standard <a href="#">link</a> and a <a class="text" href="#"><code>a.text</code> link</a>.
</p>
<h2>Lists</h2>
<ul>
<li>{{ _('Unordered list item 1') }}</li>
<li>{{ _('Unordered list item 2') }}</li>
<li>{{ _('Unordered list item 3') }}</li>
</ul>
<ol>
<li>{{ _('Unordered list item 1') }}</li>
<li>{{ _('Unordered list item 2') }}</li>
<li>{{ _('Unordered list item 3') }}</li>
</ol>
<dl>
<dt>{{ _('Name 1') }}</dt>
<dd>{{ _('Value 1') }}</dd>
<dt>{{ _('Name 2') }}</dt>
<dd>{{ _('Value 2') }}</dd>
</dl>
<h2>Tables</h2>
<p>Work in progress...</p>
<h2>Images</h2>
<p>
<img src="{{ static('img/logo/logo.svg') }}">
<img src="{{ static('img/login/login.svg') }}">
</p>
<h2>Other</h2>
<blockquote>Block quote!</blockquote>
<pre><code>Pre formatted code.</code></pre>
<p>
Some <code>inline code text.</code>. Mind the horizontal line
we created bellow (<code>{{ '<hr>' }}</code>).
</p>
<hr>
<div>
<p>foo
<p>bar
</div>
</section>
</div>
{% endblock %}