Já tem um tempo desde que Telhas do estilo foram trazidos a este mundo pelo gênio de um Samantha Warren . Para aqueles de vocês que podem ter olhado para eles uma vez e depois se esqueceram do que são, aqui vai uma rápida explicação:
As Ladrilhos de Estilo são uma espécie de modelo que permite testar e visualizar rapidamente várias cores, fontes, texturas e outras opções relacionadas ao estilo estético para seus projetos antes de criar um modelo de alta fidelidade, mas após a criação das estruturas de arame. Eles devem ser apresentados aos clientes, partes interessadas ou quaisquer outras partes interessadas no início do processo de design. Dessa forma, você pode ter preocupações anteriores sobre a escolha da fonte e perguntas como "Podemos ter um 'flashier' vermelho?"
Simplificando, você deve usá-los, mesmo que apenas para si mesmo. Pode parecer um grande problema adicionar mais um passo ao processo de design; mas posso dizer por experiência pessoal que vale a pena. Eu desenho no navegador: olhar para uma tela em branco do Photoshop pode ser assustador; olhar para uma janela do navegador em branco parece ser muito mais difícil.
O senso de direção fornecido pela criação de um Style Tile facilita muito a criação do resto do site. Não é nada tão complexo ou constritivo como um guia de estilo; Assim, dá um lugar para começar e a liberdade de ajustar as coisas à medida que você avança.
Isso traz um pequeno problema com os Style Tiles originais, no entanto. Eles são PSDs. Os designers baseados em navegador, como eu, vão querer Style Tiles baseados em navegador. Queremos ver como essas coisas vão ficar na Web, afinal, e em tantos dispositivos quanto possível.
Várias pessoas já saíram à nossa frente nessa frente. Existem modelos pré-criados para pessoas que querem começar a criar Style Tiles em seus navegadores. Confira:
As pessoas adoráveis no Sparkbox criaram modelo responsivo da telha do estilo baseado em HTML e Sass. É uma das opções mais simples, como visto na demo, mas o código é bem comentado. Eles até incluíram scripts opcionais para torná-lo compatível com o IE 7 e versões posteriores, caso seu cliente não tenha atualizado seu navegador… para sempre.
Criado por Namanyay Goel , Webstiles tem muito em comum com as outras soluções nesta lista. O que os torna diferentes é que eles foram construídos com o pré-processador menos conhecido (alguns diriam subestimado) da Stylus CSS.
Se você trabalha com o framework Compass, junto com coisas como Ruby e Sass, tente este por tamanho. Ele pode ser instalado como qualquer outra jóia de Ruby, por isso deve cair perfeitamente em seu fluxo de trabalho. Curiosamente, a cópia do corpo pode ser "gerada" por meio de uma variável Sass e do atributo content:. A coisa toda foi criada para que você nunca precise tocar no HTML.
o Boilerplate responsivo para telhas de estilo traz algumas sombras bastante duras, mas é ágil e não usa nada mais complicado do que HTML clássico e CSS. Sem frameworks, sem pré-processadores, nada. É um bom ponto de partida se você quiser apenas abri-lo em um editor de texto e ir.
Com tantas opções pré-fabricadas por aí, por que você quer construir seu próprio HTML / CSS Style Tiles do zero? Parece uma perda de tempo? Bem, sim e não.
Se você estiver criando um site simples e não tiver todo o conteúdo planejado ainda, ou se o cliente não o tiver enviado, uma das opções pré-fabricadas ficará bem. No entanto, se você estiver criando um aplicativo Web complexo ou um site muito grande com muitos tipos de conteúdo distintos ou elementos de interface do usuário, convém criar um modelo de bloco de estilo do zero.
Os existentes simplesmente não levam em consideração o grande número possível de tipos de conteúdo e elementos. Assim, você pode querer um Style Tile que inclua um vídeo, um reprodutor de áudio ou um mapa incorporado. Você pode querer um que mostre uma interface com guias ou um menu de acordeão.
Se você estiver criando um site que depende de alguns elementos incomuns da interface do usuário, convém criar um modelo de Bloco de estilo que inclua esses recursos.
Não precisa ser tão difícil. Basta configurar um layout simples de duas ou três colunas e começar a incluir os elementos visuais que serão mais importantes para o seu design, com base no conteúdo / funcionalidade. Estes incluirão:
Geralmente, não há necessidade de torná-lo código pronto para produção para todos os navegadores. Mantenha-o simples, mantenha-o em HTML5. A menos que você esteja usando um elemento de interface do usuário não padrão que precisa ser codificado do zero em HTML e CSS, não se preocupe com JavaScript.
A melhor parte? Você pode refinar e reutilizar todo o CSS relevante à medida que começar a codificar seu modelo baseado em navegador!
Telhas de estilo são mais do que vale a pena investigar se você ainda não estiver usando-os.
Mostre-os aos clientes, guarde-os para si mesmo, use as opções pré-fabricadas ou crie o seu próprio ... isso não importa. Apenas ter esse senso de direção estilística tornará muito mais fácil preencher essa janela do navegador em branco.
Imagem em destaque, estúdio de design através da Anne-Sophie Leens