Materialize: O que é e para que serve este framework?

Você conhece o Materialize?

Um dos frameworks mais famosos entre os desenvolvedores Front-End, e também um dos mais solicitados, atualmente, como pré-requisito para quase todas as vagas de emprego nesta área é o Bootstrap.

Trata-se de uma opção interessante ao Bootstrap: um framework muito usado e bastante útil para agilizar o desenvolvimento de sites e sistemas web e mobile. Mas, e o Materialize, você conhece?

Saiba agora o que é Materialize, para que serve e como começar a utilizar este, que é um dos grandes aliados dos programadores.

O que é Materialize?

“Materialize é um framework Front-End que resolve os mesmos problemas, mas, claro, com suas próprias características. Ele surgiu através de um projeto desenvolvido pela Google e é inspirado no Material Design (design utilizado no sistema operacional para smartphones Android desde a versão 5.0).”

Depois, este design acabou virando padrão para todos os serviços Google. Quem usa estes serviços, logo vai notar…

Materialize 01http://materializecss.com/about.html

Diferenciais do Materialize

Com seus componentes bem semelhantes aos de seu amigo Bootstrap, ele apresenta opções com design mais leve. Isto faz com que seu projeto fique visualmente mais agradável.

Além disto, com ele, você deixa seu projeto responsivo. E a importância de se ter um design responsivo em pleno ano de 2017 não precisa nem ser discutida, não é mesmo?

Materialize 02http://materializecss.com/cards.html

Clique aqui e saiba tudo sobre Bootstrap.

A sua documentação é vasta e de fácil entendimento, com uma curva de aprendizagem bem pequena. Como podemos ver na imagem abaixo, há no site oficial do Materialize vários exemplos de como aplicar o Materialize.

Lá, você também aprende como aplicar cada um dos componentes em seu projeto, facilitando bastante a sua vida como programador.

Materialize 03http://materializecss.com/grid.html

Como Começar a Utilizar o Materialize?

Para quem ainda não sabe como instalar e começar a usar o Materialize, basta:

  • Baixar os arquivos de configurações do framework;
  • Adicioná-los em sem projeto;
  • Fazer a chamada no head de seu projeto.

A partir daí, é só usar a criatividade e abusar dos recursos oferecidos. Claro, para facilitar, você pode usar também os exemplos listados no site como inspiração!

Para os iniciantes, é interessante também entender bem o funcionamento das grids, para que você consiga montar um site responsivo bem estruturado para os diversos tamanhos de telas que temos hoje.

Materialize 04http://materializecss.com/getting-started.html

Por que Utilizar o Materialize?

Neste momento, você deve estar se perguntando: “Ah, mas eu já uso o Bootstrap. Estou bem tranquilo aqui aplicando-o em meus projetos. Por que eu iria começar agora a utilizar este framework?”.

Uma boa resposta para isto pode ser uma outra pergunta: Por que não usá-lo? Por que não aproveitar a oportunidade de aprender uma nova ferramenta?

Este artigo não tem o objetivo de comparar a eficiência dos dois frameworks, até porque ambos cumprem muito bem o que prometem. O nosso objetivo aqui é te apresentar uma bela alternativa ao Bootstrap, para que você tenha outra opção à sua disposição. E é você quem decide se vai dar uma chance ao Materialize ou não! 😉

Mas, que tal experimentar o Materialize e, quem sabe, até utilizá-lo em seu próximo projeto?



Juliano Moura

Juliano Moura

Desenvolvedor Front End, graduado em Sistemas de Informação. Gosto de games, filmes, séries e jogar poker online ou com amigos. Sou um cara tranquilo, prestativo e estou sempre disposto a aprender coisas novas.Nada como um bom Rock acompanhado de uma cerveja bem gelada e churras.

Comentários

O Que é Bootstrap e Para Que Serve?

Se você é um desenvolvedor de páginas web, sabe o quão árduo era começar um site do zero toda vez que se pegava um novo projeto para fazer. Era (no passado)! Isto, porque está disponível, desde 2011, o Bootstrap. Trata-se de um framework front-end que veio para facilitar e agilizar o trabalho, oferecendo padrões para HTML, JavaScript e CSS.

