O SmartNode Dashboard é um framework que foi construído sobre a base de código do Bootstrap. Sua proposta é fornecer um código base para criação de Dashboads a partir dos elementos cards. Os cards são padrões de interfaces altamente versáteis e por isso sua utilização é muito interessante para ser utilizada neste projeto. O Bootstrap fornece um código padrão para configurar cards e dessa forma é possível abstrair seu uso e trazer novas possibilidades para esse padrão.

Por ter sido derivado do Bootstrap, esse framework estende também as mesmas convenções de código. Além disso ela utiliza a arquitetura de código CSS BEM. A intenção principal deste projeto é fornecer aos programadores que precisam lidar com a criação de interfaces para dashboards, ter uma ferramenta que ajude a produzir projetos mais consistentes e em menos tempo. Além do mais, é possível criar novos formatos a partir da estrutura proposta no SmartNode Dashboard.

Há duas opções de iniciar utilizando o framework.

• Baixando a versão estável atual.
• Fazendo um clone do repositório: git clone git://github.com/smart-node-dashboard.git.

A figura abaixo mostra a arquitetura de um card utilizado para exibir os dados no dahsboard.

O container de card é subdivido internamente em três partes de conteúdo. Cada classe representa um bloco e sua funcionalidade.

1. .card: classe básica do container. É responsável pela formatação do bloco principal e formatação geral do bloco;
2. .card__header: classe responsável por formatar o bloco de cabeçalho do card. Esse bloco é responsável por exibir detalhes de identificação do card;
3. .card__body: classe que formata os elementos de conteúdo. O bloco de conteúdo que é formatado por esta classe, contém três sub-blocos, que dividem o espaço de conteúdo e que pode ser formatado livremente. Os blocos internos são:
   • .card__body__top: um bloco para conteúdo acima;
   • .card__body__content: utilizado para incluir o contéudo principal;
   • .card__body__down: bloco para conteúdo complementar;
4. .card__footer: classe responsável pela formatação do bloco de rodapé. Esse bloco é indicado para incluir funcionalidades de interação (como links e botões, por exemplo).

A figura acima mostra uma exemplo de utilização de um card customizado para apresentar informações sobre o tempo. Esse exemplo está disponível na coleção de cards de exemplos já customizados e disponíveis nessa versão do framework.

Logo abaixo é possível ver esse cards sendo aplicados para exibir informações a cerca de diversas fontes diferentes. Cada card tem uma saída diferente (CF01 - card tempo, CF02 - card bikes, CF03 - card qualidade do ar, CF04 - card rotas de ônibus, CP01 - card de trânsito em tempo real, CD01 - card de eventos de natal, CD02 - card de câmera de tráfego).

O projeto conta com alguns elementos básicos já disponíveis (cards e gráficos). Cada card tem uma funcionalidade específica e sua customização é apenas uma estilização simples que pode ser facilmente modificada. Atualmente o framework conta com os seguintes elementos:

Os programadores podem contribuir enviando novos cards para este repositório.

O código abaixo mostra o código básico de uso de um card. A customização será a padronizada no framework.

    <section class="card">
      <section class="card__header">
        <!-- texto do título -->
      </section>

      <section class="card__body">
        <div class="card__body__top">
          <!-- texto do complementar -->
        </div>
        <div class="card__body__content">
          <!-- texto do conteúdo principal -->
        </div>
        <div class="card__body__down">
          <!-- texto do complementar -->
        </div>
      </section>

      <section class="card__footer">
        <!-- conteúdo de interação -->
      </section>
    </section>

O código abaixo mostra o card sendo modificado para um tipo específico de visualização. O card de tempo. Perceba que nesse código a única alteração foi na classe extra incluída no container principal do card. Dessa forma é possível reescrever ou apenas sobrepor a funcionalidade pré-existente do elemento tempo.

    <section class="card card--tempo">
      <section class="card__header">
        <!-- texto do título -->
      </section>

      <section class="card__body">
        <div class="card__body__top">
          <!-- texto do complementar -->
        </div>
        <div class="card__body__content">
          <!-- texto do conteúdo principal -->
        </div>
        <div class="card__body__down">
          <!-- texto do complementar -->
        </div>
      </section>

      <section class="card__footer">
        <!-- conteúdo de interação -->
      </section>
    </section>