Layout Toolkit

Introdução

Toolkits de front-end são estruturas que oferecem recursos para auxiliar o desenvolvimento do layout das aplicações. No caso das aplicações web, normalmente eles oferecem folhas de estilo CSS bem organizadas, scripts JavaScript para oferecer interações com elementos de interface, um conjunto de ícones e, principalmente, padrões para a confecção do layout. Eles são muito úteis para desenvolvedores de aplicações web que não tem muito domínio ou paciência com CSS, mas também podem facilitar muito a vida de web designers e de desenvolvedores que já dominam o CSS, afinal, eles foram extensivamente usados e testados para se comportar da melhor forma possível na maioria dos navegadores web atuais.

A maioria deles vai de encontro com o que foi comentado no artigo Nova Geração de Web Design, que citava o "layout limpo" como sendo a principal tendência dos layouts modernos. Além disso, alguns seguem a crescente tendência "Mobile First" e design responsivo, que prevê um estudo da arquitetura do front-end para ser suportado por dispositivos móveis e por telas maiores. Você pode conhecer mais sobre o assunto no artigo Mobile First – A arte de pensar com foco.

Neste artigo, veremos 3 frameworks de front-end, mostrando as capacidades de cada um: Gumby Framework versão 2.0.0, Twitter Bootstrap versão 2.3.1 e Foundation versão 4.1.2.

---

Gumby Framework

O Gumby Framework é um framework de front-end simples e intuitivo, apesar do nome soar mal em português (gambi). Segue uma lista de recursos ou características:

• Estrutura:
  • HTML 5 e CSS 3.
  • jQuery para operações dinâmicas.
  • Modernizr para para reduzir diferenças entre navegadores e emular recursos do HTML 5 em navegadores antigos.
  • SASS para facilitar a criação/manutenção dos estilos.
• Utilidades:
  • Caixas de mensagem (default, primary, secondary, info, danger, warning, success).
  • Rótulos de estampa com diferentes estilos.
  • "Mini-adesivos" com diferentes estilos.
  • Barras de navegação estáticas ou dinâmicas (acompanham a rolagem da página).
  • Abas de diferentes formatos: padrão horizontal, padrão vertical e pilha.
  • Links âncoras personalizados.
  • Drawers para disparar ações de exibição/ocultamento de elementos.
  • Alinhamento vertical de textos e imagens.
  • Fixador de elementos em posições da tela.
  • Classes para estilizar listas (disc, circle, square).
  • Containers de imagens de diferentes formas (círculo, cantos arredondados, "estilo foto convencional" ou "estilo foto polaroid").
  • Suporte para exibição de imagens em Retina Display.
  • Container adaptativo para vídeos (youtube, vimeo e twitch.tv).
  • 260 ícones (criados via font-family "entypo").
• Grid:
  • Responsivo (se adapta ao tamanho do dispositivo).
  • Permite customizar a quantidade máxima de colunas.
  • Grid híbrido (algumas linhas podem ter um número diferente de colunas).
  • Suporta grids aninhados.
  • Suporta deslocamento de colunas.
  • Suporta centralização de colunas em uma linha.
• Formulários:
  • Rótulos acima ou ao lado dos campos.
  • Inputs de texto personalizados.
  • Campos com cores de alerta (default, primary, secondary, info, danger, warning, success).
  • Inputs com elementos acoplados antes ou após.
  • Selects personalizados.
  • Fieldsets personalizados.
  • Campos radiobox e checkbox personalizados.
  • Classes para tamanhos dos campos: xnarrow, narrow, normal, wide, xwide, xxwide.
• Botões:
  • Estilos: "Metro" (cor sólida) e "Pretty" (degradê).
  • Tipos: default, primary, secondary, info, danger, warning, success.
  • Tamahhos: small, medium, large e xlarge.
  • Formas: círcular, cantos arredondados, quadrado, circular na esquerda ou circular na direita.
  • Botões interruptores (toggle), com aparência elevado/afundado.
• Efeitos Dinâmicos:
  • Eventos "onChange" para abas.
  • Eventos "onCheck", "onUnckeck", "onChange" para radiobox e checkbox.
  • Eventos "onFixed" e "onUnfixed" para elementos afixados.
  • Evento "onComplete" para links âncora.
  • Evento "onTrigger" para bottões toggle.
  • Evento "onRetina" para imagens exibidas em Retina Display.
  • Validação de formulários com jQuery.
  • Eventos para capturar submit, falha em campos do formulário ou falha de campos obrigatórios.
• Características:
  • Tamanho do CSS: 16 KB (minimizado e comprimido com deflate).
  • Tamanho do JS: 44 KB (minimizado e comprimido com deflate).
  • Compatibilidade: o projeto Modernizr dá suporte aos navegadores: IE6+, Firefox 3.5+, Opera 9.6+, Safari 2+, Chrome.
  • Permite customização pelo site: http://gumbyframework.com/customize, especificando cores, fontes, número de colunas no grid, etc.
  • Boa documentação.

