{"id":8676,"date":"2017-06-08T09:30:32","date_gmt":"2017-06-08T12:30:32","guid":{"rendered":"https:\/\/king.host\/blog\/?p=8676"},"modified":"2024-06-03T17:26:50","modified_gmt":"2024-06-03T20:26:50","slug":"5-frameworks-front-end-populares-em-2017","status":"publish","type":"post","link":"https:\/\/king.host\/blog\/tecnologia\/5-frameworks-front-end-populares-em-2017\/","title":{"rendered":"4 frameworks front-end populares em 2017"},"content":{"rendered":"<p>Design responsivo \u00e9 o desenvolvimento de solu\u00e7\u00f5es online que se adequam automaticamente a diferentes tamanhos de telas como celulares, tablets e desktop. Atualmente a necessidade de investir nesse tipo de solu\u00e7\u00e3o \u00e9 muito grande, pois os acessos via dispositivos m\u00f3veis est\u00e3o a cada dia mais frequentes.\u00a0Existem frameworks front-end que apoiam esse desenvolvimento e facilitam o trabalho do desenvolvedor\/designer. Eles s\u00e3o padr\u00f5es de CSS e c\u00f3digo que oferecem agilidade e efic\u00e1cia para desenvolver. A seguir, vamos apresentar alguns desses recursos:<\/p>\n<h2>Lista de Frameworks Front-End<\/h2>\n<h3><a href=\"http:\/\/getbootstrap.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">1. Bootstrap<\/a><\/h3>\n<p><img fetchpriority=\"high\" decoding=\"async\" class=\"alignnone wp-image-8687 size-large\" src=\"https:\/\/cdn-cms.king.host\/blog-hlg\/uploads\/2015\/08\/bootstrap-copia-780x291.png\" alt=\"bootstrap - C\u00f3pia\" width=\"780\" height=\"291\" title=\"\" srcset=\"https:\/\/cdn-cms.king.host\/blog-hlg\/uploads\/2015\/08\/bootstrap-copia-780x291.png 780w, https:\/\/cdn-cms.king.host\/blog-hlg\/uploads\/2015\/08\/bootstrap-copia-300x112.png 300w, https:\/\/cdn-cms.king.host\/blog-hlg\/uploads\/2015\/08\/bootstrap-copia-1024x382.png 1024w, https:\/\/cdn-cms.king.host\/blog-hlg\/uploads\/2015\/08\/bootstrap-copia-400x149.png 400w, https:\/\/cdn-cms.king.host\/blog-hlg\/uploads\/2015\/08\/bootstrap-copia.png 1280w\" sizes=\"(max-width: 780px) 100vw, 780px\" \/><\/p>\n<p>\u00c9 um dos frameworks responsivos mais conhecidos e utilizados da atualidade. Bootstrap \u00e9 um sistema desenvolvido em c\u00f3digo aberto, hospedado, criado e mantido pelo GitHub.<\/p>\n<ul>\n<li><strong>Cridores:<\/strong> <a href=\"https:\/\/github.com\/mdo\" target=\"_blank\" rel=\"noopener\">Mark Otto<\/a> e\u00a0<a href=\"https:\/\/github.com\/fat\" target=\"_blank\" rel=\"noopener\">Jacob Thornton<\/a>.<\/li>\n<li><strong>No mercado desde:<\/strong> 2011<\/li>\n<li><strong>Vers\u00e3o atual:<\/strong> 3.3.7<\/li>\n<li><strong>Popularidade:<\/strong>\u00a0mais de 111,000 no GitHub<\/li>\n<li><strong>Princ\u00edpio:<\/strong> <a href=\"http:\/\/en.wikipedia.org\/wiki\/Responsive_web_design\" target=\"_blank\" rel=\"noopener\">RWD<\/a>\u00a0e mobile first.<\/li>\n<li><strong>Tamanho do Framework:<\/strong> 154 KB<\/li>\n<li><strong>Pr\u00e9-processadores:<\/strong> <a href=\"http:\/\/lesscss.org\/\" target=\"_blank\" rel=\"noopener\">Less<\/a> e\u00a0<a href=\"http:\/\/sass-lang.com\/\" target=\"_blank\" rel=\"noopener\">Sass<\/a><\/li>\n<li><strong>Responsivo:<\/strong>\u00a0Sim<\/li>\n<li><strong>Modular:<\/strong>\u00a0Sim<\/li>\n<li><strong>Templates\/layouts:<\/strong>\u00a0Sim<\/li>\n<li><strong>\u00cdcones:<\/strong>\u00a0<a href=\"http:\/\/glyphicons.com\/\" target=\"_blank\" rel=\"noopener\">Glyphicons<\/a> Halflings<\/li>\n<li><strong>Extras\/Add-ons:<\/strong>\u00a0muitos plugins dispon\u00edveis.<\/li>\n<li><strong>Unique components:<\/strong> Jumbotron<\/li>\n<li><strong>Documenta\u00e7\u00e3o: Boa<\/strong><\/li>\n<li><strong>Customiza\u00e7\u00e3o:<\/strong> Personalizador b\u00e1sico de GUI. \u00c9 preciso inserir os valores de cores manualmente, porque n\u00e3o h\u00e1 nenhum selecionador de cores dispon\u00edvel.<\/li>\n<li><strong>Suporte de Navegador:<\/strong> Firefox, Chrome, Safari, IE8+ (\u00e9 preciso\u00a0<a href=\"https:\/\/github.com\/scottjehl\/Respond\" target=\"_blank\" rel=\"noopener\">Respond.js<\/a>\u00a0para IE8)<\/li>\n<li><strong>Licen\u00e7a:<\/strong> <a href=\"https:\/\/tldrlegal.com\/license\/mit-license\" target=\"_blank\" rel=\"noopener\">MIT<\/a>08<\/li>\n<\/ul>\n<h3><strong><a href=\"http:\/\/foundation.zurb.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">2. Foundation<\/a><\/strong><\/h3>\n<p><img decoding=\"async\" class=\"alignnone wp-image-8688 size-large\" src=\"https:\/\/cdn-cms.king.host\/blog-hlg\/uploads\/2015\/08\/foundation-copia-780x330.png\" alt=\"foundation - C\u00f3pia\" width=\"780\" height=\"330\" title=\"\" srcset=\"https:\/\/cdn-cms.king.host\/blog-hlg\/uploads\/2015\/08\/foundation-copia-780x330.png 780w, https:\/\/cdn-cms.king.host\/blog-hlg\/uploads\/2015\/08\/foundation-copia-300x127.png 300w, https:\/\/cdn-cms.king.host\/blog-hlg\/uploads\/2015\/08\/foundation-copia-1024x433.png 1024w, https:\/\/cdn-cms.king.host\/blog-hlg\/uploads\/2015\/08\/foundation-copia-400x169.png 400w, https:\/\/cdn-cms.king.host\/blog-hlg\/uploads\/2015\/08\/foundation-copia.png 1280w\" sizes=\"(max-width: 780px) 100vw, 780px\" \/><\/p>\n<p>Um framework bastante avan\u00e7ado e com fun\u00e7\u00f5es sem\u00e2nticas, al\u00e9m disso, eles prometem um c\u00f3digo limpo e r\u00e1pido. O framework tamb\u00e9m disponibiliza uma ampla documenta\u00e7\u00e3o com diversos exemplos para acelerar o aprendizado da sua utiliza\u00e7\u00e3o.<\/p>\n<ul>\n<li><strong>Cridores:<\/strong> <a href=\"https:\/\/github.com\/mdo\" target=\"_blank\" rel=\"noopener\">Mark Otto<\/a> e\u00a0<a href=\"https:\/\/github.com\/fat\" target=\"_blank\" rel=\"noopener\">Jacob Thornton<\/a>.<\/li>\n<li><strong>No mercado desde:<\/strong> 2011<\/li>\n<li><strong>Vers\u00e3o atual:<\/strong>6.3.1<\/li>\n<li><strong>Popularidade:<\/strong>\u00a0mais de 25,400 no GitHub<\/li>\n<li><strong>Princ\u00edpio:<\/strong> RWD, mobile first, web sem\u00e2ntica.<\/li>\n<li><strong>Tamanho do framework:<\/strong> 197.5 KB<\/li>\n<li><strong>Pr\u00e9-processador:<\/strong> Sass<\/li>\n<li><strong>Responsivo:<\/strong>\u00a0Sim<\/li>\n<li><strong>Modular:<\/strong>\u00a0Sim<\/li>\n<li><strong>Templates\/layouts:<\/strong>\u00a0Sim<\/li>\n<li><strong>\u00cdcones:<\/strong> <a href=\"http:\/\/zurb.com\/playground\/foundation-icon-fonts-3\" target=\"_blank\" rel=\"noopener\">Foundation Icon Fonts<\/a><\/li>\n<li><strong>Extras\/Add-ons:<\/strong>\u00a0Sim<\/li>\n<li><strong>Documenta\u00e7\u00e3o:<\/strong>\u00a0Boa, diversos recursos adicionais dispon\u00edveis.<\/li>\n<li><strong>Customiza\u00e7\u00e3o:<\/strong> Personalizador de GUI b\u00e1sico semelhante \u00e0 ferramenta do Bootstrap.<\/li>\n<li><strong>Suporte de navegador:<\/strong> Chrome, Firefox, Safari, IE9+; iOS, Android, Windows Phone 7+<\/li>\n<li><strong>Licen\u00e7a:<\/strong> MIT<\/li>\n<\/ul>\n<h3 id=\"3-semantic-ui\"><a href=\"https:\/\/semantic-ui.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">3. Semantic UI<\/a><\/h3>\n<p>Super inovador, o Semantic UI faz parte de um esfor\u00e7o cont\u00ednuo para tornar os sites de constru\u00e7\u00e3o muito mais sem\u00e2nticos. Com descreve o seu mote\u00a0&#8220;Uma estrutura de componente de UI baseada em princ\u00edpios \u00fateis da linguagem natural&#8221;, ele utiliza princ\u00edpios de linguagem natural, tornando o c\u00f3digo muito mais leg\u00edvel e compreens\u00edvel.<\/p>\n<p><img decoding=\"async\" class=\"alignnone wp-image-11636 size-full\" src=\"https:\/\/cdn-cms.king.host\/blog-hlg\/uploads\/2015\/08\/semantic.png\" alt=\"\" width=\"1153\" height=\"593\" title=\"\" srcset=\"https:\/\/cdn-cms.king.host\/blog-hlg\/uploads\/2015\/08\/semantic.png 1153w, https:\/\/cdn-cms.king.host\/blog-hlg\/uploads\/2015\/08\/semantic-300x154.png 300w, https:\/\/cdn-cms.king.host\/blog-hlg\/uploads\/2015\/08\/semantic-768x395.png 768w, https:\/\/cdn-cms.king.host\/blog-hlg\/uploads\/2015\/08\/semantic-780x401.png 780w, https:\/\/cdn-cms.king.host\/blog-hlg\/uploads\/2015\/08\/semantic-1024x527.png 1024w, https:\/\/cdn-cms.king.host\/blog-hlg\/uploads\/2015\/08\/semantic-400x206.png 400w\" sizes=\"(max-width: 1153px) 100vw, 1153px\" \/><\/p>\n<ul>\n<li><strong>Cridor:<\/strong> <a href=\"https:\/\/github.com\/jlukic\" target=\"_blank\" rel=\"noopener\">Jack Lukic<\/a><\/li>\n<li><strong>No mercado desde:<\/strong> 2013<\/li>\n<li><strong>Vers\u00e3o atual:<\/strong> 2.2<\/li>\n<li><strong>Popularidade:<\/strong>\u00a0mais de 34,000 no\u00a0GitHub<\/li>\n<li><strong>Prinic\u00edpios:<\/strong> Sem\u00e2ntico, ambivalencia de tags, responsivo.<\/li>\n<li><strong>Tamanho do framework:<\/strong> 806 KB<\/li>\n<li><strong>Pr\u00e9-processador:<\/strong> Less<\/li>\n<li><strong>Responsivo:<\/strong>\u00a0Sim<\/li>\n<li><strong>Modular:<\/strong>\u00a0Sim<\/li>\n<li><strong>Templates\/layouts: <\/strong>Sim, alguns templates iniciais s\u00e3o oferecidos.<\/li>\n<li><strong>\u00cdcones:<\/strong> Font Awesome<\/li>\n<li><strong>Extras\/Add-ons:<\/strong>\u00a0N\u00e3o<\/li>\n<li><strong>Documenta\u00e7\u00e3o:<\/strong>\u00a0Muito boa. Ele oferece uma documenta\u00e7\u00e3o muito bem organizada. Al\u00e9m disso, o usu\u00e1rio\u00a0conta com um site<a href=\"http:\/\/learnsemantic.com\/\" target=\"_blank\" rel=\"noopener\">\u00a0para aprender a utiliza\u00e7\u00e3o do framework<\/a>\u00a0que oferece um guia para come\u00e7ar.<\/li>\n<li><strong>Customiza\u00e7\u00e3o:<\/strong>\u00a0Sem customizador via GUI, apenas customiza\u00e7\u00e3o manual.<\/li>\n<li><strong>Suporte de navegador:<\/strong> Firefox, Chrome, Safari, IE10+ (IE9 with browser prefix only), Android 4, Blackberry 10<\/li>\n<li><strong>Licen\u00e7a:<\/strong> MIT<\/li>\n<\/ul>\n<h3><a href=\"https:\/\/purecss.io\/\" target=\"_blank\" rel=\"noopener noreferrer\">4. Pure<\/a><\/h3>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-11637 size-full\" src=\"https:\/\/cdn-cms.king.host\/blog-hlg\/uploads\/2015\/08\/pure.png\" alt=\"\" width=\"1125\" height=\"627\" title=\"\" srcset=\"https:\/\/cdn-cms.king.host\/blog-hlg\/uploads\/2015\/08\/pure.png 1125w, https:\/\/cdn-cms.king.host\/blog-hlg\/uploads\/2015\/08\/pure-300x167.png 300w, https:\/\/cdn-cms.king.host\/blog-hlg\/uploads\/2015\/08\/pure-768x428.png 768w, https:\/\/cdn-cms.king.host\/blog-hlg\/uploads\/2015\/08\/pure-780x435.png 780w, https:\/\/cdn-cms.king.host\/blog-hlg\/uploads\/2015\/08\/pure-1024x571.png 1024w, https:\/\/cdn-cms.king.host\/blog-hlg\/uploads\/2015\/08\/pure-400x223.png 400w\" sizes=\"(max-width: 1125px) 100vw, 1125px\" \/><\/p>\n<p>Fechando a lista de frameworks front-end, temos o Pure, leve e modular &#8211; escrito em CSS puro &#8211; que inclui componentes que podem ser usados em conjunto ou separadamente dependendo de suas necessidades.\u00a0Esse framework front-end\u00a0oferece estilos chamados &#8220;barebones&#8221;, ou seja,\u00a0\u00a0s\u00e3o ideais para\u00a0um projeto limpo e leve. Ele funciona bem para pessoas que n\u00e3o precisam de uma estrutura completa, mas querem apenas componentes espec\u00edficos para incluir e completar um trabalho.<\/p>\n<ul>\n<li><strong>Criador:<\/strong> Yahoo<\/li>\n<li><strong>No mercado desde:<\/strong> 2013<\/li>\n<li><strong>Vers\u00e3o atual:<\/strong> 0.6.2<\/li>\n<li><strong>Popularidade:<\/strong> 16,637 stars on GitHub<\/li>\n<li><strong>Princ\u00edpio:<\/strong> <a href=\"http:\/\/smacss.com\/\" target=\"_blank\" rel=\"noopener\">SMACSS<\/a>, minimalismo.<\/li>\n<li><strong>Tamanho do framework:<\/strong> 16 KB<\/li>\n<li><strong>Pr\u00e9-processador:<\/strong>\u00a0Nenhum<\/li>\n<li><strong>Responsivo: <\/strong>Sim<\/li>\n<li><strong>Modular:<\/strong>\u00a0Sim<\/li>\n<li><strong>Templates\/layouts:<\/strong>\u00a0Sim<\/li>\n<li><strong>\u00cdcones:<\/strong>\u00a0Nenhum.\u00a0\u00c9 poss\u00edvel usar o Font Awesome.<\/li>\n<li><strong>Extras\/Add-ons:<\/strong>\u00a0Nenhum<\/li>\n<li><strong>Documenta\u00e7\u00e3o:<\/strong>\u00a0Boa<\/li>\n<li><strong>Customiza\u00e7\u00e3o:<\/strong>\u00a0GUI b\u00e1sica &#8220;Skin Builder&#8221;<\/li>\n<li><strong>Navegadores suportados:<\/strong>\u00a0\u00faltimas vers\u00f5es de Firefox, Chrome, Safari; IE7+; iOS 6.x, 7.x; Android 4.x<\/li>\n<li><strong>Licen\u00e7a:<\/strong> <a href=\"https:\/\/github.com\/yahoo\/pure-site\/blob\/master\/LICENSE.md\" target=\"_blank\" rel=\"noopener\">Yahoo! Inc. BSD<\/a><\/li>\n<\/ul>\n<p>Listamos essas <strong>4 op\u00e7\u00f5es de frameworks front-end<\/strong> que s\u00e3o populares e possuem uma boa reputa\u00e7\u00e3o em rela\u00e7\u00e3o a sua qualidade. Escreva nos coment\u00e1rios quais frameworks opensource voc\u00ea utiliza e contribua para melhorar essa lista.<\/p>\n<p>Quer mais conte\u00fado? Acesse o eBook 60 ferramentas gratuitas que ir\u00e3o potencializar a produ\u00e7\u00e3o do seu dia a dia.<\/p>\n<p><!--INICIO DO FORMUL\u00c1RIO DE DOWNLOAD--><\/p>\n<style>\n\/*DEFININDO A COR DO FUNDO E TEXTO AO PASSAR O MOUSE*\/.cor:hover{background:#a8b1bb !important;color:#ffffff !important;}<\/style>\n<div class=\"cor\" style=\"background: #ebeff8; padding: 0 30px 0px 0;\">\n<p><!--T\u00cdTULO DO MATERIAL--><\/p>\n<h3 style=\"padding: 50px 0 0 30px; font-size: 28px;\">60 Ferramentas Gratuitas para Agilizar sua Rotina<\/h3>\n<p><!--DESCRI\u00c7\u00c3O DO MATERIAL--><\/p>\n<p style=\"padding: 0 0 0 30px;\">Ganhe tempo utilizando ferramentas inteligentes<\/p>\n<p>[row cols_nr=&#8221;2&#8243; class=&#8221;narrow&#8221;]<br \/>\n[col size=&#8221;6&#8243;]<\/p>\n<div style=\"float: center; padding: 0 0 0 30px;\">\n<p><!--COLAR FORMUL\u00c1RIO DA RD AP\u00d3S ESSA TAG--><\/p>\n<div id=\"bl-download-50-ferramentas-gratuitas-051aa44451ef1e1b65c4\" role=\"main\"><\/div>\n<p><script type=\"text\/javascript\" src=\"https:\/\/d335luupugsy2.cloudfront.net\/js\/rdstation-forms\/stable\/rdstation-forms.min.js\"><\/script><br \/>\n<script type=\"text\/javascript\"><br \/>\n  new RDStationForms('bl-download-50-ferramentas-gratuitas-051aa44451ef1e1b65c4-html', 'UA-170021-28').createForm();<br \/>\n<\/script><br \/>\n<!--FIM DO FORMUL\u00c1RIO DA RD AP\u00d3S ESSA TAG--><\/p>\n<\/div>\n<p>[\/col]<\/p>\n<p>[col size=&#8221;6&#8243;]<\/p>\n<p>[\/col]<\/p>\n<p>[\/row]<\/p>\n<\/div>\n<p>Ficou alguma d\u00favida sobre as op\u00e7\u00f5es de frameworks front-end? Deixe nos coment\u00e1rios!<br \/>\nPara hospedar seus projetos em um ambiente com tecnologia de ponta, conhe\u00e7a os planos de <a href=\"https:\/\/www.kinghost.com.br\/hospedagem-de-sites\" target=\"_blank\" rel=\"noopener noreferrer\">hospedagem compartilhada<\/a> ou<a href=\"https:\/\/www.kinghost.com.br\/planos-para-desenvolvedores\" target=\"_blank\" rel=\"noopener noreferrer\"> planos para desenvolvedores<\/a> da KingHost.<\/p>\n<p>Fique ligado no <strong><a href=\"https:\/\/king.host\/blog\/\" target=\"_blank\" rel=\"noopener noreferrer\">LAB, o Blog da KingHost<\/a><\/strong>, para mais novidades.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Design responsivo \u00e9 o desenvolvimento de solu\u00e7\u00f5es online que se adequam automaticamente a diferentes tamanhos de telas como celulares, tablets e desktop. Atualmente a necessidade de investir nesse tipo de solu\u00e7\u00e3o \u00e9 muito grande, pois os acessos via dispositivos m\u00f3veis est\u00e3o a cada dia mais frequentes.\u00a0Existem frameworks front-end que apoiam esse desenvolvimento e facilitam o [&hellip;]<\/p>\n","protected":false},"author":253,"featured_media":9735,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1179,8],"tags":[],"class_list":["post-8676","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-desenvolvimento","category-tecnologia"],"_links":{"self":[{"href":"https:\/\/king.host\/blog\/wp-json\/wp\/v2\/posts\/8676","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/king.host\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/king.host\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/king.host\/blog\/wp-json\/wp\/v2\/users\/253"}],"replies":[{"embeddable":true,"href":"https:\/\/king.host\/blog\/wp-json\/wp\/v2\/comments?post=8676"}],"version-history":[{"count":7,"href":"https:\/\/king.host\/blog\/wp-json\/wp\/v2\/posts\/8676\/revisions"}],"predecessor-version":[{"id":36261,"href":"https:\/\/king.host\/blog\/wp-json\/wp\/v2\/posts\/8676\/revisions\/36261"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/king.host\/blog\/wp-json\/wp\/v2\/media\/9735"}],"wp:attachment":[{"href":"https:\/\/king.host\/blog\/wp-json\/wp\/v2\/media?parent=8676"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/king.host\/blog\/wp-json\/wp\/v2\/categories?post=8676"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/king.host\/blog\/wp-json\/wp\/v2\/tags?post=8676"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}