{"id":3591,"date":"2014-10-08T12:19:21","date_gmt":"2014-10-08T15:19:21","guid":{"rendered":"http:\/\/blog.turbosite.com.br\/?p=3591"},"modified":"2014-10-08T12:19:21","modified_gmt":"2014-10-08T15:19:21","slug":"conheca-os-frameworks-css-minimalistas","status":"publish","type":"post","link":"https:\/\/www.turbosite.com.br\/blog\/conheca-os-frameworks-css-minimalistas\/","title":{"rendered":"Conhe\u00e7a os Frameworks CSS minimalistas"},"content":{"rendered":"

Ol\u00e1, vimos esta postagem em WebSocialDev.com<\/a> e resolvemos compartilh\u00e1-lha pela qualidade e import\u00e2ncia das dicas e com pequenas modifica\u00e7\u00f5es. Como citado no Post, muitas das vezes encontramos\u00a0projetos utilizando Bootstrap usando um m\u00ednimo de recursos, sendo que arquivos de 4~5kb resolveriam o problema e acabam por utlizar o Bootstrap ocupando em m\u00e9dia 200kb. Este post tem como objetivo tentar trazer alternativas para redu\u00e7\u00e3o do tamanho dos projetos, desfrutem e aprimorem-se, conhecimento nunca \u00e9 demais. Segue postagem:<\/p>\n

Neste post, foi agrupado v\u00e1rios frameworks simples e leves para apresentar a essa nova tend\u00eancia de frameworks minimalistas, que tem como foco otimizar o que voc\u00ea realmente precisa para construir um website. No decorrer da lista voc\u00ea vai conseguir perceber o foco dos frameworks para otimizar o que realmente importa no desenvolvimento front-end.<\/p>\n

Introdu\u00e7\u00e3o<\/h2>\n

\u00c9\u00a0discorrido um pouco sobre a mudan\u00e7a no foco dos frameworks antes de analisarmos de fato a lista. Lembrando que a lista agrega duas categorias de ferramentas, os chamados Minimal Frameworks<\/strong> (frameworks que basicamente possuem um foco para desenvolvimento) e Grid Frameworks<\/strong> (framworks que s\u00e3o utilizados para constru\u00e7\u00e3o de grids, \u00e9 um tipo de minimal framework).<\/p>\n

Os frameworks s\u00e3o famosos por otimizar (e muito) nosso trabalho em rela\u00e7\u00e3o a desenvolvimento, tanto web quanto local, vide Bootstrap (web) e o .NET Framework (local\/windows) por exemplo. Hoje temos frameworks super completos com diversas funcionalidades e diversos componentes, o que caracteriza que tal framework pode ser utilizado em qualquer projeto pois fornece uma gama de ferramentas que possivelmente pode atender a maioria das necessidades da aplica\u00e7\u00e3o.<\/p>\n

Como todas as tecnologias tendem a evoluir, com frameworks n\u00e3o \u00e9 diferente. Hoje come\u00e7amos a ver uma mudan\u00e7a no foco dos frameworks, aquela tend\u00eancia de tentar solucionar todos os problemas com apenas uma ferramenta est\u00e1 dando espa\u00e7o a frameworks destinados a resolver problemas espec\u00edficos, como \u00e9 o caso das grids para constru\u00e7\u00e3o de layout. O surgimento destes novos frameworks simples e pr\u00e1ticos nada mais \u00e9 do que a necessidade de simplificar apenas o necess\u00e1rio para um desenvolvimento web de qualidade que respeita padr\u00f5es.<\/p>\n

A inten\u00e7\u00e3o do post \u00e9 apresentar frameworks simples, algum deles v\u00e3o ter funcionalidades muito parecidas com as do Bootstrap ou Foundation, mas note que o foco dos mesmos \u00e9 suprir necessidades mutuas para qualquer projeto web. Pense que s\u00e3o frameworks que agregam o que voc\u00ea realmente precisa, n\u00e3o o que voc\u00ea pode vir a precisar, como \u00e9 o caso de tantas funcionalidades no Bootstrap e Foundation.<\/p>\n

Vamos a lista, qualquer duvida ou sugest\u00e3o, estou inteiramente a disposi\u00e7\u00e3o nos coment\u00e1rios.<\/p>\n

Simple Grid<\/h3>\n

\"simplegrid_websocialdev_img_post\"\u00a0<\/a><\/p>\n

O Simple Grid \u00e9 um framework CSS, responsivo, que otimiza o trabalho com grids para monitores de alta resolu\u00e7\u00e3o. Este framework n\u00e3o traz dezenas de componentes e add-ons como estamos acostumados, apenas uma simples grid, o que torna o mesmo super leve e simples de utilizar. Vale a pena conferir, nunca se sabe quando podemos precisar deste tipo de solu\u00e7\u00e3o para algum projeto. Possui grid de 12 colunas flex\u00edveis.<\/p>\n

<\/i> Info & Download<\/a> <\/i> GitHub<\/a><\/p>\n

Cardinal<\/h3>\n

\"cardinal_framework_websocialdev_img_post\"<\/a><\/p>\n

A inten\u00e7\u00e3o do framework Cardinal \u00e9 otimizar a constru\u00e7\u00e3o de layouts, com prototipagem r\u00e1pida de layout e c\u00f3digo CSS f\u00e1cil de manter. O Cardinal n\u00e3o traz nenhum beneficio em rela\u00e7\u00e3o ao design dos componentes, essa parte ele deixa em cargo de quem est\u00e1 utilizando o framework, ele apenas fornece o esqueleto b\u00e1sico para constru\u00e7\u00e3o de aplica\u00e7\u00f5es web simples e escalon\u00e1veis. Vale a pena dar uma olhada na se\u00e7\u00e3o modular scale<\/strong> da documenta\u00e7\u00e3o, \u00e9 um dos pontos interessantes do framework.<\/p>\n

<\/i> Info & Download<\/a> <\/i> GitHub<\/a><\/p>\n

Ice Cream<\/h3>\n

\"icecream_framework_websocialdev_img_post\"<\/a><\/p>\n

o Ice Cream \u00e9 um simples framework que auxilia na cria\u00e7\u00e3o de grids, apenas de grids. Como o pr\u00f3prio slogan do framework diz \u201cas vezes tudo que voc\u00ea precisa \u00e9 uma grid responsiva\u201d. O Ice Cream \u00e9 realmente muito simples e conta apenas com a grid como componente. Sua sintaxe \u00e9 bem simples, quem j\u00e1 conhece o Bootstrap n\u00e3o vai ter problema nenhum em trabalhar com o Ice Cream (e com muitos outros frameworks).<\/p>\n

<\/i> Info & Download<\/a> <\/i> GitHub<\/a><\/p>\n

Pocket Grid<\/h3>\n

\"pocketgrid_framework_websocialdev_img_post\"<\/a><\/p>\n

O PocketGrid \u00e9 provavelmente um dos frameworks mais leves da lista, com cerca de 0.5kb. Framework CSS, responsivo e mobile first, que aborda a constru\u00e7\u00e3o de grids. O diferencial deste framework \u00e9 o c\u00f3digo sem\u00e2ntico e voc\u00ea n\u00e3o tem limite para o n\u00famero de colunas nem para breakpoints. Compat\u00edvel com o Bootstrap e n\u00e3o possui depend\u00eancias de outras bibliotecas. Vale considerar em meio aos frameworks minimalistas para grid.<\/p>\n

<\/i> Info & Download<\/a> <\/i> GitHub<\/a><\/p>\n

Mistype<\/h3>\n

\"mistype_framework_websocialdev_img_post\"<\/a><\/p>\n

O Mistype \u00e9 um framework CSS muito b\u00e1sico voltado para o desenvolvimento r\u00e1pido de prot\u00f3tipos. O framework se baseia em alguns componentes b\u00e1sicos como grid e fixes. Vale a pena conferir, o projeto nasceu para suprir uma necessidade do desenvolvedor Zlatan Vasovi\u0107<\/a><\/strong>.<\/p>\n

<\/i> Info & Download<\/a> <\/i> GitHub<\/a><\/p>\n

Pure<\/h3>\n

\"pure_framework_websocialdev_post_img\"<\/a><\/p>\n

O Pure \u00e9 um framework muito simples, mantido pelo Yahoo! inc. que cont\u00e9m um conjunto componentes CSS responsivos que voc\u00ea pode utilizar me qualquer projeto. O arquivo .min do Pure possui apenas 4.5KB<\/strong>, muito menor que o arquivo do Bootstrap por exemplo, e possui link para servidores CDN. No come\u00e7o do blog fiz um post de introdu\u00e7\u00e3o ao Pure<\/strong><\/a>. Esse framework \u00e9 muito pr\u00e1tico para resolver problemas, vale a pena dar uma olhada.<\/p>\n

<\/i> Info & Download<\/a> <\/i> GitHub<\/a><\/p>\n

Min<\/h3>\n

\"min_framework_websocialdev_post_img\"<\/a><\/p>\n

Min \u00e9 um framework CSS muito b\u00e1sico mas com algumas features bem interessantes como suporte a vers\u00e3o 5.5 do Internet Explorer<\/strong> (uow!) e ele n\u00e3o fornece um design pronto para os componentes (uma forma de combater o fenomeno de sites feitos com Bootstrap, onde todos se parecem) apenas uma s\u00e9rie de regras CSS para gerar elementos. Esse framework tamb\u00e9m trabalha com classes sem\u00e2nticas, possui 995 bytes<\/strong> e da suporte a transi\u00e7\u00e3o do Bootstrap. Vale a pena conferir s\u00f3 pelo fato de dar suporte a v\u00e1rias vers\u00f5es do Internet Explorer, al\u00e9m de ser um framework super moderno e leve com prop\u00f3sitos simples por\u00e9m muito funcionais.<\/p>\n

<\/i> Info & Download<\/a> <\/i> GitHub<\/a><\/p>\n

KNACSS<\/h3>\n

\"knacss_framework_websocialdev_img_post\"<\/a><\/p>\n

KNACSS \u00e9 mais um framework minimalista com recursos bem interessantes. N\u00e3o possui javascript, \u00e9 super leve, da suporte ao Internet Explorer 6 e 7 e n\u00e3o possui design pr\u00e9 pronto. Al\u00e9m destas features padr\u00f5es, o KNACSS tamb\u00e9m possui vers\u00f5es em Sass<\/strong>, Less <\/strong>e CSS <\/strong>b\u00e1sico. Na sua cole\u00e7\u00e3o de propriedades CSS s\u00e3o tratados elementos como tipografia, grids, breakpoints para design responsivo, \u00edcones, dentre outros. Por ser mais um framework leve com suporte vers\u00f5es antigas do IE, vale a pena conferir.<\/p>\n

<\/i> Info & Download<\/a> <\/i> GitHub<\/a><\/p>\n

Kube<\/h3>\n

\"kube_framework_websocialdev_img_post\"<\/a><\/p>\n

O Kube Web Framework 4 \u00e9 um framework minimalista para desenvolvedores e designers profissionais. Este framework te da total liberdade de escolhe, facilitando apenas o b\u00e1sico na produ\u00e7\u00e3o de elementos, assim como outros frameworks da lista, deixando o design para terceiros. Este merece uma aten\u00e7\u00e3o especial por trazer um conjunto de funcionalidades CSS e JS<\/strong> bem bacanas para um framework minimalista. Apesar de n\u00e3o ser muito conhecimento, est\u00e1 em constante desenvolvimento, a vers\u00e3o 4 foi revisada no GitHub nos \u00faltimos dias. Este n\u00e3o informa quais vers\u00f5es do IE suportam sua utiliza\u00e7\u00e3o, mas especifica que funciona em qualquer navegador moderno.<\/p>\n

<\/i> Info & Download<\/a> <\/i> GitHub<\/a><\/p>\n

Concrete<\/h3>\n

\"concrete_framework_websocialdev_img_post\"<\/a><\/p>\n

Este framework chamado Concrete nada mais \u00e9 do que uma s\u00e9rie de regras CSS que juntas geram uma grid simples e responsiva de 12 colunas<\/strong>, desenvolvida para operar desde monitores de alta resolu\u00e7\u00e3o at\u00e9 dispositivos m\u00f3veis. Sua utiliza\u00e7\u00e3o \u00e9 super simples, afinal este framework \u00e9 apenas um sistema de grid para layouts responsivos. Vale a pena conferir, pode vir a ser uma alternativa para projetos futuros.<\/p>\n

<\/i> Info & Download<\/a> <\/i> GitHub<\/a><\/p>\n

Cascade Framework<\/h3>\n

\"cascade_framework_websocialdev_img_post\"<\/a><\/p>\n

O Cascade \u00e9 framework minimalista bem moderno. Ele utiliza o padr\u00e3o Atomic Design<\/strong> para dar total controle do design<\/strong> e separa as funcionalidades do framework em m\u00f3dulos, que voc\u00ea s\u00f3 inclui se for\/precisar utilizar. As classes CSS s\u00e3o separadas em arquivos ao inv\u00e9s de seletores<\/strong>. O Cascade Framework da suporte a grids semantica e n\u00e3o sem\u00e2ntica, possui elementos de navega\u00e7\u00e3o, tipografia, templates de exemplos entre outras features. Al\u00e9m disso o Cascade tamb\u00e9m da suporte ao Internet Explorer 6+<\/strong>, assim como browsers modernos.<\/p>\n

<\/i> Info & Download<\/a> <\/i> GitHub<\/a><\/p>\n

Bijou<\/h3>\n


\n\"bijou_framework_websocialdev_img_post\"<\/a><\/p>\n

O Bijou \u00e9 um framework minimalista, muito simples, t\u00e3o simples que esse \u00e9 o seu destaque. Na p\u00e1gina de introdu\u00e7\u00e3o ao framework voc\u00ea pode notar a simplicidade do mesmo, o framework fornece apenas meia duzia de recursos<\/strong>, como grid, regras de tipografia, alertas, bot\u00f5es e tabelas estilizadas. O Bijou possui 2.2KiB<\/strong>, mais um reflexo da sua simplicidade. A utiliza\u00e7\u00e3o dele tamb\u00e9m \u00e9 bem simples e intuitiva, as classes s\u00e3o bem organizadas e geram um c\u00f3digo bem limpo, recomendado para desenvolvimentos r\u00e1pidos.<\/p>\n

<\/i> Info & Download<\/a> <\/i> GitHub<\/a><\/p>\n

Toast<\/h3>\n

\"toast_framework_websocialdev_img_post\"<\/a><\/p>\n

Esse framework chamado Toast \u00e9 apenas uma grid<\/strong>, nada mais que isso. Como diz a apresenta\u00e7\u00e3o do mesmo no GitHub \u201cseu poder est\u00e1 na alta capacidade de customiza\u00e7\u00e3o\u201d<\/strong>. Apesar de fornecer apenas a grid, ele possui diversos recursos para a mesma, os mesmos presentes, por exemplo, no robusto Framework Foundation. O nome das classes \u00e9 um pouco esquisito mas dando uma olhada na documenta\u00e7\u00e3o fica tranquilo, vale a pena dar uma conferida.<\/p>\n

<\/i> Info & Download<\/a> <\/i> GitHub<\/a><\/p>\n

RWD Grid<\/h3>\n

\"rwdgrid_framework_websocialdev_img_post\"<\/a><\/p>\n

O RWD n\u00e3o \u00e9 bem um framework, e sim um grid system baseado no 960grid (que foi o antecessor dos grid frameworks e n\u00e3o deixa de ser um framework). Para quem procura apenas uma maneira simples e r\u00e1pida para iniciar um projeto com suporte ao IE7+, o RWD Grid \u00e9 uma boa op\u00e7\u00e3o. Cont\u00e9m PSD da grid, que pode ser de 12 ou 16 colunas.<\/p>\n

<\/i> Info & Download<\/a> <\/i> GitHub<\/a><\/p>\n

Bagpakk<\/h3>\n

\"bagpakk_framework_websocialdev_img_post\"<\/a><\/p>\n

Bagpakk, \u00a0foi desenvolvido pelo @wp_wolf<\/strong><\/a> para suprir a necessidade<\/strong> de ter de reescrever sempre o mesmo c\u00f3digo. Dando uma olhada no site de apresenta\u00e7\u00e3o do framework da para perceber que ele \u00e9 um framework minimalista bem moderno<\/strong>, com projeto no GitHub, suporte ao Bower, Pr\u00e9 processadores CSS, dentre outras funcionalidades, al\u00e9m do suporte a grid, tipografia, videos, layout responsivo e por ai vai. De todos os itens da lista, este \u00e9 o que mais recomendado para ser analisado por ser bem moderno e simples.<\/p>\n

<\/i> Info & Download<\/a> <\/i> GitHub<\/a><\/p>\n

Conclus\u00e3o<\/h2>\n

Bom esses s\u00e3o os frameworks minimalistas que\u00a0valem\u00a0a pena compartilhar. Existem muitos outros, mas demos\u00a0aten\u00e7\u00e3o aos que ainda tem suporte e comunidade ativa no GitHub.
\nQuem tiver e desejar dar uma sugest\u00e3o ou cr\u00edtica<\/del>, encaminhe um coment\u00e1rio. <\/p>\n","protected":false},"excerpt":{"rendered":"

Foi agrupado v\u00e1rios Frameworks simples e leves para apresentar a essa nova tend\u00eancia de Frameworks minimalistas, que tem como foco otimizar o que voc\u00ea realmente precisa para construir um website.<\/p>\n","protected":false},"author":1,"featured_media":3607,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2,6],"tags":[155,188,280],"class_list":["post-3591","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-css-2","category-dicas","tag-css-minimalistas","tag-dicas-de-css","tag-frameworks-css"],"_links":{"self":[{"href":"https:\/\/www.turbosite.com.br\/blog\/wp-json\/wp\/v2\/posts\/3591","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.turbosite.com.br\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.turbosite.com.br\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.turbosite.com.br\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.turbosite.com.br\/blog\/wp-json\/wp\/v2\/comments?post=3591"}],"version-history":[{"count":0,"href":"https:\/\/www.turbosite.com.br\/blog\/wp-json\/wp\/v2\/posts\/3591\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.turbosite.com.br\/blog\/wp-json\/wp\/v2\/media\/3607"}],"wp:attachment":[{"href":"https:\/\/www.turbosite.com.br\/blog\/wp-json\/wp\/v2\/media?parent=3591"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.turbosite.com.br\/blog\/wp-json\/wp\/v2\/categories?post=3591"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.turbosite.com.br\/blog\/wp-json\/wp\/v2\/tags?post=3591"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}