{"id":3277,"date":"2014-06-17T16:00:39","date_gmt":"2014-06-17T19:00:39","guid":{"rendered":"http:\/\/blogimpacta.com.br\/?p=3277"},"modified":"2014-06-17T16:00:39","modified_gmt":"2014-06-17T19:00:39","slug":"20-bibliotecas-css-para-desenvolvedores-parte-i","status":"publish","type":"post","link":"https:\/\/www.impacta.com.br\/blog\/20-bibliotecas-css-para-desenvolvedores-parte-i\/","title":{"rendered":"20 bibliotecas CSS para desenvolvedores."},"content":{"rendered":"

Nos \u00faltimos anos, o CSS ganhou a prefer\u00eancia de diversos desenvolvedores e designers por conta de suas in\u00fameras funcionalidades e atributos. Junto com ele, incont\u00e1veis ferramentas s\u00e3o lan\u00e7adas por desenvolvedores quase todos os meses, para simplificar tarefas. Ferramentas como as bibliotecas CSS, frameworks<\/em> e outras aplica\u00e7\u00f5es s\u00e3o capazes de auxiliar desenvolvedores em uma s\u00e9rie de coisas, inclusive na cria\u00e7\u00e3o de aplicativos web inovadores.<\/span><\/p>\n

Nos artigos seguintes, selecionamos uma lista de 20 bibliotecas CSS para desenvolvedores<\/strong> que o ajudar\u00e3o a atingir resultados inovadores e otimizados em pouco tempo. Confira:<\/span><\/p>\n

\u00a0 \u00a0 \u00a0 1 – Kite<\/em><\/strong><\/span><\/p>\n

Kite<\/em> \u00e9 uma biblioteca CSS que auxilia o desenvolvimento de layouts<\/em>, utilizando \u201cinline-block\u201d\u00a0<\/em>ao contr\u00e1rio da sintaxe CSS.\u00a0\u00c9 pr\u00e1tica, simplificada, e f\u00e1cil de usar. Funciona como flexbox,<\/em>\u00a0conte\u00fado justificado, entre outras funcionalidades, e te permite criar m\u00f3dulos complexos. Kite<\/em> \u00e9 baseado em OOCSS com MindBEMding, isso o auxilia a construir seus componentes rapidamente. Suporta praticamente todos os browsers e vem com licen\u00e7a do MIT.<\/span><\/p>\n

\u00a0 \u00a0 \u00a0 2 – DynCSS<\/em><\/strong><\/span><\/p>\n

DynCSS<\/em> analisa suas regras de atributo -dyn-. Estas regras s\u00e3o express\u00f5es de Javascript calculadas de acordo com eventos do browser<\/em>, como rolagem e redimensionamento das p\u00e1ginas. O resultado \u00e9 aplicado ao atributo CSS que voc\u00ea tiver especificado como sufixo. Voc\u00ea pode tornar din\u00e2mica qualquer propriedade CSS \u2013 se empregada a metodologia jQuery de css(). Isso \u00e9 poss\u00edvel anexando o prefixo -dyn- e especificando uma express\u00e3o Javascript.<\/span><\/p>\n

\u00a0 \u00a0 \u00a0 3 – Progressjs<\/span><\/em><\/strong><\/span><\/p>\n

ProgressJs<\/em> \u00e9 uma biblioteca JavaScript e CSS3<\/em> que ajuda desenvolvedores a criar e gerenciar as barras de progresso de cada objeto na p\u00e1gina. Voc\u00ea pode desenvolver seu pr\u00f3prio template para barra de progresso ou simplesmente customizar algum j\u00e1 existente. \u00c9 poss\u00edvel usar ProgressJs<\/em> para mostrar o progresso do download de objetos como imagens, v\u00eddeos e etc na p\u00e1gina do usu\u00e1rio final. Isso pode ser usado em todos os elementos, incluindo caixa de texto, \u00e1rea de texto e etc.<\/span><\/p>\n

\u00a0 \u00a0 \u00a0 4 – Hover.CSS<\/em><\/strong><\/span><\/p>\n

Hover.CSS<\/em> \u00e9 uma cole\u00e7\u00e3o muito \u00fatil de efeitos de hover CSS3<\/em> potencializados para bot\u00f5es call to action<\/em>, logos, imagens e etc. \u00c9 poss\u00edvel aplic\u00e1-los a seus pr\u00f3prios elementos, modific\u00e1-los ou apenas us\u00e1-los como inspira\u00e7\u00e3o. O hover.css<\/em> pode ser usado de in\u00fameras maneiras: copiando e colando o efeito que voc\u00ea gostaria de usar, ou fazendo refer\u00eancia \u00e0 stylesheet<\/em>. Em seguida, apenas adicione o nome de classe do efeito ao elemento em quest\u00e3o.<\/span><\/p>\n

\u00a0 \u00a0 \u00a0 5 – Spinkit<\/em><\/strong><\/span><\/p>\n

Esta \u00e9 uma cole\u00e7\u00e3o de incr\u00edveis \u00edcones animados de carregamento com CSS. O spinkit<\/em> torna anima\u00e7\u00f5es CSS atrativas e customiz\u00e1veis. O objetivo n\u00e3o \u00e9 oferecer uma solu\u00e7\u00e3o que funcione em qualquer browser. S<\/em>e voc\u00ea estiver utilizando browsers<\/em> que n\u00e3o tenham a propriedade CSSanimation<\/em> implementada em si (como o Internet Explorer 9 ou vers\u00f5es anteriores), voc\u00ea poder\u00e1 realizar testes de compatibilidade.<\/span><\/p>\n

\u00a0 \u00a0 \u00a0 6 – Magic CSS3 Animation<\/em><\/span><\/strong><\/span><\/p>\n

Magic CSS3 Animations<\/em> \u00e9 um pacote de anima\u00e7\u00f5es CSS3<\/em> com efeitos especiais que voc\u00ea pode usar gratuitamente em seus projetos web. Basta incluir o estilo CSS \u201cmagic.css\u201d<\/em> ou sua vers\u00e3o comprimida, \u201cmagic.min.css.\u201d<\/em><\/span><\/p>\n

\u00a0 \u00a0 \u00a0 7 – Bounce.js<\/em><\/strong><\/span><\/p>\n

Bounce.js<\/em> \u00e9 uma ferramenta para gerar keyframes<\/em> de anima\u00e7\u00f5es em CSS3.<\/em> A biblioteca JS para gera\u00e7\u00e3o de anima\u00e7\u00f5es din\u00e2micas est\u00e1 neste caminho. Basta adicionar um componente, escolher as pr\u00e9 defini\u00e7\u00f5es, e em seguida \u00e9 poss\u00edvel obter uma URL reduzida ou exportar para CSS<\/em>.<\/span><\/p>\n

\u00a0 \u00a0 \u00a0 8 – ImaCSS<\/em><\/span><\/strong><\/span><\/p>\n

Imacss<\/em> \u00e9 uma biblioteca e aplica\u00e7\u00e3o que transforma arquivos de imagens em URLs de dados, que s\u00e3o posteriormente incorporados a um \u00fanico arquivo CSS<\/em> como imagens de background. Basicamente, ela permite que voc\u00ea reduza todos os seus requisitos HTTP para imagens em seu design, como \u00edcones, de uma s\u00f3 vez.<\/span><\/p>\n

\u00a0 \u00a0 \u00a0 9 – Buttons<\/em><\/strong><\/span><\/p>\n

Buttons<\/em> \u00e9 uma biblioteca CSS<\/em> para criar bot\u00f5es web altamente customiz\u00e1veis, modernos e flex\u00edveis. Ela \u00e9 constru\u00edda com Sass + Compass<\/strong>, que suporta bot\u00f5es quadrados, arredondados,\u00a0flat<\/i>\u00a0ou em 3D, com ou sem efeitos, e os tamanhos, cores, efeitos e fontes usados podem ser todos alterados com aux\u00edlio de vari\u00e1veis.<\/span><\/p>\n

\u00a0 \u00a0 \u00a0 10 – OdoMeter<\/em><\/span><\/strong><\/span><\/p>\n

OdoMeter<\/em> \u00e9 uma biblioteca JavaScript-CSS<\/em> para cria\u00e7\u00e3o de efeitos\/interfaces como placas de carro, de sinaliza\u00e7\u00e3o, etc. Esta biblioteca \u00e9 independente e leve (3kb) e usa transforma\u00e7\u00f5es CSS<\/em> de maneira bem r\u00e1pida. Ela simplesmente transforma o valor de um elemento em outro valor pr\u00e9-definido com fun\u00e7\u00e3o de uma \u00fanica linha.<\/span><\/p>\n

\u00a0 \u00a0 \u00a0 11 – Single Element CSS Spinner<\/em><\/strong><\/span><\/p>\n

Single Element CSS Spinners<\/em> \u00e9 uma cole\u00e7\u00e3o de \u201cloading spinners\u201d<\/em> (sinaliza\u00e7\u00f5es gr\u00e1ficas do progresso de carregamento de algum elemento) animadas por CSS<\/em>. Cada\u00a0spinner<\/i>\u00a0consiste de uma \u00fanica div<\/em> com uma classe de\u00a0\u201cloader\u201d<\/i>\u00a0e caixa de texto de \u201cCarregando\u201d.<\/span><\/p>\n

\u00a0 \u00a0 \u00a0 12 – Ani.js<\/em><\/strong><\/span><\/p>\n

AniJS<\/em> \u00e9 uma biblioteca declarativa para anima\u00e7\u00f5es CSS<\/em> que torna o desenvolvimento mais r\u00e1pido e din\u00e2mico. \u00c9 totalmente documentada e f\u00e1cil de come\u00e7ar a usar.<\/span><\/p>\n

\u00a0 \u00a0 \u00a0 13 – Beautons<\/em><\/strong><\/span><\/p>\n

Beautons<\/em> \u00e9 uma biblioteca muito f\u00e1cil de usar para criar bot\u00f5es mais simples. Voc\u00ea pode aplicar uma variedade de estilos, fun\u00e7\u00f5es e etc aos bot\u00f5es, al\u00e9m de alterar seus tamanhos, tornando-os positivos ou negativos, e muito mais.\u00a0<\/span><\/p>\n

\u00a0 \u00a0 \u00a0 14 – Saffron<\/em><\/strong><\/span><\/p>\n

Saffron<\/em> \u00e9 uma cole\u00e7\u00e3o de “mixins”<\/em> e auxiliares Sass<\/em> que simplificam bastante o processo de adicionar anima\u00e7\u00f5es CSS3<\/em>. Apenas inclua um “mixin”<\/em> em sua declara\u00e7\u00e3o “Sass”,<\/em> depois ajuste qualquer configura\u00e7\u00e3o utilizando vari\u00e1veis e par\u00e2metros “mixin”<\/em>. Com a Saffron<\/em>, voc\u00ea tem controle total sobre como suas anima\u00e7\u00f5es e transi\u00e7\u00f5es devem se comportar.\u00a0<\/span><\/p>\n

\u00a0 \u00a0 \u00a0 15 – CSS Shakes<\/em><\/strong><\/span><\/p>\n

\u00c9 uma cole\u00e7\u00e3o de classes CSS<\/em> que \u201cbalanceiam\u201d o \u2018DOM\u2019.<\/span><\/p>\n

\u00a0 \u00a0 \u00a0 16 – Typebase.css<\/em><\/strong><\/span><\/p>\n

Typebase.css<\/em> \u00e9 uma stylesheet<\/em> de tipografia minimalista e customiz\u00e1vel. Conta com vers\u00f5es less<\/em> e sass<\/em> de modo a ser facilmente modificada e transformada em modernos projetos web. Oferece todo o suporte necess\u00e1rio para uma boa tipografia sem adicionar nenhum elemento est\u00e9tico. \u00c9 pr\u00f3pria para realizar modifica\u00e7\u00f5es conforme os projetos v\u00e3o evoluindo.<\/span><\/p>\n

\u00a0 \u00a0 \u00a0 17 – Sassline<\/em><\/span><\/strong><\/span><\/p>\n

Configura textos na web para um grid com Sass & rems<\/em>. Sassline<\/em> pode ser usado para blogs, prot\u00f3tipos e outros projetos web. Ela recomenda estilos e “mixins”<\/em> de tipografia b\u00e1sicos para atender as propor\u00e7\u00f5es do grid<\/em>. Basta selecionar uma escala modular para cada ponto de quebra e come\u00e7ar a desenvolver pelo texto responsivo.<\/span><\/p>\n

\u00a0 \u00a0 \u00a0 18 – TypeSettings<\/em><\/span><\/strong><\/span><\/p>\n

Consiste em uma barra de ferramentas Sass<\/em> que configura o texto em Ems<\/em>, baseado em escala modular, ritmo vertical e responsividade.<\/span><\/p>\n

\u00a0 \u00a0 \u00a0 19 –\u00a0Type Rendering Mix<\/em><\/strong><\/span><\/p>\n

Type Rendering Mix<\/em> \u00e9 uma biblioteca JavaScript min\u00fascula que permite aplicar estilos apenas quando for utilizado Core Text<\/em>–\u00a0 para desenvolvimento iOS ou \u00a0OS X, por exemplo- para obter uma renderiza\u00e7\u00e3o mais consistente, preservando a \u00a0precis\u00e3o do “antisserrilhamento sub-pixel”<\/em>.<\/span><\/p>\n

\u00a0 \u00a0 \u00a0 20 –\u00a0Hint.css<\/em><\/strong><\/span><\/p>\n

Hint.css<\/em> \u00e9 uma biblioteca com tooltips<\/em> feitas com SASS<\/em>, e utiliza apenas CSS<\/em> e HTML. A biblioteca usa atributos de dados, propriedades de conte\u00fado, pseudo elementos e transi\u00e7\u00f5es CSS3<\/em>. S\u00e3o tooltips<\/em> simples e funcionais, com setas, e que podem ser posicionadas em qualquer parte do elemento-m\u00e3e.\u00a0<\/span><\/p>\n

Chegamos, assim, ao fim de nossa lista com 20 bibliotecas CSS<\/em> especiais para desenvolvedores. Deixe seu coment\u00e1rio sobre elas e aproveite para test\u00e1-las e otimizar seus resultados em desenvolvimento web!<\/span><\/p>\n

<\/i>Love<\/span>0<\/span><\/span><\/a> <\/i> <\/i>