Tecnologia

Componentes Elásticos – Desenvolvimento web pré-responsivo

Por: , outubro 19, 2016

O desenvolvimento de componentes elásticos​ é uma técnica web design que tem como objetivo aproveitar totalmente a lib de grid utilizada no projeto web. Assim sendo, todo o tamanho dos componentes desenvolvidos, sejam eles commons components (componentes que não possuem regras de negócio) ou specific components (componentes que são específicos a telas e possuem regras de negócio), é definido pela quebra da grid.
Essa técnica precisa de um desenvolvimento em grid completo, ou seja, completamente guiado por linhas e colunas da grid. Isso faz com que o .html fique muito carregado e pesado. Com o intuito de controlar esse problema utilizamos muitos pseudo-elementos (::before e ::after), que são elementos definidos no .css para que o .html fique reduzido.
Componentes elásticos​ se aplica fazendo com que cada componente ocupe 100% de largura a ele liberado pela sua div pai (a coluna da grid).

Botão Elástico - Desktop

 
A sugestão do framework de grid para se utilizar em projetos é o unsemantic, indicada por vários web designers. Suas principais vantagens em relação a outros frameworks como bootstrap e foundation, são o seu tamanho (45kb contra 146kb e 66kb respectivamente) e o seu dinamismo, já que ele possuí um sistema de grids com escala 20(número de colunas em cada linha), contra a escala 12 dos outros dois.
Além disso, ele tem uma peculiaridade interessante que auxilia ainda mais no desenvolvimento já adaptado a responsividade. Ele pré-determina a quebra da grid mobile em 100%, fazendo com que utilizando o unsemantic como técnica de componentes elásticos​, o sistema fique pré-responsivo.

Botão Elástico - Responsivo

  • Receba nosso conteúdo em primeira mão.