Componentes Elásticos – Desenvolvimento web pré-responsivo

O desenvolvimento de componentes elásticos​ é uma técnica web design que tem como objetivo aproveitar totalmente a lib de grid utilizada no...

Dextra

View posts by Dextra
Somos especialistas em desenvolvimento de software sob medida para negócios digitais. Pioneiros na adoção de metodologias de gestão ágil, combinamos processos de design, UX, novas tecnologias e visão de negócio, desenvolvendo soluções que criam oportunidades para nossos clientes. A Dextra faz parte da Mutant, empresa B2B líder no mercado brasileiro e especialista em Customer Experience para plataformas digitais.
Data de publicação: 19/10/2016
Componentes Elásticos

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

Dextra

View posts by Dextra
Somos especialistas em desenvolvimento de software sob medida para negócios digitais. Pioneiros na adoção de metodologias de gestão ágil, combinamos processos de design, UX, novas tecnologias e visão de negócio, desenvolvendo soluções que criam oportunidades para nossos clientes. A Dextra faz parte da Mutant, empresa B2B líder no mercado brasileiro e especialista em Customer Experience para plataformas digitais.

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

5 × 4 =

Posts relacionados

  1. Sobre a Dextra

    Somos especialistas em desenvolvimento de software sob medida para negócios digitais. Pioneiros na adoção de metodologias de gestão ágil, combinamos processos de design, UX, novas tecnologias e visão de negócio, desenvolvendo soluções que criam oportunidades para nossos clientes.

  2. Categorias

Scroll to top