Um Plugin JQuery para Uso Ideal do Espaço da Tela
A otimização de como o espaço é usado em uma tela é um componente essencial do bom design da Web e, especialmente, do design responsivo.
Há várias maneiras de abordar esse tipo de desafio, e uma das mais populares é a organização automática de elementos em um contêiner pai. É eficiente e, quando bem executado, cria um layout que é visualmente atraente e funcionalmente ideal.
Se você está projetando um site responsivo, certamente encontrará a necessidade de reorganizar o conteúdo de maneira dinâmica, com base no tamanho da tela do dispositivo do usuário. O conteúdo da organização automática faz sentido, pois minimiza o tempo gasto na personalização de pontos de interrupção para cada página e cada elemento.
Sites com conteúdo em constante mudança (como blogs ou lojas on-line) podem se beneficiar especialmente da organização automática. Afinal, você realmente quer ter que entrar no código do site do seu cliente e ajustar os pontos de interrupção e o layout se de repente eles decidirem começar a escrever postagens mais longas ou mais curtas no blog?
Fazer tudo isso do zero requer muito tempo e está além das habilidades da maioria dos projetistas que também não são desenvolvedores. Em vez disso, faz sentido usar um plug-in ou framework pré-existente.
JavaScript (incluindo jQuery e outras bibliotecas) é a maneira mais comum de criar esse tipo de layout, provavelmente devido à sua ampla compatibilidade cruzada. É assim que os esforços existentes, como vGrid, Wookmark e Maçonaria, funcionam.
Freetile.js é um plugin recente do jQuery que permite este tipo de layout dinâmico, organizado e responsivo. Ele é usado como o mecanismo por trás do Assemblage e do Assemblage Plus há quase dois anos e agora está finalmente disponível como um projeto independente de código aberto.
É diferente dos esforços existentes neste espaço por alguns motivos. Ele permite que qualquer elemento de tamanho seja usado sem a necessidade de uma grade de coluna de tamanho fixo. Isso libera você de especificar uma largura de coluna apropriada para seus elementos. E você pode personalizar o algoritmo que avalia possíveis posições de inserção para cada elemento, permitindo que você expresse preferências como alinhamento e proximidade.
Ele possui uma rotina de animação inteligente que facilita a distinção entre quais elementos devem ser animados e quais não devem. Especificar a animação dentro do código também é fácil.
O uso do Freetile.js é simples de usar. Mesmo se você não é proficiente em JavaScript, você deve ser capaz de descobrir o seu uso muito rapidamente.
O Freetile.js é licenciado sob a licença BSD e está disponível através do GitHub.
Você já usou Freetile.js? O que você construiu? Compartilhe suas experiências nos comentários.