É hora de colocar a mão na massa e criar sites com layouts responsivos, e o Skeleton vai te ajudar com isso
Bom dia pessoal, sexta feira, como ja é tradicional aqui blog: é dia de falar de usabilidade e interface, e layouts responsivos, mas antes, se você ainda não leu o post da semana passada, quando falei sobre o efeito Parallax, não perca tempo e leia agora clicando aqui.
Mas vamos aos assunto do dia que hoje é o uso do Skeleton framework na criação de layouts responsivos, aliás esse é um assunto que abordei aqui a 3 semanas atrás e prometi uma análise dos frameworks e hoje vamos a primeira delas
Como utilizar o Skeleton framework?
O framework é composto de uma série de arquvios CSS e o primeiro passa é fazer o download do pacote no link, um detalhe interessante é que você pode fazer o download dos arquivos também em PSD, o que facilita a construção e projeto dos layouts do site seguindo as regras.
Após o download extraia os arquivos na pasta de seu projeto, a estrutura criada vai ser igual a esta abaixo:
Dentro dos arquivos você encontrará o Index.html que é o resposável pela exibição de uma página modelo, que exemplica o conceito por trás do framework.
Analisando o arquivo temos no cabeçalho as chamadas aos arquivos de estilo do framework que são 3 base.css, skeleton.css e layout.css, uma chamada providencial ao html5.js que melhora a relação do IE com as tags do HTML5 e uma definição de 4 “Favicons” onde já temos o primeiro conceito responsivo, pois são definidos ícones também para iPhones e iPads.
Quando chegamos ao body do arquivo chegamos a uma estrutura bem simples e funcional, composta de uma div com função de container seguida de uma div utilizada para cabecalho e outras 3 que exemplificam o conceito de design responsivo, pois basta você reduzir a largura da tela para que o conteúdo se adapte perfeitamente ao tamanho da tela, tudo de forma “automágica”.
Veja os exemplos:
Simples assim, para usar o projeto basta agora escrever os seus htmls seguindo esses conceitos básicos do framework e adequar o mesmo as suas necessidades.
O Skeleton também está disponível no Github em https://github.com/dhgamache/Skeleton
E você ainda pode ver abaixo alguns exemplos de projetos implementados com base no framework
No site do framework (http://www.getskeleton.com/) você encontra ainda plugins para wordpress, além da lista completa de recursos do framework, com exemplos de estilo, elementos para formulários e exemplos de utilização do grid, o que vai acelerar e muito sua implementação.
O Skeleton é compatível com os navegadores:
- Chrome (Mac/PC)
- Firefox 4.0, 3.6, 3.5, 3.0 (Mac/PC)
- Safari
- IE9, IE8, IE7
- iPhone (Retina)
- Droid (Charge/Original)
- iPad
É isso pessoal, agora você já pode criar seu site utilizadndo layouts responsivos, até a semana que vem com mais dicas de Usabilidade e interface, até a próxima.
Bom fim de semana 🙂