Skip to content

IntSoft Consultoria

Grandes idéias em grandes aplicações

Principal Principal
  • Início
  • Fazenda
    • SEMEF Manaus
    • SEFAZ Amazonas
    • Suframa
    • Receita Federal
  • Gestão
    • Projetos
    • Processos
    • Certificação
  • Informática
    • Processos e Práticas
    • Arquitetura e Design
    • Desenvolvimento
    • Operações e Infraestrutura
    • Tendencia e Curiosidades
  • 4Geeks
    • Ciência
    • Tecnologia
    • Internet
    • Insólitos
  • Portal
Expand Search Form
dom ago
16th
2015
0
IntSoft Consultoria

Google traz o Material Design com CSS, HTML e JavaScript

googleplus001O Material Design Lite (MDL) do Google permite adicionar o look and feel do Material Designem websites. O Material Design é a linguagem visual padrão para Android e que, agora, o Google propõe como multiplataforma.

De acordo com o Google, o MDL têm os requisitos para que seja caracterizado como “lite”:

  • Tem poucas dependências de forma que é fácil de instalar e usar;
  • Não depende de frameworks, permitindo que os desenvolvedores façam sua integração com qualquer cadeia disponível de ferramentas para front-end;
  • Sua base de código é relativamente pequena;
  • Têm foco restrito, implementando as boas práticas do material design e não é um framework abrangente.

O MDL não é a primeira implementação de HTML/CSS/JS do material design e existem alternativas como o Materialize e Material Bootstrap. A principal vantagem que o MDL trás em relação a estas opções desenvolvidas pela comunidade, de acordo com o Google, é que o MDL foi desenvolvido “com a colaboração das equipes de Material Design e Chrome UX e é constantemente revisado buscando aderência às especificações do material design”.

Antes do MDL, o Polymer era a implementação canônica de material design para CSS/JS. Porém, comparado ao MDL, o Polymer tem escopo maior e vai além do domínio visual, incluindo componentes para comunicação de dados e componentes não especificados pelo material design.

Até o presente momento, o MDL não é otimizado nem suporta o uso de componentes individuais, por exemplo, um botão. Ainda sim, para desenvolvedores que querem usar apenas uma parte dos componentes MDL, é possível criar uma distribuição MDL customizada comentando componentes indesejados do material-design-lite.css e scripts inadequados do Gulpfile. Feito isso, basta executar gulp.

O MDL segue a convenção BEM de forma que os nomes para cada classe css são consistentes, isolados e expressivos. O Google detalha quais boas práticas eles seguiram ao aplicar BEM no desenvolvimento do MDL. Por outro lado, o BEM pode levar a explosão no comprimento dos nomes de classes e, de acordo com o feedback inicial, o MDL parece ser sensível a esse problema, por exemplo, ao necessitar de dezessete nomes de classe diferente para um simples card que é um conceito básico do material design.

O Google afirma que o MDL funciona em todos os navegadores modernos (Chrome, Firefox, Opera, Microsoft Edge e Safari) com degradação suave em navegadores como o IE9. Também sugerem referenciar a CDN para incluir o MDL no website, mas também é possível baixar ou importá-lo via npm ou Bower.

Fonte: Portal InfoQ

Categorias Desenvolvimento, Informática, Tendencia e Curiosidades Tags Bootstrap, CSS3, Design Web, Frameworks, Google, HTML5, Internet, Javascript, Material Design Lite (MDL), Materialize, Responsivo, Web
Previous: “Internet espacial”: a forma de levar a web a 5 mil milhões de pessoas
Next: Inicia a semana do XIV Simpósio Brasileiro de Qualidade de Software
©

IntSoft Consultoria
2023