BT

Início Notícias Bruck: prototipagem rápida de layout de interface

Bruck: prototipagem rápida de layout de interface

Favoritos

O Bruck é um novo sistema de prototipagem lo-fi voltado para web designers que permite que eles criem rapidamente protótipos de layout responsivos e acessíveis para os clientes. Designers podem prototipar uma grande variedade de layouts compondo até 25 componentes da web. Designers também podem visualizar em tempo real o layout composto no playground interativo on-line do Bruck.

Os layouts produzidos pelo Bruck são acessíveis por um leitor de tela e responsivos sem a necessidade de criar pontos de interrupção de CSS, um ponto de junção em uma faixa de tamanhos de tela predeterminados onde os requisitos de layout mudam. Os componentes do Bruck abordam padrões de layout comuns com conteúdo fictício configurável. O código a seguir produzirá, por exemplo, um layout que apresenta três blocos consecutivos de texto (<s-tack repeat = "3"> <t-ext> </ t-ext> </ s-tack>) , seguido por uma grade de imagens de galeria ( <g-rid itemWidth = "10rem" repeat = "6"> ). O layout da galeria consiste em seis imagens exibidas com uma proporção de 1: 2 ( <i-mage ratio = "1: 2"> </ i-mage> ), com um título centrado ( class = "u-text-center" ) abaixo de cada imagem. Designers também podem incorporar comentários ( <c-omment wording = "Uma grade de imagens de galeria"> ). Isso facilita a comunicação entre designers, desenvolvedores e a documentação do layout.

<b-ox>
  <s-tack gap="2">
    <h1><w-ords capitalize></w-ords></h1>
    <s-tack repeat="3">
      <t-ext></t-ext>
    </s-tack>
    <c-omment wording="A grid of gallery images">
      <g-rid itemWidth="10rem" repeat="6">
        <s-tack gap="-1">
          <i-mage ratio="1:2"></i-mage>
          <t-ext words="4,5" class="u-text-center"></t-ext>
        </s-tack>
      </g-rid>
    </c-omment>
  </s-tack>
</b-ox>

Bruck Playground

A maioria dos componentes produz conteúdo aleatório com padrões que podem ser sobrescritos. No exemplo anterior, <t-ext words = "4,5" class = "u-text-center"></ t-ext> especifica um bloco de texto com conteúdo gerado aleatoriamente com quatro ou cinco palavras.

Dois componentes avançados (<o-utput> e <m-odel>) permitem que os usuários trabalhem com dados reais em vez de conteúdo fictício. Os usuários devem incluir dados reais em um arquivo separado denominado data.js. O playground Bruck ainda não permite a visualização de layouts com dados reais.

Para especificar layouts dinâmicos, os designers podem mapear event listeners para um conjunto de ações predeterminadas. O exemplo a seguir apresenta um layout dinâmico que exibe o elemento com o id myElem quando um usuário clica no botão.

<button onClick="action.show('myElem')">Show the element</button>

Seis ações estão atualmente disponíveis com o Bruck. Eles permitem mostrar e ocultar qualquer conteúdo dinamicamente e exibir o conteúdo de <f-low> de maneira passo-a-passo.

O Bruck também fornece um conjunto de classes de utilitários para estilo global (como u-text-center no primeiro exemplo).

Heydon Pickering, o criador de Bruck, imagina manter Bruck uma biblioteca enxuta, enfatizando a produtividade:

Apesar de recursos como ações, eu realmente não quero que ele se torne uma aplicação do tipo "grande monstro". Deve ser áspero e pronto; Fácil de aprender e usar.

O Bruck utiliza a API CSS do Houdini Paint sob o capô. Por isso, o mesmo não está atualmente disponível em todos os navegadores da web. Para a prototipação de layout, a falta de suporte por parte de alguns navegadores não deve ser um grande problema.

Os componentes web do Bruck são elementos personalizados, em que as tags precisam incluir um hífen para diferenciá-los das tags HTML padrão. As tags de uma palavra do Bruck satisfazem esse requisito colocando o hífen após a primeira letra da tag (<t-ext> , <s-tack> ).

Bruck ainda está nos estágios iniciais de desenvolvimento, e um grande lançamento está pendente. Bruck está disponível sob a licença de código aberto ISC. Contribuições e comentários podem ser fornecidos através do projeto Bruck no GitHub.

Avalie esse artigo

Relevância
Estilo/Redação

Olá visitante

Você precisa cadastrar-se no InfoQ Brasil ou para enviar comentários. Há muitas vantagens em se cadastrar.

Obtenha o máximo da experiência do InfoQ Brasil.

HTML é permitido: a,b,br,blockquote,i,li,pre,u,ul,p

Comentários da comunidade

HTML é permitido: a,b,br,blockquote,i,li,pre,u,ul,p

HTML é permitido: a,b,br,blockquote,i,li,pre,u,ul,p

BT

Seu cadastro no InfoQ está atualizado? Poderia rever suas informações?

Nota: se você alterar seu email, receberá uma mensagem de confirmação

Nome da empresa:
Cargo/papel na empresa:
Tamanho da empresa:
País:
Estado:
Você vai receber um email para validação do novo endereço. Esta janela pop-up fechará em instantes.