Grids

Olá, feliz ano novo! Piada velha, mas sempre uso depois do Carnaval.

Passei os últimos meses envolvido com alguns freelances q sempre pintam nesta época (fim de ano/começo de ano) e garantem um plus no orçamento. Descansei um pouco durante o carnaval e voltei a estudar algumas coisas de forma solitária e autodidata, mas não reclamo.

Dias atrás “conheci” uma mulher chamada Jen Simmons, embora já tenha visto alguma coisa sobre seu trabalho há algum tempo atrás, em algum feed q assino. Todavia resolvi voltar a ela graças a um “estalo” na minha cabeça: lembrei de algumas experiências desenvolvidas por ela em relação ao layout das páginas web. Nos vários vídeos q encontrei, Jen apresenta um panorama sobre a evolução do layout na web e me esforcei para acompanhar seu raciocínio e as legendas automáticas geradas pelo YT em inglês. Como os vídeos são muito parecidos, isso facilitou minha compreensão, mas confesso q muita coisa passou batido. Ela vai evoluindo até chegar na “cereja do bolo”: o uso de grids como ferramenta para “leiautar” páginas web. Achei o assunto muito interessante, embora haja ainda um problema quanto ao perfil dos browsers em reconhecer essa propriedade nas folhas de estilo, as famosas CSS. Tudo ainda meio experimental e exige algumas configurações nos browsers existentes ou o uso de navegadores voltados ao estudo, como o Firefox Nightly.

Para estudar, resolvi pegar algumas coisas antigas minhas e reescrever o código. Gostei dos resultados, pois se aproximam do que eu gostaria qdo concebi os experimentos inicialmente, mas, como citado acima, para ver de fato como as coisas ficam, vc precisa habilitar seu navegador para reconhecer os tais grids. Como fazer? A própria Jen fornece o “caminho das pedras” no item Get a browser with CSS grid.

Meu primeiro estudo foi com A cor da palavra, onde faço a conversão de algumas palavras para o código hexadecimal e gero um background a partir da correspondência encontrada. A página ficou mais flexível, adaptando-se ao formato da tela, ou seja, responsiva. Confira!

Anúncios
Grids

3 comentários sobre “Grids

  1. Adorei seu estudo! Li apenas o seu post e vi o trabalho antes e depois de ativar o experimental web platform… pena que tendo a necessidade de ativar os grids, isso não se torna usável.

  2. marlontenorio disse:

    Pois eh, meu caro. However, ouvi dizer q as próximas atualizações dos navegadores virão com essa opção habilitada. Enquanto isso vou me divertindo neste laboratório ditigal! Abs

  3. marlontenorio disse:

    E muito obrigado por se dar ao trabalho de habilitar a paradinha no Firefox ou Chrome só pra ver o resultado da experiência. Uma honra!

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