Como Kickstart seu HTML
Um dos principais objetivos de todos os desenvolvedores é o desenvolvimento mais rápido, especialmente o bootstrap rápido. Existem dezenas de frameworks disponíveis nos últimos dois anos que visam ter nossos protótipos em minutos.
Infelizmente, muitos desses frameworks datam rapidamente, à medida que os requisitos do projeto evoluem e precisam ser atualizados ou substituídos.
Se você está procurando uma estrutura recente que resolva os problemas que as soluções mais antigas estão encontrando agora, enquanto ainda maximiza seu fluxo de trabalho, você não pode ir muito errado com HTML Kickstart.
The Grid
A grade é um dos aspectos mais importantes de qualquer estrutura, especialmente quando uma grade flexível determina quão responsivo um site pode ser.
O HTML Kickstart nos oferece a opção de uma grade flexível ou uma grade padrão (não flexível) - embora não esteja claro quando você usaria a última, dada a crescente predominância de dispositivos móveis.
Para criar uma grade flexível com duas colunas de tamanho igual, usaríamos:
Content HereContent HereComo você pode ver, tudo o que fizemos foi adicionar algumas classes simples a três divs. Se você preferir a grade não flexível, tudo o que você precisa fazer é remover o nome da classe flexível da div externa.
(Observe que a grade flexível aumentará para a largura da tela inteira, enquanto a grade não flexível terá uma largura máxima de 1024 px.)
Além das classes baseadas acima, há um número de classes auxiliares que podemos usar, por exemplo:
- show-desktop e hide-desktop com essas classes, você pode decidir se deseja que a grade seja visível em um computador desktop.
- show-tablet e hide-tablet o mesmo conceito se aplica aqui, mas para tablets.
- show-phone e hide-phone mais uma vez, essas classes ditam visibilidade, desta vez para telefones inteligentes.
Se quiséssemos ocultar nossa grade de duas colunas em smartphones, por exemplo, usaríamos código como este:
Navegação
O HTML Kickstart nos oferece três opções de menu: vertical esquerda, vertical direita e horizontal.
A versão que você mais deseja, é o menu horizontal. Para codificá-lo, precisamos apenas de listas não ordenadas:
Se você quiser um menu vertical à esquerda, basta adicionar vertical à ul de abertura e, se quiser um menu vertical à direita, adicione vertical à direita , assim:
É realmente simples codificar menus responsivos com o Kickstart em HTML.
Estilos padrão
O HTML Kickstart oferece excelentes estilos básicos desde o início. Obviamente, você vai querer refiná-los para o seu projeto, mas para prototipagem rápida, eles são mais que suficientes.
Quando se trata de tipografia, o HTML KickStart usa Steve Matteson 'S Arimo fonte por padrão. Você pode ver toda a gama de configurações de tipo Aqui.
Estilos de botão são sempre o centro de muita atenção em qualquer estrutura, e o HTML Kickstart vem com botões em todas as formas e tamanhos. Você nem precisa usar classes para isso, basta criar uma tag de botão e os estilos serão automaticamente aplicados.
Se você preferir que os estilos de botão sejam aplicados a uma marca de âncora, basta adicionar a classe de botão a ela:
Existem também vários estilos diferentes que podemos aplicar:
Finalmente, também temos a opção de criar uma barra de botões, com uma sintaxe semelhante ao menu horizontal:
Imagens
O HTML Kickstart ajuda a melhorar o UX gerando pop-ups para galerias e imagens para você. É uma solução muito melhor do que abrir uma nova janela.
Para criar uma galeria pop-up baseada em JavaScript totalmente funcional, tudo o que precisamos é o seguinte código:
É simples de implementar e você não precisa de uma única linha de JavaScript.
As imagens também têm algumas ótimas classes auxiliares, como legenda. Esta classe aplicada a uma imagem mostra o título da imagem como legenda estilizada:
Também temos classes alinhadas à direita e alinhadas à esquerda que podemos usar para exibir imagens à esquerda e à direita. (O Kickstart em HTML adicionará uma pequena margem para que as imagens não sejam exibidas no texto.)
E, claro, o HTML Kickstart também nos oferece slideshows simples. Usa BXSlider controle deslizante para lidar com isso.
O código para um simples controle deslizante será algo parecido com isto:
A Content Slider
This slider handles HTML content as well as images.
O controle deslizante é ativado por toque para dispositivos móveis e, mais uma vez, você não precisa de uma única linha de JavaScript.
Formulários
A última coisa que quero apresentar é formulários. Formulários são vitais para qualquer framework, porque eles são uma das coisas mais difíceis de serem estilizadas em uma página web.
O HTML Kickstart mantém sua simplicidade quando se trata de formulários, e uma forma vertical pode ser criada simplesmente como:
Como você pode ver, eu dificilmente tive que usar classes para este formulário. Tudo o que fiz foi adicionar a classe vertical na parte superior para que os elementos do formulário não sejam tratados como inline.
Uma das minhas partes favoritas do Kickstart HTML são os avisos de erro simples usados com formulários:
Conclusão
Existem muitas opções que vêm com o HTML Kickstart, nós realmente apenas arranhamos a superfície; há um enorme conjunto de ícones, dicas de ferramentas e até mesmo guias.
A força real do HTML Kickstart é a simplicidade do seu código. A falta de divs e classes estranhas faz dela uma ótima economia de tempo, menos código significa menos erros. Se você quer começar a codificar seu próprio HTML a partir do zero, ou se você está procurando por um framework simples para prototipar rapidamente um design HTML, o Kickstart é uma ótima opção.
Você já usou o HTML Kickstart? Você prefere um quadro diferente? Deixe-nos saber nos comentários.