Algumas características que não gostei:

• A especificação de colunas num grid é feita com o nome do número de colunas em inglês (por exemplo "fourteen columns" ao invés de "columns14").
• Não encontrei suporte para: caixas de modal, caixas de tooltip, caixas popover, botões dropdown (exceto no menu de navegação), painéis de dados personalizados, barras de progresso, facilidades para customização de tabelas.

Resumo

Gumby é um bom framework de front-end, mas não espere encontrar de tudo nele. É ideal para quem quer uma estrutura básica para montar um layout responsivo, baseado em grids, e um pouco de padronização da interface. É compatível com navegadores antigos, o que pode ser um diferencial.

---

Twitter Bootstrap

O Twitter Bootstrap é um dos vários projetos desenvolvidos pelo Twitter. Segue a lista de recursos ou características:

• Estrutura:
  • HTML 5 e CSS 3.
  • jQuery para operações dinâmicas.
  • Normalize.css para reduzir diferenças entre navegadores.
  • Less para facilitar a criação/manutenção dos estilos.
• Utilidades:
  • Suporte para layouts com largura fixa (opcionalmente responsiva) e layouts fluidos.
  • Classes para tornar elementos visíveis ou invisíveis dependendo do tipo de dispositivo.
  • Tipografia personalizada, com algumas classes para facilitar operações básicas como alinhamento.
  • Classe para criar listas horizontais (inline).
  • Lista de definições personalizadas ou com disposição horizontal.
  • Tabelas com vários tipos de customização (borda, zebramento, tamanho de padding, destaque de linha no evento hover).
  • Containers de imagens de diferentes formas (círculo, cantos arredondados ou "estilo foto polaroid").
  • Lista de links de navegação em abas (acima ou ao lado), listas horizontais ou pilhas (listas verticais).
  • Barras de topo que suportam títulos, links, formulários, posicionamento estático e cores invertidas. Possui recurso para realinhar elementos de forma responsiva em telas menores.
  • Breadcrumbs (links migalhas de pão), que informam a localização do usuário no site.
  • Lista de links para paginação, com diferentes tamanhos.
  • Paginador com botões de avançar e voltar.
  • Classes de estilo para rótulos, caixas de mensagem e "mini-adesivos" (padrão, sucesso, aviso, importante, informação e cor invertida).
  • Tipografia "Hero Unit" para super destaque em blocos da página.
  • Barras de progresso personalizadas / Barras de progresso em pilha.
  • Blocos de conteúdo "afundados" (wells).
  • 140 ícones com imagens na cor preta e 140 ícones com imagens na cor branca (com figuras iguais) cedidos por Glyphicons e usados através de css sprite.
• Grid:
  • Permite customizar a quantidade máxima de grids.
  • Colunas de tamanho fixo.
  • Não responsivo por padrão, mas pode ficar responsivo com a inclusão de um CSS opcional (bootstrap-responsive.css).
  • Grids fluidos (tamanhos percentuais).
  • Permite que grids fluidos sejam aninhados.
  • Permite o deslocamento de colunas.
  • Grids para thumbnails de imagens, vídeos ou textos (media grids).
• Formulários:
  • Formulários de busca.
  • Formulários inline.
  • Rótulos acima ou ao lado dos campos.
  • Campos com elementos embutidos antes ou após.
  • Classes para tamanho dos campos: mini, small, medium, large, xlarge, xxlarge e input-block-level.
  • Campos com tamanhos de grids.
  • Grupos de Checkbox ou Radiobox inline.
  • Textos de ajuda para campos.
  • Classes para campos com erro, corretos, com aviso, com informação ou desabilitados.
• Botões:
  • Container para botões personalizado.
  • Tipos: default, primary, info, success, warning, danger, inverse, link e disabled.
  • Tamanhos: btn-mini, btn-small, padrão, btn-large e btn-block.
  • Permite que um link tenha aparência de botão.
  • Suporta botões agrupados na horizontal ou vertical (pilha).
  • Suporta lista de botões com disposição vertical.
  • Botões dropdown/dropup.
  • Botões segmented dropdown (ação padrão + dropdown).
  • Botões interruptores (toggle), com aspecto elevado/afundado.
• Efeitos Dinâmicos:
  • Modal.
  • Dropdown.
  • Scrollspy (lista estática na tela, que destaca um link, conforme a rolagem da página atinge uma nova área da página).
  • Abas.
  • Tooltip (caixa de ajuda com texto).
  • Popover (caixa de informação com formatação).
  • Alertas.
  • Comportamentos em botões (loading, toggle).
  • Accordion.
  • Carousel.
  • Autocompletar campo de texto.
  • Fixador de elementos na tela.
• Características:
  • Tamanho do CSS (sem responsive): 21 KB (minimizado e compactado com deflate).
  • Tamanho do JS: 40 KB (minimizado e compactado com deflate).
  • Compatibilidade: o projeto Normalize.css (atualmente na versão 2.1.1) dá suporte aos navegadores: IE 8+, Firefox 4+, Safari 5+, Opera, Chrome.
  • Permite customização pelo link http://twitter.github.io/bootstrap/customize.html
  • Documentação razoável.

