Topcoat é uma estrutura CSS que o ajudará a criar interfaces de usuário rápidas e de alto desempenho. Topcoat é uma das iniciativas de código aberto da Adobe. Em termos de filosofia, a Topcoat acredita que o desempenho da interface do usuário resulta em melhor UX.
Além disso, o projeto visa aproximar os aplicativos da web de aplicativos nativos em termos de velocidade e capacidade de resposta das interações do usuário. Uma das maneiras pelas quais o Topcoat obtém melhorias de desempenho é comparando o desempenho dos navegadores ao renderizar os componentes do Topcoat. Isso é feito medindo o tempo de carregamento e quadros por segundo (fps) para encontrar propriedades CSS de baixo desempenho e tornar seu site profissional.
Topcoat ainda é muito novo. A versão mais recente é a versão 0.8.0 no momento da redação.
Configurar o acabamento
Neste tutorial, construiremos uma interface de usuário simples com o Topcoat.
A primeira coisa que você precisa fazer é baixar o código fonte do Topcoat do GitHub. Depois, extraia o conteúdo do arquivo Zip em algum lugar do seu computador. Como alternativa, você pode usar o prompt de comando do Git para clonar o código-fonte do Topcoat para o seu computador:
git clone https://github.com/Topcoat/Topcoat.git
Aqui estão os diretórios e arquivos de nível superior do Topcoat: Para ver os componentes de interface do usuário que vêm com o Topcoat, vá no demodiretório e abra index.htmlem seu navegador.
Visão geral das folhas de estilo do Topcoat
Se você olhar dentro do diretório do Topcoat css, verá oito arquivos CSS:
- topcoat-desktop-dark.css
- topcoat-desktop-dark.min.css
- topcoat-desktop-light.css
- topcoat-desktop-light.min.css
- topcoat-mobile-dark.css
- topcoat-mobile-dark.min.css
- topcoat-mobile-light.css
- topcoat-mobile-light.min.css
Os arquivos CSS que têm .minem seus nomes de arquivo são versões minificadas, então existem apenas quatro folhas de estilo únicas que vêm com o Topcoat. Por exemplo, topcoat-desktop-dark.min.cssé idêntico a topcoat-desktop-dark.css, exceto que o primeiro é menor em tamanho de arquivo. Você deve usar apenas um ou outro.
Wireframe da IU
Vamos começar com um wireframe rápido da interface do usuário que construiremos com o Topcoat. Fazer isso nos ajudará a descobrir quais componentes do Topcoat serão necessários.
Dica: Você pode usar o arquivo de demonstração que vimos anteriormente para aprender como implementar outros componentes do Topcoat.
Criar um documento HTML
A próxima etapa é criar um documento HTML para nossa interface do usuário. Comece com alguma marcação HTML básica, certificando-se de fazer referência a uma das folhas de estilo do Topcoat. Para este exemplo, usaremos a topcoat-mobile-light.cssfolha de estilo.
<!DOCTYPE html> <html> <head> <title>Online Banking Interface</title> <link rel=”stylesheet” href=”topcoat-mobile-light.css”> </head> <body> <!– Place your content here –> </body> </html>
Adicione os componentes do acabamento
Dentro do <body>elemento do nosso documento HTML, adicionaremos os componentes Barra de Navegação, Lista e Botão.
<div class=”topcoat-navigation-bar”> <div class=”topcoat-navigation-bar__item center full”> <h1 class=”topcoat-navigation-bar__title”>Accounts</h1> </div> </div> <div class=”topcoat-list”> <h3 class=”topcoat-list__header”>Deposits</h3> <ul class=”topcoat-list__container”> <li class=”topcoat-list__item”>Personal Checkings – $12,322.10</li> <li class=”topcoat-list__item”>Personal Savings – $25,322.10</li> </ul> </div> <div class=”topcoat-list”> <h3 class=”topcoat-list__header”>Loans</h3> <ul class=”topcoat-list__container”> <li class=”topcoat-list__item”>Mortgage – $662,322.10</li> </ul> </div> <div class=”topcoat-list”> <h3 class=”topcoat-list__header”>Investments</h3> <ul class=”topcoat-list__container”> <li class=”topcoat-list__item”>401K Account – $232,322.10</li> </ul> </div> <p><button class=”topcoat-button–cta”>Sign Out</button></p>
Teste seu trabalho
Abra seu documento HTML em um navegador da web. Você deve ver algo assim: Como você pode ver, é rápido e fácil criar interfaces de usuário com o Topcoat.
