Material Design com JQuery Mobile | Morettic

Material Design com JQuery Mobile

porLuis Augusto Moretto

Material Design com JQuery Mobile

O jQuery Mobile

O framework jQuery Mobile foi projetado no conceito “do more, write less!” ou seja escreva menos, faça mais. Com ele é possível que você crie um único site ou aplicativo altamente responsivo.É compatível em todas as smartphones populares, tablets e plataformas de desktop. Além disso o framework tem diversos templates disponíveis de forma gratuita ou paga conforme sua necessidade.

ThemeRoller

O ThemeRoller é uma ferramenta que roda no Browser. Permite a edição e customização do CSS. Com a ferramenta é possível em um curto espaço de tempo obter um estilo de alta qualidade conforme as caracterísiticas visuais do seu projeto.

Assim você edita o cabeçalho rodapé, corpo da página, botões, links e todas as propriedades do framework. Após customizar o tema você faz o download do CSS gerado pela ferramenta e coloca na estrutura de diretórios do seu projeto.

Outra característica do JQuery Mobile é que ele incorpora o padrão “Material”.  Na prática isso significa uma experiência unificada em diferentes plataformas e tamanhos de dispositivos.

themeroller jquery mobile

Screenshot ThemeRoller

Template com Material Design

Para testar o framework, foi implementado um template para verificar o comportamento em um dispositivo Mobile x Desktop. O resultado foi impressionante: O comportamento das ações e o layout se adaptaram perfeitamente tanto no Navegador quando no celular. Uma dica para quem quer desenvolver para dispositivos móveis é utilizar o framework com o Phonegap ou Ionic confome suas Skills.

Foi testado também em outros navegadores como o Internet Explorer , Chrome e Firefox. Em todos eles manteve as mesmas características sendo assim altamente robusto como um componente front end para o desenvolvimento.

Além disso para implementar transições e efeitos na navegação dispensa Javascript ou CSS. Possui uma extensa biblioteca de icones Widgets e estilos para o desenvolvimento. Abaixo um exemplo do comportamento do Jquery Mobile em um dispositivo Mobile.

10b79035-0852-4cc3-ac38-ab75ccd1d73b

 

Download do Template Material

Se você curtiu o framework pode começar baixando o exemplo aqui.