Algumas coisas que não gostei:

• Não permite centralização nativa de colunas em um grid.

Resumo

Twitter Bootstrap é um toolkit de front-end bastante completo, embora deixe um pouco a desejar com navegadores mais antigos, como o IE6 e 7 (e até a versão 8, em alguns recursos). Mas dependendo do público alvo, estes navegadores já podem até ser desconsiderados. Embora o projeto não dê suporte a estes navegadores, o site continua visível, mas com várias limitações. É ideal para quem procura um toolkit com muitos recursos.

---

Foundation 4

O Foundation 4 é um projeto mantido pela empresa Zurb, que é especializada em front-end. Veja a lista de características do Foundation:

• Estrutura:
  • HTML 5 e CSS 3.
  • Zepto e jQuery para operações dinâmicas.
  • Modernizr para para reduzir diferenças entre navegadores e emular recursos do HTML 5 em navegadores antigos.
  • SASS para facilitar a criação/manutenção dos estilos.
• Utilidades:
  • Classes para tornar elementos visíveis ou invisíveis dependendo do tipo de dispositivo.
  • Paginação com estilo personalizado.
  • Lista de navegação com estilo personalizado.
  • Barra de topo personalizada.
  • Breadcrumbs (links migalhas de pão), que informam a localização do usuário no site.
  • Classes para títulos personalizados.
  • Classes para listas personalizadas (discos, círculos ou quadrados), e listas inline.
  • Citações personalizadas (elementos blockquote).
  • V-Card personalizados.
  • Classes para exibir ou omitir elemenos para impressão (print).
  • Rótulos personalizados (default, secondary, alert, success).
  • Keystrokes personalizados (elementos kdb).
  • Caixas de mensagem (default, secondary, success e alert).
  • Painéis (default e callout).
  • Tabelas de preços personalizadas.
  • Barras de progresso personalizadas (formas e cores).
  • Tabelas personalizadas.
  • Thumbnails com estilo polaroid.
  • Container para videos com largura elástica.
  • Layout Off-canvas, para dispositivos móveis.
  • 42 ícones padrão (criados via font-family), 42 ícones com borda, 29 ícones de redes sociais, 26 ícones de acessibilidade.
• Grid:
  • Responsivo (se adapta ao tamanho do dispositivo).
  • Permite customizar a quantidade máxima de colunas.
  • Permite especificar tamanhos diferentes de colunas para um mesmo elemento, de acordo com o tamanho da tela (pequena ou grande), propiciando o "Mobile First".
  • Suporta grids aninhados.
  • Suporta deslocamento de colunas.
  • Suporta centralização de colunas em uma linha.
  • Suporta reposicionamento de grids.
  • Suporta block grids, para quebrar uma lista com grids de tamanhos iguais e responsivos.
• Formulários:
  • Rótulos acima ou ao lado dos campos.
  • Inputs com tamanhos de grids.
  • Suporte para acoplar elementos antes ou após inputs e selects.
  • Caixas de erro acopladas ao campo com erro.
  • Campos Radiobox, Checkbox e Select personalizados.
  • Campos interruptores personalizados.
• Botões:
  • Formas: quadrado, cantos arrendondados ou redondos.
  • Tamanhos: muito pequeno, pequeno, medio, grande.
  • Tipos: default, secondary, alert, success e disabled (permite criar outros).
  • Suporta botões agrupados.
  • Suporta botões dropdown.
  • Suporta botões split (ação padrão + dropdown).
• Efeitos Dinâmicos:
  • Visualizador de lista de imagens.
  • Dropdown.
  • Joyride (instruções passo a passo com tooltips dinâmicos explicando as ferramentas pela aplicação).
  • Magellan (lista estática na tela, que destaca um link, conforme a rolagem da página atinge uma nova área da página).
  • Orbit (exibe notícias com imagens/pequenas descrições, alternando-as com um intervalo de tempo).
  • Modal (caixa de conteúdo mostrada como uma janela).
  • Tooltip (pequenas caixas de ajuda), baseado no atributo "title" do elemento.
  • Abas, accordion, barras de navegação.
• Características:
  • Tamanho do CSS: 17 KB (minimizado e compactado com deflate).
  • Tamanho do JS: 38 KB (minimizado e compactado com deflate).
  • Compatibilidade: com os principais navegadores modernos (lista de compatibilidade do Foundation).
  • Ótima documentação.

Algumas coisas que não gostei:

• Não oferece muitos tipos de botão, por padrão, sendo necessário criá-los sob demanda.

Resumo

O Foundation é um projeto bastante completo e extensível. Um de seus principais recursos é a possibilidade de especificar, num mesmo elemento, comportamentos para telas pequenas e comportamentos para telas maiores, propiciando o desenvolvimento "Mobile First". Ele também possui limitações com IE anterior ao 9, especialmente quanto ao grid.