Recursos frescos para web designers e desenvolvedores (fevereiro de 2016)

2015 foi um ótimo ano para a web: as tecnologias da web foram adotado em muitos fatores além da criação de um website ou de um aplicativo da web. Muitas aplicações móveis e de desktop agora são construídas usando HTML, CSS e JavaScript. Isso é possível graças à natureza de portabilidade das tecnologias e bibliotecas da web, como React.js, Angular e Node.js.

Então, na edição de hoje desta série, reunimos um punhado de bibliotecas JavaScript e CSS.

Clique para mais recursos

Encontre toda a nossa coleção de recursos recomendados e as melhores ferramentas de web design e desenvolvimento disponíveis.

Slider plano

jQuery UI vem com uma coleção de interface web comum, incluindo um Slider - uma interface do usuário que permite ao usuário selecionar um intervalo de valores numéricos. o Slider plano é uma ferramenta web que faz a personalização do estilo da interface do usuário do jQuery, que já foi uma tarefa muito difícil, muito mais fácil agora.

Utilitário de tipo aberto

Utilitário de tipo aberto é uma coleção de classes drop-in para aplicar recursos tipográficos CSS avançados tais ligaduras de fonte, letra maiúscula pequena e muito mais. Eles basicamente oferecem a melhor experiência de leitura possível para seus usuários em detalhes. Ele degrada muito bem em navegadores mais antigos e sem suporte.

ResponsifyJS

Uma das notórias restrições que as imagens responsivas enfrentam é que ela geralmente dimensiona a imagem corretamente, mas isso desvia o ponto focal principal da imagem quando ela é reduzida para um tamanho de viewport muito pequeno.

ResponsifyJS é leve biblioteca JavaScript que você pode usar para definir coordenadas para manter o foco da imagem enquanto está sendo redimensionado.

Linear

Linear é um aplicativo de régua para Mac. Você pode usar a régua para medir páginas da Web, descobrir o tamanho de um elemento sem ter que abrir o DevTools ou descobrir se um elemento está perfeitamente centrado. Você pode ter várias réguas e mudar a unidade de PX para EM.

StickyStack

StickyStack é um plugin do jQuery para criar uma experiência de rolagem de pilha, quando um painel atinge o topo da viewport, ele fica lá, enquanto a rolagem adicional puxa para cima o próximo painel. É um plugin leve com algumas opções para configurar o contêiner de página, seção de pilha, bem como a sombra da caixa das pilhas. Confira a demonstração.

Visualizador

Visualizador é o plugin jQuery para lightbox de imagens - uma maneira popular de ampliar imagens na web. O plugin vem com uma opçao avassaladora que permite que você personalizar cada bit do mesa de luz interface.

O plug-in também fornece um conjunto de APIs e eventos personalizados para controle total sobre o mesa de luz resposta e comportamento. Além disso, funciona até o Internet Explorer 8.

DeviceMock

DeviceMock é uma biblioteca JavaScript que permite que você criar quadros ou maquetes de dispositivos como um telefone, um tablet e uma área de trabalho. Da mesma forma, a biblioteca fornece opções para definir a cor do tema do quadro, o tamanho, bem como a orientação do quadro..

Pode ser uma boa alternativa para mostrar sua web e aplicativo em vez de usar o Photoshop.

Clrs

Clrs é uma iniciativa para redefinir as cores da web padrão em um tom de cores moderno mais atraente. Além disso, defende um conjunto de combinações de cores para melhor acessibilidade. Você pode implantar essas cores por meio de amostras de cores NPM, Gem (Ruby) e Photoshop e Illustrator..

Colorir

Colorir é uma biblioteca JavaScript super leve (3kb minificada) para extrair cores dominantes de uma imagem com muitas APIs para manipular as cores. Você pode usar a cor extraída como um espaço reservado enquanto espera que a imagem seja carregada completamente, gere um plano de fundo gradiente ou ajuste a interface vizinha para atender à cor da imagem..

BookBlock

BookBlock é o plugin jQuery para criar um livreto com o efeito de virar a página. É uma alternativa bonita exibir várias imagens em seu website, especialmente se houver uma sequência ou fluxo que você deseja exibir.

Você pode conferir a demonstração aqui para ter uma ideia de como o BookBlock funciona.