responsive_design_screens

Com a crescente popularização do desenvolvimento Mobile, muitas empresas tem desenvolvido tecnologias, linguagens e _ frameworks _ para agilizar a criação de aplicativos e facilitar o uso destes em múltiplas plataformas (Android, iOS e Windows Phone), além do próprio acesso pelo navegador.

Dentro deste mundo de possibilidades, gostaria de abordar um framework front-end bastante recente (junho/2015) lançado pela w3Schools, importante site de ensino e referência sobre linguagens de desenvolvimento Web que, apesar do nome, não tem relação com o W3C.

Semelhante ao Bootstrap em seus objetivos, que é facilitar a criação de layouts e o desenvolvimento front-end, ele é todo baseado na customização de elementos HTML por meio de classes CSS que, na minha opinião, são muito mais intuitivas e simples de utilizar que as do Bootstrap (let the “treta” begins!). As classes que eles disponibilizam seguem o estilo do _ Material Design _ do Google e já possuem responsividade nativa! Ou seja, rapidamente você pode criar um layout bonito e responsivo.

Além disso, todas elas iniciam com “w3”, o que te permite diferenciar rapidamente das suas classes personalizadas e são MUITO legíveis e fáceis de lembrar. Mas vamos a alguns exemplos práticos! :)

Primeiramente, para usar estas classes CSS em seu site, basta referenciar a biblioteca disponível neste link da seguinte forma, entre os elementos de seu HTML, como qualquer outro arquivo de estilo, usando a tag , referenciado o endereço http://www.w3schools.com/lib/w3.css.

Se você não entendeu essa parte, recomendo fortemente que inicie sua leitura por aqui e aqui, antes de continuar a explorar o W3.CSS!

Para estilizar um checkbox, que classe você usaria? w3-check. Para cores de fundo? w3-red. Para cores de texto? w3-text-blue. Para bordas arredondadas (de qualquer elemento possível)? w3-round. Simples assim!

E você o que achou do W3.CSS? Possui experiência com Bootstrap? Compartilhe nos comentários o que achou deste novo framework, se já utilizou e como o avalia em relação ao Bootstrap!

Ate o próximo post!