Framework W3.CSS!

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 <head></head> de seu HTML, como qualquer outro arquivo de estilo, usando a tag <link>, 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!

Segue abaixo um exemplo que desenvolvi ontem, conforme ia estudando alguns dos componentes disponíveis:

Exemplo FinanceApp

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!

Anúncios

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s