1. Utilizar 4 espaços ao invés de tabs;
2. Não utilizar o atributo style em tags HTML;
3. Não utilizar as seguintes tags center, font e u, pois todas encontram-se depreciadas no HTML5.
4. Toda página deve possuir apenas uma tag h2, que corresponde ao título da página. Visto que a tag h1 corresponde ao título do sistema, e deve ser encontrada via template, no topo. Para montar uma hierarquia de títulos deve-se trabalhar hierarquicamente com h3, h4, h5, em diante.

<a href="#">Consulte as informações solicitadas pelo servidor</a>.

O servidor do setor <abbr title="Coordenação de Sistema de Informação">COSINF</abbr> não forneceu as informações solicitadas.

<b>O servidor</b> não forneceu as informações solicitadas.

<dl>
<dt>Nome:</dt>
<dd>Lorem Ipsum</dd>
<dt>E-mail:</dt>
<dd>loremipsum@loremipsum.com.br</dd>
</dl>

O servidor <em>não</em> forneceu as informações solicitadas!

O servidor não forneceu as informações solicitadas pelo <i>software</i>.

<ol>
<li>Um</li>
<li>Dois</li>
<li>Três</li>
<li>Quatro</li>
<li>Cinco</li>
</ol>

<p>O servidor não forneceu as informações solicitadas.</p>

<s>O servidor não forneceu as informações solicitadas.</s>

O servidor não forneceu as informações solicitadas - <small>em 15/07/2014</small>.

O servidor <strong>não</strong> forneceu as informações solicitadas.

1. Manter títulos e labels somente com a primeira inicial maiúscula, exceto para nomes próprios;
2. Pontuar corretamente todas as mensagens direcionadas ao usuário.

Descrição

A barra de ações principal da página deve ser utilizada dentro do block action-bar.

Exibição

• Success
  • suboption 1
  • suboption 2 - suboption - suboption
  • suboption 3
• Primary
• Warning
• Action
• Actions
  • subaction 1
  • subaction 2
  • subaction 3
• View
• Danger

Código HTML

<ul class="action-bar">
    <li><a class="btn primary" href="#"> primary </a></li>
    <li class="has-child">
        <a class="btn success" href="#"> success </a>
        <ul>
            <li><a href="#"> suboption 1 </a></li>
            <li><a href="#"> suboption 2 </a></li>
            <li><a href="#"> suboption 3 </a></li>
        </ul>
    </li>
    <li><a href="#" class="btn"> default </a></li>
    <li><a class="btn default" href="#"> info </a></li>
    <li><a class="btn danger" href="#"> danger </a></li>
</ul>

Exibição

Visualizar Editar Remover

Código

{% icon "view" "url" "title" "extra_class" "confirm" %}
{% icon "edit" "url" "title" "extra_class" "confirm" %}
{% icon "delete" "url" "title" "extra_class" "confirm" %}

As opções de title, extra_class e confirm são opcionais.

Código HTML

<div class="table-responsive">
    <table>
        <caption>Formatação comum de tabelas</caption>
        <thead>
            <tr>
                <th>#</th>
                <th>
                    <div class="text hint hint-bottom" aria-label="Lorem Ipsum dolor sit">Lorem ipsum</div>
                </th>
                <th>Dolor sit</th>
                <th>Consectetur</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>Adipiscing</td>
                <td>Elit</td>
                <td>Maecenas</td>
            </tr>
            <tr class="highlight">
                <td>2</td>
                <td>Adipiscing</td>
                <td>Elit</td>
                <td>Maecenas</td>
            </tr>
            <tr class="error">
                <td>3</td>
                <td>Est elit</td>
                <td>Convallis</td>
                <td>Nunc luctus</td>
            </tr>
            <tr class="extra">
                <td>4</td>
                <td>Est elit</td>
                <td>Convallis</td>
                <td>Nunc luctus</td>
            </tr>
            <tr class="disabled">
                <td>5</td>
                <td>Est elit</td>
                <td>Convallis</td>
                <td>Nunc luctus</td>
            </tr>
        </tbody>
    </table>