Como surgiu o Bootstrap?

Ele foi desenvolvido por Jacob Thorton e Mark Otto, engenheiros do Twitter, como uma tentativa de resolver incompatibilidades dentro da própria equipe. O intuito era otimizar o desenvolvimento de sua plataforma através da adoção de uma estrutura única. Isto reduziria inconsistências entre as diversas formas de se codificar, que variam de profissional para profissional. E a tentativa deu tão certo que eles perceberam o grande potencial da ferramenta, lançando-a no GitHub como um software livre.

O slogan “Projetado para qualquer um em qualquer lugar” não veio do nada: com interface bastante amigável, o Bootstrap oferece uma enorme variedade de plugins e temas compatíveis com o framework. Além disto, possui integração com qualquer linguagem de programação. E o melhor de tudo, é free! Isto, graças ao seu código aberto, que em pouco tempo após o seu lançamento já recebeu a contribuição de inúmeros desenvolvedores de todo o planeta, tornando-o o software livre mais ativo do mundo.

Em seu site oficial, vemos a seguinte frase: “Bootstrap torna o desenvolvimento front-end mais rápido e fácil. Ele é feito para pessoas de todos os níveis de habilidade, dispositivos de todos os formatos e projetos de qualquer tamanho”. Temos aí um “resumão” dos benefícios agregados que ele oferece aos desenvolvedores.

Em que ele pode ser aplicado?

Na prática, a principal aplicação do Bootstrap seria na criação de sites responsivos (mobile). Com o Bootstrap, o profissional já não tem mais que perder tanto tempo digitando toda uma linha de CSS novamente. Esta facilidade se deve ao fato de que ele possui vários plugins em JavaScript (jQuery) que tornam o seu dia-a-dia muito mais fácil. Com inúmeras bibliotecas prontas disponíveis, o trabalho que o desenvolvedor tem é de, praticamente, só as incluir em seus projetos.

A ferramenta ajuda o profissional a implementar recursos como o menu dropdown, carousel, modal, slideshow, etc., que são aplicados com muito mais facilidade. De acordo com o site oficial, o Bootstrap “usa CSS tradicional, mas seu código fonte utiliza os dois pré-processadores CSS mais populares, Less e Sass”.

Como usar o Bootstrap?

É bem simples: faça o download do Bootstrap no site oficial da ferramenta. Adicione os arquivos “bootstrap.min.css” e “bootstrap.min.js” nas pastas correspondentes a eles dentro do seu site. Depois, é só chamar o CSS e o JS dentro da tag <head> do HTML. É importante lembrar que o Bootstrap acessa a biblioteca jQuery para ativar o comportamento de seus plugins. Portanto, lembre-se de inseri-lo em sua página para que tudo funcione perfeitamente.

Para facilitar o seu entendimento sobre o Bootstrap, há no site uma área onde você consegue ver exemplos dos recursos disponíveis para você customizar o seu site. Para isto, basta acessar a Coleção de Exemplos. Lá, você encontra modelos de temas, layouts de tabelas, barras de navegação, etc.

Além disto, existe também uma sessão onde você pode ver alguns belos, criativos e funcionais projetos já realizados com o Bootstrap. Entre em Explorar Expo e inspire-se. Agora é só mergulhar nas infinitas opções que o Bootstrap oferece e deixar sua criatividade fluir, criando projetos com muito mais praticidade e em muito menos tempo.

Gostou do texto sobre Bootstrap?

Então, confira outros artigos relacionados:



Lu Barbiere

Lu Barbiere

Publicitária por formação e redatora por vocação/coração, atua profissionalmente com textos há 7 anos. Hoje, seu trabalho é voltado para marketing de conteúdo e SEO, e busca, continuamente, atualizar-se sobre este mercado. Ama música, estudos, esportes (principalmente os radicais!), pets (principalmente os cats!), cachoeiras e filosofias de vida alternativas. Como uma boa descendente "di italiano" que é, costuma abrir mão de quase tudo em troca de um bom prato de macarrão.

Comentários