</div>

Regras adicionais

1. A tag tfoot automaticamente estiliza o conteúdo de suas células com fonte negrito e alinhamento à direita.
2. Para inserir um comentário a respeito de uma célula de cabeçalho de tabela (th), basta adicionar as classes text hint hint-bottom à tag e o atributo aria-label contendo o comentário.

Exibição

Nome Completo

João da Silva

Nome Usual

João da Silva

Nome Social

João da Silva

Código HTML (1 coluna)

<dl class="definition-list OPTIONAL_CLASS_PARENT">
    <dt>Nome Completo</dt>
    <dd>João da Silva</dd>
</dl>

Código HTML (múltiplas colunas)

<dl class="definition-list flex OPTIONAL_CLASS_PARENT">
    <div class="list-item OPTIONAL_CLASS_CHILD">
        <dt>Nome Completo</dt>
        <dd>João da Silva</dd>
    </div>
</dl>

Lista de links ordenados

Exibição

1. Item a
2. Item x
3. Item c
4. Item b
5. Item y

Código HTML

<ol class="counter-container">
    <li class="counter-item"><a href="#">Item</a></li>
</ol>

Lista numerada com ícones

Exibição

1. Item a
2. Item x
3. Item c
4. Item b
5. Item y

Código HTML

<ol class="numbered-list">
    <li class="list-item"><a href="#">{% icone "file-alt" %} Item</a></li>
</ol>

Utilização

Deve ser usado preferencialmente dentro de tabelas.

Exibição

• José da Silva Substituir
• Maria da Silva Substituir

Código HTML

<ul class="action-list">
    <li>José da Silva <a href="#" class="btn primary">Substituir</a></li>
</ul>

Utilizar preferencialmente o {% render_form form %}.

Exibição

Código HTML

<ul class="stars">
    <li><a href="#"><span class="fas fa-star"></span></a></li>
    <li><a href="#"><span class="fas fa-star"></span></a></li>
    <li><a href="#"><span class="fas fa-star"></span></a></li>
    <li><a href="#"><span class="fas fa-star disabled"></span></a></li>
    <li><a href="#"><span class="fas fa-star disabled"></span></a></li>
</ul>

Exibição

Buscar:

Campus: Todos os campi DG/AP DG/SGA DG/ZN

Tipo: Todos os tipos Alimentação Escolar Auxílio Transporte Iniciação ao Trabalho Cursos de Idiomas

Código HTML

<div class="search-and-filters OPTIONAL_CLASS_PARENT">
    <div class="filter OPTIONAL_CLASS_CHILD">
        <label>Campus:</label>
        <select>
            <option>Todos os campi</option>
            <option>DG/AP</option>
            <option>DG/ZN</option>
        </select>
    </div>
</div>

Exibição

Código HTML

<label class="switch">
    <input type="checkbox">
    <span class="slider"></span>
</label>

Exibição

Marcar todos

Código HTML

<div class="markall-container">
    <label for="markall">Marcar todos</label>
    <input type="checkbox" id="markall">
</div>

Exibição

Atenção: Inscrições para fiscais do concurso abertas.

Atenção: Inscrições para fiscais do concurso abertas.

Informação: Inscrições para fiscais do concurso abertas.

• Poderão se inscrever servidores e alunos.
• As inscrições são até 23/06/2012.

Atenção: Inscrições para fiscais do concurso abertas.

Código HTML (frase simples)

<p class="alert alert-CLASS_PARENT"><strong>Atenção:</strong> Inscrições para fiscais do concurso abertas.</p>

Código HTML (conteúdo complexo)

<div class="alert alert-CLASS_PARENT">
    <p><strong>Atenção:</strong> Inscrições para fiscais do concurso abertas.</p>
    <ul>
        <li>Poderão se inscrever servidores e alunos.</li>
        <li>As inscrições são até 23/06/2012.</li>
    </ul>
</div>

Exibição

Informação acima

Informação abaixo

Código HTML

<span class="hint hint-POSITION" aria-label="Mensagem a ser exibida">Informação</span>