{"id":50807,"date":"2023-06-22T07:00:54","date_gmt":"2023-06-22T14:00:54","guid":{"rendered":"https:\/\/dhblog.dream.press\/blog\/?p=50807"},"modified":"2025-05-26T12:56:27","modified_gmt":"2025-05-26T19:56:27","slug":"frameworks-css","status":"publish","type":"post","link":"https:\/\/www-dev.dreamhost.com\/blog\/pt\/frameworks-css\/","title":{"rendered":"16 Frameworks CSS Populares que Ajudar\u00e3o Voc\u00ea a Economizar Tempo (Com Estilo)"},"content":{"rendered":"\n<p>Na minha \u00e9poca, uma folha de estilos era apenas uma folha de estilos.<\/p>\n\n\n\n<p>Voc\u00ea codificou manualmente o CSS para cada elemento. <i>E n\u00f3s gost\u00e1vamos assim.&nbsp;<\/i><\/p>\n\n\n\n<p>Ahem. Ok. Desativando o modo rabugento.<\/p>\n\n\n\n<p><a href=\"https:\/\/www.dreamhost.com\/blog\/pt\/aprender-css\/\" target=\"_blank\" rel=\"noopener\">O CSS evoluiu bastante<\/a> desde os tempos das p\u00e1ginas HTML puras, e um dos desenvolvimentos mais importantes \u00e9 a cria\u00e7\u00e3o e prolifera\u00e7\u00e3o de frameworks de CSS. Essas ferramentas facilitam enormemente para desenvolvedores e designers construir e lan\u00e7ar novos projetos, tanto grandes quanto pequenos.<\/p>\n\n\n\n<p>Eles tamb\u00e9m t\u00eam um grande impacto nos usu\u00e1rios e na maneira como experienciamos a web. Os frameworks criam uma linguagem comum para UI e UX em sites e aplica\u00e7\u00f5es web, tornando quase todos os sites mais f\u00e1ceis de entender, navegar e usar.<\/p>\n\n\n\n<p>Hoje, <a href=\"https:\/\/w3techs.com\/technologies\/overview\/css_framework\" target=\"_blank\" rel=\"noopener\">cerca de 1 em cada 4 sites na internet<\/a> \u00e9 constru\u00eddo usando um framework CSS.<\/p>\n\n\n\n<p>Neste artigo, exploraremos 16 dos frameworks mais populares e como eles s\u00e3o usados por todos, desde empresas at\u00e9 hackers independentes.<\/p>\n\n\n\n<h2 id=\"definition\" class=\"wp-block-heading\">O que \u00e9 um Framework CSS?<\/h2>\n\n\n\n<p>Um framework CSS \u00e9 uma biblioteca pr\u00e9-preparada de c\u00f3digo para ajudar na implementa\u00e7\u00e3o r\u00e1pida e consistente de estilos e layouts de sites. Os frameworks incluem c\u00f3digo pr\u00e9-escrito e reutiliz\u00e1vel para elementos de design comuns e componentes que podem ser facilmente aplicados ao HTML base para criar interfaces de usu\u00e1rio ou designs de sites familiares e consistentes.<\/p>\n\n\n\n<p>Os frameworks CSS s\u00e3o utilizados por desenvolvedores de frontend para implementar rapidamente elementos como grids responsivos, formul\u00e1rios estilizados, bot\u00f5es ou outros elementos importantes de UI em p\u00e1ginas web e apps.<\/p>\n\n\n\n<h2 id=\"benefit\" class=\"wp-block-heading\">Benef\u00edcios de Usar um Framework CSS<\/h2>\n\n\n\n<p>Ok, mas por que usar um framework?<\/p>\n\n\n\n<p>Voc\u00ea n\u00e3o poderia simplesmente construir tudo isso sozinho? Bem, sim. Mas essa \u00e9 exatamente a quest\u00e3o. Frameworks s\u00e3o o resultado inevit\u00e1vel de um mundo onde designers e desenvolvedores escrevem o mesmo CSS b\u00e1sico repetidamente para cada site ou aplicativo.<\/p>\n\n\n\n<p>Por que n\u00e3o escrever apenas uma vez e usar em todo lugar? \u00c9 por isso que eles existem.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Acelere o Tempo de Desenvolvimento<\/h3>\n\n\n\n<p>A resposta mais simples para por que as pessoas usam frameworks: Velocidade. Os frameworks v\u00eam prontos com muitos elementos e estilos que, de outra forma, voc\u00ea precisaria construir do zero ao desenvolver um site.<\/p>\n\n\n\n<p>Ent\u00e3o, por que reinventar a roda?<\/p>\n\n\n\n<p>Muitos desenvolvedores e web designers tamb\u00e9m utilizam frameworks como uma ferramenta para prototipagem r\u00e1pida de novos sites ou aplicativos antes de construir um sistema de design personalizado.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Estilo e Design Consistentes<\/h3>\n\n\n\n<p>O outro benef\u00edcio chave de usar um framework CSS \u00e9 que todos os seus estilos, elementos de UI, bot\u00f5es e mais ter\u00e3o uma apar\u00eancia consistente imediatamente. Voc\u00ea n\u00e3o ter\u00e1 que gastar horas (ou dias, semanas ou anos) ajustando estilos individuais para garantir que todos tenham o mesmo preenchimento, espa\u00e7amento e tamanhos de fonte.<\/p>\n\n\n\n<p>J\u00e1 que o framework foi meticulosamente elaborado, todo o trabalho tedioso j\u00e1 foi feito.<\/p>\n\n\n\n<p>Como um benef\u00edcio adicional, os frameworks CSS mais populares s\u00e3o amplamente utilizados, ajudando o site a ter uma apar\u00eancia e sensa\u00e7\u00e3o familiar para os usu\u00e1rios. Isso \u00e9 crucial do ponto de vista da experi\u00eancia do usu\u00e1rio.<\/p>\n\n\n\n<p>Por \u00faltimo, mas n\u00e3o menos importante, considere a acessibilidade. A maioria dos frameworks populares s\u00e3o constru\u00eddos para uma ampla gama de dispositivos e tamanhos de tela, tornando-os mais acess\u00edveis a uma gama mais ampla de usu\u00e1rios.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Facilite o Design Responsivo<\/h3>\n\n\n\n<p>Vamos ser honestos: Construir um layout perfeitamente responsivo \u00e9 um tormento.<\/p>\n\n\n\n<p>H\u00e1 tantas vari\u00e1veis e fatores a considerar. Depois, extrapole da\u00ed para os milh\u00f5es de dispositivos, e seu sistema de grade perfeito rapidamente se torna uma bagun\u00e7a.<\/p>\n\n\n\n<p>Mais uma vez, os modernos frameworks CSS cobrem voc\u00ea. Eles fizeram o trabalho duro (e os c\u00e1lculos) para construir um sistema de design responsivo perfeito em pixels. Tudo o que voc\u00ea precisa fazer \u00e9 aplicar as classes CSS corretas.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Melhore a Colabora\u00e7\u00e3o e a Manuten\u00e7\u00e3o<\/h3>\n\n\n\n<p>Levante a m\u00e3o se voc\u00ea gosta de manter o c\u00f3digo de outra pessoa, criar documentos e decifrar os coment\u00e1rios de algu\u00e9m.<\/p>\n\n\n\n<p>Isso \u00e9 um grande n\u00e3o.<\/p>\n\n\n\n<p>Uma vez que a maioria dos frameworks vem com uma extensa biblioteca de documenta\u00e7\u00e3o e uma comunidade de usu\u00e1rios, voc\u00ea obt\u00e9m o benef\u00edcio de uma base de c\u00f3digo comum e informa\u00e7\u00f5es extremamente bem documentadas sobre exatamente como usar o sistema mencionado.<\/p>\n\n\n\n<p>Al\u00e9m disso, a maioria deles s\u00e3o projetos de c\u00f3digo aberto. Isso significa que voc\u00ea pode us\u00e1-los livremente, adapt\u00e1-los e at\u00e9 mesmo (em alguns casos) redistribuir sua pr\u00f3pria vers\u00e3o, se isso for do seu interesse.<\/p>\n\n\n\n<h2 id=\"feature\" class=\"wp-block-heading\">Principais Funcionalidades de um Framework CSS Moderno<\/h2>\n\n\n\n<p>Os frameworks de CSS abrangem uma gama bastante ampla, mas a maioria deles possui algumas caracter\u00edsticas chave em comum.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Sistemas de Grade e Layouts Predefinidos<\/h3>\n\n\n\n<p>As grades fazem a web ir&#8230; n\u00e3o redonda? Elas transformam a web em caixas perfeitamente proporcionais. \u00c9 isso que elas fazem.<\/p>\n\n\n\n<p>A maioria dos frameworks CSS possui um sistema de grade integrado que ajuda a criar um layout flex\u00edvel e fluido para o site. O sistema geralmente oferece muitas op\u00e7\u00f5es de personaliza\u00e7\u00e3o que o tornam facilmente adapt\u00e1vel a diferentes tamanhos de tela, resolu\u00e7\u00f5es e estruturas de p\u00e1gina.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Consultas de M\u00eddia Responsivas<\/h3>\n\n\n\n<p>A outra vantagem que a maioria dos frameworks manipula automaticamente s\u00e3o as consultas de m\u00eddia para ajustar os estilos baseados nas caracter\u00edsticas do dispositivo.<\/p>\n\n\n\n<p>Esses sistemas podem ser complexos e tediosos para desenvolver do zero, mas s\u00e3o uma parte cr\u00edtica da web moderna para garantir que o conte\u00fado escale e seja exibido corretamente em v\u00e1rios dispositivos<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Componentes de UI Pr\u00e9-constru\u00eddos e Modelos<\/h3>\n\n\n\n<p>A maioria dos frameworks CSS vem com uma biblioteca de componentes de UI pr\u00e9-constru\u00eddos e pr\u00e9-estilizados. Coisas como bot\u00f5es, formul\u00e1rios, tabelas, interruptores e mais \u2013 todos prontos para usar apenas aplicando uma classe simples.<\/p>\n\n\n\n<p>Isso torna mais r\u00e1pido construir interfaces e p\u00e1ginas, al\u00e9m de criar uma base para uma apar\u00eancia consistente e uma interface familiar em todo o site (e pela web).<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Op\u00e7\u00f5es de Tipografia e Personaliza\u00e7\u00e3o de Tema<\/h3>\n\n\n\n<p>Muitos dos frameworks compartilhados aqui v\u00eam com op\u00e7\u00f5es de personaliza\u00e7\u00e3o e temas integrados. Isso torna super simples aplicar coisas como suas cores de marca, fontes preferidas e outros toques pessoais que transformam a apar\u00eancia e o ambiente para combinar com o estilo da sua marca.<\/p>\n\n\n\n\n\n<div class=\"glossary-term\">\n\t<a\n\t\tclass=\"glossary-term__above-title\"\n\t\thref=\"\"\n\t\ttarget=\"_blank\"\n\t\trel=\"noopener noreferrer\"\n\t>\n\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 640 512\"><path d=\"M320 32c-8.1 0-16.1 1.4-23.7 4.1L15.8 137.4C6.3 140.9 0 149.9 0 160s6.3 19.1 15.8 22.6l57.9 20.9C57.3 229.3 48 259.8 48 291.9v28.1c0 28.4-10.8 57.7-22.3 80.8c-6.5 13-13.9 25.8-22.5 37.6C0 442.7-.9 448.3 .9 453.4s6 8.9 11.2 10.2l64 16c4.2 1.1 8.7 .3 12.4-2s6.3-6.1 7.1-10.4c8.6-42.8 4.3-81.2-2.1-108.7C90.3 344.3 86 329.8 80 316.5V291.9c0-30.2 10.2-58.7 27.9-81.5c12.9-15.5 29.6-28 49.2-35.7l157-61.7c8.2-3.2 17.5 .8 20.7 9s-.8 17.5-9 20.7l-157 61.7c-12.4 4.9-23.3 12.4-32.2 21.6l159.6 57.6c7.6 2.7 15.6 4.1 23.7 4.1s16.1-1.4 23.7-4.1L624.2 182.6c9.5-3.4 15.8-12.5 15.8-22.6s-6.3-19.1-15.8-22.6L343.7 36.1C336.1 33.4 328.1 32 320 32zM128 408c0 35.3 86 72 192 72s192-36.7 192-72L496.7 262.6 354.5 314c-11.1 4-22.8 6-34.5 6s-23.5-2-34.5-6L143.3 262.6 128 408z\"\/><\/svg>\n\t\t<span><\/span>\n\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 384 512\"><path d=\"M342.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L274.7 256 105.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z\"\/><\/svg>\n\t<\/a>\n    <h3>Tipografia<\/h3>\n    <p>Tipografia \u00e9 o processo de arranjo de um tipo de letra em varia\u00e7\u00f5es de fonte, tamanho e espa\u00e7amento. Isso envolve tornar a apar\u00eancia, o estilo e o arranjo do texto leg\u00edveis e visualmente agrad\u00e1veis.<\/p>\n            <a\n            href=\"https:\/\/www.dreamhost.com\/glossary\/web-design\/typography\/\"\n                        class=\"btn btn--white-outline btn--sm btn--round\"\n                                    target=\"_blank\"\n            rel=\"noopener noreferrer\"\n            >\n                            Leia Mais                    <\/a>\n\n<\/div>\n\n\n\n<h2 id=\"frameworks\" class=\"wp-block-heading\">16 Frameworks CSS Populares<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">1. <a href=\"https:\/\/getbootstrap.com\/\" target=\"_blank\" rel=\"noopener\">Bootstrap<\/a><\/h3>\n\n\n\n<p>Bootstrap come\u00e7ou como um projeto paralelo constru\u00eddo e compartilhado por desenvolvedores no Twitter. Agora, \u00e9 o framework CSS mais utilizado para design web responsivo e mobile-first. <a href=\"https:\/\/blog.logrocket.com\/the-most-in-demand-css-technologies-in-2020\/\" target=\"_blank\" rel=\"noopener\">Milh\u00f5es de pessoas usam o Bootstrap<\/a> para criar layouts de web limpos, consistentes e familiares.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Funcionalidades principais:<\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Sistema de grade responsivo<\/li>\n\n\n\n<li>Componentes de UI pr\u00e9-constru\u00eddos<\/li>\n\n\n\n<li>Temas personaliz\u00e1veis e extens\u00edveis<\/li>\n\n\n\n<li>Documenta\u00e7\u00e3o extensa<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" width=\"1600\" height=\"1272\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2023\/06\/Bootstrap.jpg\" alt=\"Bootstrap\" class=\"wp-image-40987 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/06\/Bootstrap.jpg.webp 1600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/06\/Bootstrap-300x239.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/06\/Bootstrap-1024x814.jpg 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/06\/Bootstrap-768x611.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/06\/Bootstrap-1536x1221.jpg 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/06\/Bootstrap-600x477.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/06\/Bootstrap-1200x954.jpg.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/06\/Bootstrap-730x580.jpg.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/06\/Bootstrap-1460x1161.jpg.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/06\/Bootstrap-784x623.jpg.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/06\/Bootstrap-1568x1247.jpg.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/06\/Bootstrap-877x697.jpg.webp 877w\" data-sizes=\"(max-width: 1600px) 100vw, 1600px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1600px; --smush-placeholder-aspect-ratio: 1600\/1272;\" \/><\/figure>\n\n\n\n<p>Muitas empresas, incluindo Twitter (obviamente), Spotify e Udacity, usaram o framework Bootstrap parcialmente ou integralmente em seus sites.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Por que as Pessoas Adoram o Bootstrap<\/h4>\n\n\n\n<p>Os motivos para adorar Bootstrap s\u00e3o os mesmos para adorar frameworks \u2013 \u00e9 simples, limpo e f\u00e1cil de usar.<\/p>\n\n\n\n<p>H\u00e1 uma enorme comunidade de especialistas com experi\u00eancia em construir com Bootstrap para responder quase qualquer pergunta que voc\u00ea possa imaginar.<\/p>\n\n\n\n<p>E, embora \u00e0s vezes tenha a reputa\u00e7\u00e3o de ser b\u00e1sico, o Bootstrap \u00e9 bastante personaliz\u00e1vel se voc\u00ea deseja ir al\u00e9m do que vem na caixa.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">O que as Pessoas N\u00e3o Gostam no Bootstrap<\/h4>\n\n\n\n<p>De longe, a maior cr\u00edtica ao Bootstrap \u00e9 que todos os sites que o utilizam parecem iguais.<\/p>\n\n\n\n<p>\u201cEles s\u00e3o chatos,\u201d alguns dir\u00e3o.<\/p>\n\n\n\n<p>Mas isso geralmente \u00e9 apenas o resultado de pessoas usando exatamente como vem sem dedicar muito tempo para experimentar ou personalizar.<\/p>\n\n\n\n<p>Outra coisa a se ter em mente \u00e9 que o framework \u00e9 bastante pesado no geral. O tamanho do arquivo pode ser maior do que voc\u00ea esperaria para um site simples. Provavelmente essa \u00e9 parte da raz\u00e3o pela qual a Pesquisa do Estado do CSS descobriu que a <a href=\"https:\/\/2021.stateofcss.com\/en-us\/technologies\/css-frameworks\/\" target=\"_blank\" rel=\"noopener\">satisfa\u00e7\u00e3o com o Bootstrap \u00e9 dividida em cerca de 50\/50<\/a>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">2. <a href=\"https:\/\/tailwindcss.com\/\" target=\"_blank\" rel=\"noopener\">Tailwind CSS<\/a><\/h3>\n\n\n\n<p>Tailwind \u00e9 talvez tanto um <i>movimento<\/i> quanto um framework.<\/p>\n\n\n\n<p>O criador, Adam Wathan, <a href=\"https:\/\/adamwathan.me\/css-utility-classes-and-separation-of-concerns\/\" target=\"_blank\" rel=\"noopener\">escreveu algo como um manifesto sobre o pensamento por tr\u00e1s do Tailwind<\/a>. E essencialmente, a ideia \u00e9 que o CSS n\u00e3o deve ser descritivo e sem\u00e2ntico (por exemplo, classe \u201c.header\u201d), mas sim funcional (por exemplo, \u201c.center-flex-3\u201d).<\/p>\n\n\n\n<p>Ele o chama de um framework CSS focado em utilidade.<\/p>\n\n\n\n<p>E essa abordagem parece funcionar para muitas pessoas. <a href=\"https:\/\/2021.stateofcss.com\/en-US\/technologies\/css-frameworks\/\" target=\"_blank\" rel=\"noopener\">Tailwind tem a maior classifica\u00e7\u00e3o de satisfa\u00e7\u00e3o na pesquisa State of CSS, cerca de 80%<\/a>.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Funcionalidades principais:<\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Classes de utilidade para estiliza\u00e7\u00e3o f\u00e1cil<\/li>\n\n\n\n<li>Capacidades de design responsivo<\/li>\n\n\n\n<li>Configura\u00e7\u00e3o personaliz\u00e1vel<\/li>\n\n\n\n<li>Abordagem amig\u00e1vel aos componentes<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" width=\"1600\" height=\"1065\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2023\/06\/Tailwind-CSS-Showcase.jpg\" alt=\"Showcase do Tailwind CSS\" class=\"wp-image-40988 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/06\/Tailwind-CSS-Showcase.jpg.webp 1600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/06\/Tailwind-CSS-Showcase-300x200.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/06\/Tailwind-CSS-Showcase-1024x682.jpg 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/06\/Tailwind-CSS-Showcase-768x511.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/06\/Tailwind-CSS-Showcase-1536x1022.jpg 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/06\/Tailwind-CSS-Showcase-600x399.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/06\/Tailwind-CSS-Showcase-1200x799.jpg.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/06\/Tailwind-CSS-Showcase-730x486.jpg.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/06\/Tailwind-CSS-Showcase-1460x972.jpg.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/06\/Tailwind-CSS-Showcase-784x522.jpg.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/06\/Tailwind-CSS-Showcase-1568x1044.jpg.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/06\/Tailwind-CSS-Showcase-877x584.jpg.webp 877w\" data-sizes=\"(max-width: 1600px) 100vw, 1600px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1600px; --smush-placeholder-aspect-ratio: 1600\/1065;\" \/><\/figure>\n\n\n\n<p>Muitas empresas de tecnologia bem conhecidas como OpenAI (ChatGPT), Shopify, Wealthfront e Loom usam Tailwind CSS.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Por que as Pessoas Amam o Tailwind<\/h4>\n\n\n\n<p>J\u00e1 que o Tailwind \u00e9 utility-first, ele possui flexibilidade praticamente infinita.<\/p>\n\n\n\n<p>N\u00e3o existem realmente layouts pr\u00e9-constru\u00eddos da mesma forma que, por exemplo, Bootstrap. Em vez disso, voc\u00ea pode combinar e sobrepor classes para posicionar seus elementos HTML em um n\u00famero quase infinito de layouts e grades CSS.<\/p>\n\n\n\n<p>A principal vantagem que as pessoas veem neste m\u00e9todo \u00e9 que elas podem estilizar seus divs sem consultar a documenta\u00e7\u00e3o. Como as classes de utilidade s\u00e3o intuitivamente nomeadas (na maioria das vezes), voc\u00ea pode aplicar estilos rapidamente sem alternar constantemente entre a biblioteca CSS e a marca\u00e7\u00e3o.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">O que as pessoas n\u00e3o gostam sobre Tailwind<\/h4>\n\n\n\n<p>Em poucas palavras: As pessoas n\u00e3o gostam de mudan\u00e7as, certo?<\/p>\n\n\n\n<p>Tailwind quebra algumas tradi\u00e7\u00f5es bem estabelecidas para frameworks CSS e at\u00e9 mesmo para o desenvolvimento web de forma mais ampla.<\/p>\n\n\n\n<p>H\u00e1 muitos argumentos para por que essa abordagem ao c\u00f3digo CSS \u00e9 sub\u00f3tima. A \u201c<a href=\"https:\/\/deviq.com\/principles\/separation-of-concerns\" target=\"_blank\" rel=\"noopener\">separa\u00e7\u00e3o de interesses<\/a>\u201d \u00e9 o princ\u00edpio subjacente por tr\u00e1s de como o CSS (e a maioria dos outros c\u00f3digos) \u00e9 escrito. O Tailwind coloca esse conceito, bem, <i>de cabe\u00e7a para baixo<\/i>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">B\u00f4nus: <a href=\"https:\/\/daisyui.com\/\" target=\"_blank\" rel=\"noopener\">Daisy UI<\/a><\/h3>\n\n\n\n<p>Se o framework de utilidades do Tailwind n\u00e3o \u00e9 o que voc\u00ea prefere, existe uma \u00f3tima biblioteca chamada Daisy UI, escrita por <a href=\"https:\/\/github.com\/saadeghi\" target=\"_blank\" rel=\"noopener\">Pouya Saadeghi<\/a>, um plugin que se baseia no Tailwind CSS oferecendo um conjunto de classes que lembram mais o Bootstrap.<\/p>\n\n\n\n<p>Daisy UI fornece nomes de classe para componentes comuns de UI como bot\u00f5es, cart\u00f5es, interruptores e mais, permitindo que os desenvolvedores se concentrem em aspectos mais cr\u00edticos do seu projeto em vez de estilizar elementos b\u00e1sicos. \u00c9 constru\u00eddo em cima do Tailwind CSS, e, portanto, tudo pode ser personalizado usando classes de utilidade.<\/p>\n\n\n\n<p>Um dos principais benef\u00edcios de usar o Daisy UI \u00e9 que ele reduz significativamente o n\u00famero de nomes de classes que voc\u00ea precisa escrever, em aproximadamente 80%, e pode diminuir o tamanho do seu HTML em cerca de 70%. Al\u00e9m disso, adiciona um conjunto de nomes de cores personaliz\u00e1veis ao Tailwind CSS, proporcionando aos desenvolvedores a flexibilidade para criar o Modo Escuro e outros temas sem a necessidade de adicionar novos nomes de classes.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">3. <a href=\"https:\/\/bulma.io\/\" target=\"_blank\" rel=\"noopener\">Bulma<\/a><\/h3>\n\n\n\n<p>Bulma \u00e9 um framework CSS leve baseado em Flexbox.<\/p>\n\n\n\n<p>A sintaxe deste framework \u00e9 em linguagem simples, o que significa que depende muito de classes de utilidade descritivas ou modificadores como \u201c.button\u201d e \u201c.is-large\u201d.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Funcionalidades principais:<\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Sistema de grade baseado em Flexbox<\/li>\n\n\n\n<li>Arquitetura modular<\/li>\n\n\n\n<li>Impulsionado por Sass para f\u00e1cil personaliza\u00e7\u00e3o<\/li>\n\n\n\n<li>C\u00f3digo e design minimalistas<\/li>\n<\/ul>\n\n\n\n<p>Exemplos de sites bem conhecidos que usam Bulma: CSS Ninja e Signal.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Por Que as Pessoas Amam Bulma<\/h4>\n\n\n\n<p>Bulma pode parecer um pouco como o conjunto Lego de frameworks CSS. \u00c9 extremamente simples e f\u00e1cil de entender, o que \u00e9 \u00f3timo para iniciantes ou pessoas que apenas querem uma solu\u00e7\u00e3o r\u00e1pida.<\/p>\n\n\n\n<p>Ao aplicar algumas classes com nomes l\u00f3gicos, voc\u00ea pode construir m\u00f3dulos, aplicar <a href=\"https:\/\/www.dreamhost.com\/blog\/pt\/animacao-css\/\" target=\"_blank\" rel=\"noopener\">anima\u00e7\u00f5es CSS<\/a> e criar estilos mais avan\u00e7ados. N\u00e3o h\u00e1 depend\u00eancias de JavaScript, ent\u00e3o voc\u00ea pode us\u00e1-lo em combina\u00e7\u00e3o com praticamente qualquer framework JavaScript.<\/p>\n\n\n\n\n\n<div class=\"glossary-term\">\n\t<a\n\t\tclass=\"glossary-term__above-title\"\n\t\thref=\"\"\n\t\ttarget=\"_blank\"\n\t\trel=\"noopener noreferrer\"\n\t>\n\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 640 512\"><path d=\"M320 32c-8.1 0-16.1 1.4-23.7 4.1L15.8 137.4C6.3 140.9 0 149.9 0 160s6.3 19.1 15.8 22.6l57.9 20.9C57.3 229.3 48 259.8 48 291.9v28.1c0 28.4-10.8 57.7-22.3 80.8c-6.5 13-13.9 25.8-22.5 37.6C0 442.7-.9 448.3 .9 453.4s6 8.9 11.2 10.2l64 16c4.2 1.1 8.7 .3 12.4-2s6.3-6.1 7.1-10.4c8.6-42.8 4.3-81.2-2.1-108.7C90.3 344.3 86 329.8 80 316.5V291.9c0-30.2 10.2-58.7 27.9-81.5c12.9-15.5 29.6-28 49.2-35.7l157-61.7c8.2-3.2 17.5 .8 20.7 9s-.8 17.5-9 20.7l-157 61.7c-12.4 4.9-23.3 12.4-32.2 21.6l159.6 57.6c7.6 2.7 15.6 4.1 23.7 4.1s16.1-1.4 23.7-4.1L624.2 182.6c9.5-3.4 15.8-12.5 15.8-22.6s-6.3-19.1-15.8-22.6L343.7 36.1C336.1 33.4 328.1 32 320 32zM128 408c0 35.3 86 72 192 72s192-36.7 192-72L496.7 262.6 354.5 314c-11.1 4-22.8 6-34.5 6s-23.5-2-34.5-6L143.3 262.6 128 408z\"\/><\/svg>\n\t\t<span><\/span>\n\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 384 512\"><path d=\"M342.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L274.7 256 105.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z\"\/><\/svg>\n\t<\/a>\n    <h3>JavaScript<\/h3>\n    <p>JavaScript \u00e9 uma linguagem de programa\u00e7\u00e3o flex\u00edvel que torna os sites mais envolventes e interativos. Trabalha em conjunto com HTML e CSS para melhorar a experi\u00eancia dos usu\u00e1rios em sites e aplicativos.<\/p>\n            <a\n            href=\"https:\/\/www.dreamhost.com\/glossary\/web-design\/javascript\/\"\n                        class=\"btn btn--white-outline btn--sm btn--round\"\n                                    target=\"_blank\"\n            rel=\"noopener noreferrer\"\n            >\n                            Leia Mais                    <\/a>\n\n<\/div>\n\n\n\n<h4 class=\"wp-block-heading\">O que as Pessoas N\u00e3o Gostam Sobre Bulma<\/h4>\n\n\n\n<p>A simplicidade do Bulma pode ser uma faca de dois gumes.<\/p>\n\n\n\n<p>Embora seja \u00f3timo como um tutorial ou introdu\u00e7\u00e3o a frameworks de CSS, desenvolvedores mais avan\u00e7ados provavelmente reclamariam que falta sofistica\u00e7\u00e3o ou extensibilidade em rela\u00e7\u00e3o a op\u00e7\u00f5es mais robustas.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">4. <a href=\"https:\/\/get.foundation\/\" target=\"_blank\" rel=\"noopener\">Foundation<\/a><\/h3>\n\n\n\n<p>Na extremidade oposta do espectro em rela\u00e7\u00e3o ao Bulma, temos o Foundation.<\/p>\n\n\n\n<p>Foundation n\u00e3o faz quest\u00e3o de ser avan\u00e7ado e, como tal, bastante complexo comparado a algumas outras op\u00e7\u00f5es. \u00c9 uma framework de frontend responsiva projetada para desenvolvimento mobile-first e usada tanto para sites quanto para emails, e \u00e9 utilizada por <a href=\"https:\/\/trends.builtwith.com\/framework\/Foundation\" target=\"_blank\" rel=\"noopener\">aproximadamente 500.000 sites<\/a> em todo o mundo.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Funcionalidades principais:<\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Sistema de grade responsivo<\/li>\n\n\n\n<li>Conjunto abrangente de componentes de UI<\/li>\n\n\n\n<li>Vari\u00e1veis Sass personaliz\u00e1veis<\/li>\n\n\n\n<li>Integra\u00e7\u00e3o com ferramentas e bibliotecas populares de frontend<\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\">Por Que as Pessoas Amam a Funda\u00e7\u00e3o<\/h4>\n\n\n\n<p>Foundation \u00e9 uma esp\u00e9cie de O.G.<\/p>\n\n\n\n<p>Ele existe desde antes do mil\u00eanio Willennium, o que significa que muitos desenvolvedores est\u00e3o bem familiarizados com o Foundation e conhecem sua sintaxe e conven\u00e7\u00f5es.<\/p>\n\n\n\n<p>\u00c9 tamb\u00e9m um produto maduro. Possui toneladas de funcionalidades, documenta\u00e7\u00e3o extensa e recursos.<\/p>\n\n\n\n<p>Al\u00e9m disso, \u00e9 considerado um dos melhores frameworks para acessibilidade.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">O que as Pessoas N\u00e3o Gostam na Funda\u00e7\u00e3o<\/h4>\n\n\n\n<p>Como a maioria dos produtos maduros, Foundation pode parecer um pouco <i>volumoso <\/i>em compara\u00e7\u00e3o com frameworks modernos e leves.<\/p>\n\n\n\n<p>Ele acumulou muitos recursos solicitados e op\u00e7\u00f5es de personaliza\u00e7\u00e3o que tornam a base de c\u00f3digo e os tamanhos de arquivo um pouco mais pesados. Al\u00e9m disso, como as conven\u00e7\u00f5es mudaram, a curva de aprendizado \u00e9 um pouco \u00edngreme para um iniciante acostumado com algo como Tailwind ou Bootstrap.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">5. <a href=\"https:\/\/semantic-ui.com\/\" target=\"_blank\" rel=\"noopener\">Semantic UI<\/a><\/h3>\n\n\n\n<p>\u201cTudo que \u00e9 arbitr\u00e1rio \u00e9 mut\u00e1vel.\u201d<\/p>\n\n\n\n<p>Esse \u00e9 o dogma do Semantic UI.<\/p>\n\n\n\n<p>No seu n\u00facleo, este framework \u00e9 constru\u00eddo para ajudar a criar e escalar interfaces familiares para websites e aplica\u00e7\u00f5es web.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Funcionalidades principais:<\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Nomes de classes intuitivos e leg\u00edveis para humanos<\/li>\n\n\n\n<li>Ampla variedade de componentes de UI e layouts<\/li>\n\n\n\n<li>Temas e estilos personaliz\u00e1veis<\/li>\n\n\n\n<li>Integra\u00e7\u00e3o com bibliotecas e frameworks JavaScript populares como Angular<\/li>\n<\/ul>\n\n\n\n<p>Muitos sites e empresas usam o Semantic UI, incluindo Accenture e Snapchat.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Por que as Pessoas Adoram Semantic UI<\/h4>\n\n\n\n<p>Semantic UI possui uma sintaxe f\u00e1cil de entender que facilita a constru\u00e7\u00e3o a partir de sua vasta cole\u00e7\u00e3o de componentes de interface, incluindo bot\u00f5es, modais, cart\u00f5es, alternadores, campos de texto e mais.<\/p>\n\n\n\n<p>Mas talvez a magia mais popular seja a tematiza\u00e7\u00e3o e personaliza\u00e7\u00e3o.<\/p>\n\n\n\n<p>Semantic inclui uma biblioteca de temas com mais de 3.000 vari\u00e1veis personaliz\u00e1veis e, em seguida, herdadas em todos os seus componentes de UI.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">O que as pessoas n\u00e3o gostam sobre Semantic UI<\/h4>\n\n\n\n<p>Como o Semantic \u00e9 t\u00e3o focado em UI e t\u00e3o extenso, ele pode conter muito c\u00f3digo que n\u00e3o \u00e9 usado em seu projeto. Isso significa que algumas pessoas o considerar\u00e3o excessivamente volumoso para projetos mais simples em compara\u00e7\u00e3o com frameworks mais contidos.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">6. <a href=\"https:\/\/materializecss.com\/\" target=\"_blank\" rel=\"noopener\">Materialize<\/a><\/h3>\n\n\n\n<p>O framework Materialize CSS \u00e9 baseado nos princ\u00edpios de Material Design do Google.<\/p>\n\n\n\n<p>Destaca um design visual ousado e anima\u00e7\u00e3o (movimento) focada na experi\u00eancia do usu\u00e1rio.<\/p>\n\n\n\n<p>Materialize \u00e9 bastante popular, com <a href=\"https:\/\/github.com\/dogfalo\/materialize\/stargazers\" target=\"_blank\" rel=\"noopener\">mais de 38.000 estrelas no GitHub<\/a>.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Funcionalidades Principais:<\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Componentes e estilos inspirados no design material<\/li>\n\n\n\n<li>Sistema de grade responsivo<\/li>\n\n\n\n<li>Personaliza\u00e7\u00e3o impulsionada por Sass<\/li>\n\n\n\n<li>Plugins de JavaScript integrados<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" width=\"1600\" height=\"1193\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2023\/06\/Materialize.jpg\" alt=\"Vitrine Materialize\" class=\"wp-image-40989 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/06\/Materialize.jpg.webp 1600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/06\/Materialize-300x224.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/06\/Materialize-1024x764.jpg 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/06\/Materialize-768x573.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/06\/Materialize-1536x1145.jpg 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/06\/Materialize-600x447.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/06\/Materialize-1200x895.jpg.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/06\/Materialize-730x544.jpg.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/06\/Materialize-1460x1089.jpg.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/06\/Materialize-784x585.jpg.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/06\/Materialize-1568x1169.jpg.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/06\/Materialize-877x654.jpg.webp 877w\" data-sizes=\"(max-width: 1600px) 100vw, 1600px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1600px; --smush-placeholder-aspect-ratio: 1600\/1193;\" \/><\/figure>\n\n\n\n<p>Materialize \u00e9 utilizado por uma ampla variedade de sites, mas a maioria dos sites em seu showcase s\u00e3o pequenas empresas e projetos pessoais.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Por Que as Pessoas Amam o Materialize<\/h4>\n\n\n\n<p>Materialize \u00e9 uma solu\u00e7\u00e3o simples e sem muitos detalhes para configurar um site limpo e utiliz\u00e1vel. Eles n\u00e3o oferecem realmente a lua, mas essa \u00e9 uma das raz\u00f5es pelas quais as pessoas gostam.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">O que as Pessoas N\u00e3o Gostam no Materialize<\/h4>\n\n\n\n<p>Como sempre \u00e9 o caso, a simplicidade tamb\u00e9m significa limita\u00e7\u00f5es. Materialize n\u00e3o \u00e9 t\u00e3o robusto ou extens\u00edvel quanto outros frameworks e depende de JavaScript para movimentos espec\u00edficos.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">7. <a href=\"https:\/\/getuikit.com\/\" target=\"_blank\" rel=\"noopener\">UIkit (Kit de Interface do Usu\u00e1rio)<\/a><\/h3>\n\n\n\n<p>Outro framework modular focado em interfaces de sites e aplicativos web, o UIkit \u00e9 um pouco menos popular que o Semantic UI, mas isso n\u00e3o o torna menos poderoso.<\/p>\n\n\n\n<p>UIkit \u00e9 um framework focado em interface de usu\u00e1rio utilizado por muitos sites e aplicativos web, incluindo Crunchyroll, Moqups e Rover.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" width=\"1600\" height=\"1083\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2023\/06\/UIKit.jpg\" alt=\"UIKit\" class=\"wp-image-40990 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/06\/UIKit.jpg.webp 1600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/06\/UIKit-300x203.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/06\/UIKit-1024x693.jpg 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/06\/UIKit-768x520.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/06\/UIKit-1536x1040.jpg 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/06\/UIKit-600x406.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/06\/UIKit-1200x812.jpg.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/06\/UIKit-730x494.jpg.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/06\/UIKit-1460x988.jpg.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/06\/UIKit-784x531.jpg.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/06\/UIKit-1568x1061.jpg.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/06\/UIKit-877x594.jpg.webp 877w\" data-sizes=\"(max-width: 1600px) 100vw, 1600px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1600px; --smush-placeholder-aspect-ratio: 1600\/1083;\" \/><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\">Funcionalidades principais:<\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Arquitetura modular com importa\u00e7\u00f5es seletivas (enorme!)<\/li>\n\n\n\n<li>Sistema de grade responsivo<\/li>\n\n\n\n<li>Vari\u00e1veis e mixins Sass para personaliza\u00e7\u00e3o<\/li>\n\n\n\n<li>Ampla biblioteca de componentes de interface<\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\">Por Que as Pessoas Adoram o UIkit<\/h4>\n\n\n\n<p>O UIkit talvez tenha uma participa\u00e7\u00e3o de mercado um pouco menor, mas tamb\u00e9m \u00e9 menor em termos de tamanho f\u00edsico, tamanho de arquivo e complexidade.<\/p>\n\n\n\n<p>Sem perder muito em termos de funcionalidade, o UIkit oferece uma biblioteca de componentes de interface de usu\u00e1rio extremamente leve e abrangente. \u00c9 altamente personaliz\u00e1vel com configura\u00e7\u00e3o simples \u2013 usando o processo de constru\u00e7\u00e3o fornecido ou o seu pr\u00f3prio (com Less).<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">O que as pessoas n\u00e3o gostam no UIkit<\/h4>\n\n\n\n<p>Provavelmente, a maior desvantagem do UIkit \u00e9 que ele \u00e9 um pouco mais discreto do que alguns dos frameworks maiores e mais populares.<\/p>\n\n\n\n<p>Mas, voc\u00ea sabe, isso o torna <i>legal<\/i>, certo?<\/p>\n\n\n\n<p>Em uma nota s\u00e9ria: H\u00e1 uma comunidade menor de usu\u00e1rios, o que pode tornar mais desafiador encontrar respostas para perguntas ou encontrar tutoriais sobre implementa\u00e7\u00f5es espec\u00edficas.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">8. <a href=\"https:\/\/ant.design\/\" target=\"_blank\" rel=\"noopener\">Ant Design<\/a><\/h3>\n\n\n\n<p>Ant Design \u00e9 um pouco mais do que um framework CSS; \u00e9 um sistema de design com um conjunto de componentes React de alta qualidade para construir interfaces de usu\u00e1rio ricas e interativas.<\/p>\n\n\n\n<p>Constru\u00eddo e lan\u00e7ado pela Ant Group (empresa matriz da Alibaba), o Ant Design \u00e9 semelhante a sistemas de design lan\u00e7ados por empresas de tecnologia dos EUA como Alphabet e X (anteriormente Google e Twitter).<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Funcionalidades principais:<\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Conjunto abrangente de componentes de UI<\/li>\n\n\n\n<li>Linguagem de design consistente e estilo<\/li>\n\n\n\n<li>Temas personaliz\u00e1veis e apar\u00eancia<\/li>\n\n\n\n<li>Documenta\u00e7\u00e3o extensa e suporte da comunidade<\/li>\n<\/ul>\n\n\n\n<p>Exemplos de sites bem conhecidos que usam Ant Design (sem surpresas): Alibaba, Tencent e Baidu<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Por que as Pessoas Adoram o Ant Design<\/h4>\n\n\n\n<p>Ant Design \u00e9 uma cole\u00e7\u00e3o extremamente robusta de recursos para designers e desenvolvedores. Indo al\u00e9m de apenas o framework CSS, existe um sistema inteiro (ou melhor, uma linguagem) que pode ser aplicado diretamente aos seus pr\u00f3prios projetos.<\/p>\n\n\n\n<p>Existe uma grande comunidade, e o sistema de design foi testado, experimentado e comprovado em empresas e projetos, gerando bilh\u00f5es de d\u00f3lares em receita.<\/p>\n\n\n\n<p>Pense nisso como um modelo de franquia para o seu projeto web.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">O que as pessoas n\u00e3o gostam no Ant Design<\/h4>\n\n\n\n<p>Como voc\u00ea talvez tenha adivinhado, com <i>funcionalidade extensiva<\/i> vem <i>tamanho extensivo de arquivo<\/i>.<\/p>\n\n\n\n<p>O sistema completo do Ant Design (n\u00e3o-minificado) pesa cerca de 100MB.<\/p>\n\n\n\n<p>A outra limita\u00e7\u00e3o \u00e9 que Ant Design \u00e9 bastante espec\u00edfico para projetos React. Se voc\u00ea estiver usando outra biblioteca JavaScript, pode ser dif\u00edcil adaptar os componentes.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">9. <a href=\"https:\/\/primer.style\/\" target=\"_blank\" rel=\"noopener\">Primer<\/a><\/h3>\n\n\n\n<p>O framework CSS por tr\u00e1s do design e dos componentes de interface do usu\u00e1rio do GitHub, Primer \u00e9 uma escolha de framework super popular para desenvolvedores e websites e apps voltados para desenvolvedores.<\/p>\n\n\n\n<p>\u00c9 constru\u00eddo com um prop\u00f3sito espec\u00edfico e parece familiar para quem j\u00e1 passou tempo explorando os reposit\u00f3rios.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Funcionalidades principais:<\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Arquitetura modular com importa\u00e7\u00f5es seletivas<\/li>\n\n\n\n<li>Sistema de grade responsivo<\/li>\n\n\n\n<li>Personaliza\u00e7\u00e3o impulsionada por Sass<\/li>\n\n\n\n<li>Recursos de acessibilidade integrados<\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\">Por Que as Pessoas Adoram Primer<\/h4>\n\n\n\n<p>Primer \u00e9 como uma excelente pe\u00e7a de infraestrutura; \u00c9 discreto e simples, mas realiza o trabalho muito bem. Al\u00e9m disso, saber que a equipe por tr\u00e1s do GitHub criou (e mant\u00e9m) a biblioteca \u00e9 um grande impulso para a longevidade e confiabilidade do projeto.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">O que as pessoas n\u00e3o gostam sobre Primer<\/h4>\n\n\n\n<p>Como voc\u00ea pode ter adivinhado, a est\u00e9tica de design do GitHub n\u00e3o \u00e9 a escolha certa para todos os projetos.<\/p>\n\n\n\n<p>Ent\u00e3o, a principal reclama\u00e7\u00e3o \u00e9 que o Primer n\u00e3o \u00e9 t\u00e3o universal quanto outros frameworks e n\u00e3o \u00e9 uma escolha ideal para projetos ou sites que n\u00e3o foram criados para desenvolvedores. Ele tamb\u00e9m possui um conjunto limitado de componentes de UI que faz sentido no ecossistema do GitHub.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">10. <a href=\"https:\/\/tachyons.io\/\" target=\"_blank\" rel=\"noopener\">Tachyons<\/a><\/h3>\n\n\n\n<p>\u201cInterfaces r\u00e1pidas de carregar, altamente leg\u00edveis e 100% responsivas\u201d \u00e9 a promessa do framework Tachyons.<\/p>\n\n\n\n<p>Constru\u00eddo para usar CSS m\u00ednimo, Tachyons \u00e9 ideal para criar rapidamente uma p\u00e1gina inicial, portf\u00f3lio pessoal ou site de projeto.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Funcionalidades principais:<\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Arquitetura CSS at\u00f4mica com classes de utilidade<\/li>\n\n\n\n<li>Capacidades de design responsivo<\/li>\n\n\n\n<li>Configura\u00e7\u00e3o e instala\u00e7\u00e3o m\u00ednimas<\/li>\n\n\n\n<li>Tamanho de arquivo pequeno para carregamento r\u00e1pido<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" width=\"1600\" height=\"1288\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2023\/06\/Tachyons.jpg\" alt=\"Galeria de Tachyons\" class=\"wp-image-40991 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/06\/Tachyons.jpg.webp 1600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/06\/Tachyons-300x242.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/06\/Tachyons-1024x824.jpg 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/06\/Tachyons-768x618.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/06\/Tachyons-1536x1236.jpg 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/06\/Tachyons-600x483.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/06\/Tachyons-1200x966.jpg.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/06\/Tachyons-730x588.jpg.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/06\/Tachyons-1460x1175.jpg.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/06\/Tachyons-784x631.jpg.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/06\/Tachyons-1568x1262.jpg.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/06\/Tachyons-877x706.jpg.webp 877w\" data-sizes=\"(max-width: 1600px) 100vw, 1600px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1600px; --smush-placeholder-aspect-ratio: 1600\/1288;\" \/><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\">Por que as Pessoas Adoram Tachyons<\/h4>\n\n\n\n<p>As pessoas adoram Tachyons porque \u00e9 um framework r\u00e1pido e simples. \u00c9 leve e carrega rapidamente, o que o torna ideal para projetos pequenos, sites pessoais e outros casos de uso simples.<\/p>\n\n\n\n<p>\u00c9 como o Honda Civic (modelo b\u00e1sico!) de frameworks.<\/p>\n\n\n\n<p>Voc\u00ea sabe o que est\u00e1 recebendo. Funciona. E \u00e9 confi\u00e1vel.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">O que as Pessoas N\u00e3o Gostam Sobre Tachyons<\/h4>\n\n\n\n<p>Exigiria um bom trabalho utilizar Tachyons para um projeto mais complicado ou visualmente complexo, o que significa que n\u00e3o seria a primeira escolha para quem procura mais do que uma ou duas p\u00e1ginas simples, alimentadas por grade.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">11. <a href=\"https:\/\/purecss.io\/\" target=\"_blank\" rel=\"noopener\">Pure (Pure CSS)<\/a><\/h3>\n\n\n\n<p>Yahoo!<\/p>\n\n\n\n<p>Esse \u00e9 um nome que voc\u00ea n\u00e3o ouve todo o tempo. (A menos que voc\u00ea esteja no Jeopardy respondendo uma pergunta sobre <a href=\"https:\/\/www.dreamhost.com\/blog\/pt\/motores-de-busca-alternativos\/\" target=\"_blank\" rel=\"noopener\">alternativas ao Google<\/a>, talvez.)<\/p>\n\n\n\n<p>Mas o framework CSS deles, Pure CSS, tornou-se bastante popular tanto para hackers quanto para empreendedores. Com 23 mil estrelas e 2,5 mil forks no GitHub, \u00e9 definitivamente uma das escolhas mais populares nesta lista.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Funcionalidades principais:<\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Pequeno e leve<\/li>\n\n\n\n<li>Grades responsivas<\/li>\n\n\n\n<li>Constru\u00eddo com base no Normalize.css<\/li>\n\n\n\n<li>Manipula\u00e7\u00e3o de formul\u00e1rios pronta para uso<\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\">Por que as Pessoas Adoram Pure<\/h4>\n\n\n\n<p>PureCSS \u00e9 um powerup favorito para CSS personalizado ou como um complemento a outros frameworks. \u00c9 extremamente leve e oferece muitos componentes \u00fateis que podem ser facilmente adicionados a sistemas existentes.<\/p>\n\n\n\n<p>Isso torna simples adicionar grades, formul\u00e1rios, bot\u00f5es, tabelas e mais ao seu stack atual.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">O que as pessoas n\u00e3o gostam sobre Pure<\/h4>\n\n\n\n<p>Pure funciona melhor como um Servi\u00e7os Adicionais do que como uma estrutura independente. N\u00e3o possui uma biblioteca abrangente como outras solu\u00e7\u00f5es e n\u00e3o oferece temas ou outras funcionalidades que facilitem a personaliza\u00e7\u00e3o da apar\u00eancia e sensa\u00e7\u00e3o do projeto com algumas edi\u00e7\u00f5es r\u00e1pidas.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">12. <a href=\"https:\/\/getmdl.io\/\" target=\"_blank\" rel=\"noopener\">Material Design Lite<\/a><\/h3>\n\n\n\n<p>Falando em Google, al\u00e9m de Materialize, eles tamb\u00e9m disponibilizaram o c\u00f3digo aberto de seu framework Material Design Lite. Como o nome sugere, \u00e9 uma vers\u00e3o mais leve e simples do framework inspirado no Material Design.<\/p>\n\n\n\n<p>Usa menos JavaScript e \u00e9 constru\u00eddo para ser mais acess\u00edvel em uma gama mais ampla de dispositivos e navegadores.<\/p>\n\n\n\n<p>Voc\u00ea pode ver o Material Design Lite (MDL) em pleno funcionamento visitando sites como Google Wallet, Google for Work, o site para desenvolvedores do Google e mais.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Funcionalidades principais:<\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Filosofia do Material Design e componentes de UI<\/li>\n\n\n\n<li>Grande n\u00famero de componentes dispon\u00edveis imediatamente, como bot\u00f5es, cart\u00f5es, sliders, spinners e mais<\/li>\n\n\n\n<li>Sem depend\u00eancias externas<\/li>\n\n\n\n<li>Op\u00e7\u00f5es de personaliza\u00e7\u00e3o de temas<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" width=\"1600\" height=\"1013\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2023\/06\/Material-Design-Lite.jpg\" alt=\"Material Design Lite\" class=\"wp-image-40992 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/06\/Material-Design-Lite.jpg.webp 1600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/06\/Material-Design-Lite-300x190.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/06\/Material-Design-Lite-1024x648.jpg 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/06\/Material-Design-Lite-768x486.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/06\/Material-Design-Lite-1536x972.jpg 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/06\/Material-Design-Lite-600x380.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/06\/Material-Design-Lite-1200x760.jpg.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/06\/Material-Design-Lite-730x462.jpg.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/06\/Material-Design-Lite-1460x924.jpg.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/06\/Material-Design-Lite-784x496.jpg.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/06\/Material-Design-Lite-1568x993.jpg.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/06\/Material-Design-Lite-877x555.jpg.webp 877w\" data-sizes=\"(max-width: 1600px) 100vw, 1600px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1600px; --smush-placeholder-aspect-ratio: 1600\/1013;\" \/><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\">Por que as pessoas amam o MDL<\/h4>\n\n\n\n<p>MDL vem com um conjunto ultrafuncional de componentes para apps, formul\u00e1rios e mais.<\/p>\n\n\n\n<p>Uma vez que \u00e9 baseado nos princ\u00edpios do Material Design, a usabilidade e acessibilidade est\u00e3o em primeiro plano nos designs e nos componentes.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">O que as Pessoas N\u00e3o Gostam Sobre MDL<\/h4>\n\n\n\n<p>MDL est\u00e1 tecnicamente obsoleto nesta fase, portanto, o sistema n\u00e3o receber\u00e1 mais atualiza\u00e7\u00f5es ou suporte.<\/p>\n\n\n\n<p>Al\u00e9m disso, toda a est\u00e9tica pode parecer um pouco limitadora. Parece muito que foi criada para os produtos da Google, para o melhor ou para o pior.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">13. <a href=\"https:\/\/picturepan2.github.io\/spectre\/\" target=\"_blank\" rel=\"noopener\">Spectre.css<\/a><\/h3>\n\n\n\n<p>Spectre \u00e9 outra \u00f3tima op\u00e7\u00e3o para come\u00e7ar rapidamente. Este framework leve e minimalista oferece muitos dos blocos de constru\u00e7\u00e3o necess\u00e1rios para ir do zero ao lan\u00e7amento com um site bonito e componentes de interface do usu\u00e1rio familiares.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Funcionalidades principais:<\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Tamanho de arquivo pequeno (~10KB gzipped)<\/li>\n\n\n\n<li>Grade baseada em Flexbox<\/li>\n\n\n\n<li>Classes de utilidade incorporadas<\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\">Por que as Pessoas Amam a Spectre<\/h4>\n\n\n\n<p>Spectre \u00e9 ideal para uma est\u00e9tica simples, minimalista e limpa. O foco aqui \u00e9 na pura usabilidade e efici\u00eancia \u2014 Voc\u00ea n\u00e3o ter\u00e1 muitos extras e detalhes, mas far\u00e1 o trabalho.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">O que as Pessoas N\u00e3o Gostam Sobre Spectre<\/h4>\n\n\n\n<p>Se voc\u00ea est\u00e1 procurando uma estrutura abrangente com op\u00e7\u00f5es avan\u00e7adas de temas, uma comunidade ativa e toneladas de documenta\u00e7\u00e3o, provavelmente esta n\u00e3o \u00e9 a escolha para voc\u00ea.<\/p>\n\n\n\n<p>Spectre \u00e9 um pouco mais discreto. \u00c9 uma ferramenta capaz para o trabalho, mas n\u00e3o possui nem de perto a popularidade e ado\u00e7\u00e3o como o Foundation ou Bootstrap.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">14. <a href=\"https:\/\/milligram.io\/\" target=\"_blank\" rel=\"noopener\">Milligram<\/a><\/h3>\n\n\n\n<p>Outro framework menos conhecido, Milligram \u00e9 <i>extremamente<\/i> pequeno e leve. Ainda mais do que os outros pequenos frameworks que abordamos.<\/p>\n\n\n\n<p>\u00c9 a op\u00e7\u00e3o definitiva para design minimalista e uma solu\u00e7\u00e3o r\u00e1pida e direta para iniciar um projeto.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Funcionalidades chave:<\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Design minimalista<\/li>\n\n\n\n<li>Muito pequeno (~2kb gzip)<\/li>\n\n\n\n<li>Sistema de grade Flexbox<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" width=\"1600\" height=\"1168\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2023\/06\/Milligram.jpg\" alt=\"Vitrine Milligram\" class=\"wp-image-40993 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/06\/Milligram.jpg.webp 1600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/06\/Milligram-300x219.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/06\/Milligram-1024x748.jpg 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/06\/Milligram-768x561.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/06\/Milligram-1536x1121.jpg 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/06\/Milligram-600x438.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/06\/Milligram-1200x876.jpg.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/06\/Milligram-730x533.jpg.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/06\/Milligram-1460x1066.jpg.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/06\/Milligram-784x572.jpg.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/06\/Milligram-1568x1145.jpg.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/06\/Milligram-877x640.jpg.webp 877w\" data-sizes=\"(max-width: 1600px) 100vw, 1600px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1600px; --smush-placeholder-aspect-ratio: 1600\/1168;\" \/><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\">Por que as Pessoas Amam o Milligram<\/h4>\n\n\n\n<p>Milligram \u00e9 potencialmente o framework CSS mais leve e simples que voc\u00ea pode usar para construir um projeto diretamente da caixa. Ele possui muitas das caracter\u00edsticas mais importantes de outros frameworks, mas com uma pegada surpreendentemente pequena.<\/p>\n\n\n\n<p>As conven\u00e7\u00f5es e classes tamb\u00e9m tornam bastante f\u00e1cil aprender rapidamente.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">O que as Pessoas N\u00e3o Gostam no Milligram<\/h4>\n\n\n\n<p>Milligram sofre das mesmas desvantagens que outros sistemas menos conhecidos da lista. A menor popularidade geral significa que h\u00e1 menos suporte da comunidade. Mesmo assim, a documenta\u00e7\u00e3o est\u00e1 \u00e0 altura de frameworks muito maiores, e a simplicidade pode reduzir a necessidade de qualquer ajuda adicional.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">15. <a href=\"https:\/\/watercss.kognise.dev\/\" target=\"_blank\" rel=\"noopener\">Water.css<\/a><\/h3>\n\n\n\n<p>Water \u00e9 um sistema CSS sem classes que voc\u00ea simplesmente insere em um site est\u00e1tico. N\u00e3o \u00e9 um sistema da forma como os outros frameworks s\u00e3o projetados. Em vez disso, aplica os estilos diretamente nos elementos HTML da p\u00e1gina, oferecendo um sistema de design r\u00e1pido sem a necessidade (ou capacidade) de construir layouts mais complexos.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Funcionalidades principais:<\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Sem classes<\/li>\n\n\n\n<li>Extremamente leve<\/li>\n\n\n\n<li>Duas temas de caixa: modo claro e escuro.<\/li>\n\n\n\n<li>Totalmente responsivo<\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\">Por Que as Pessoas Amam \u00c1gua<\/h4>\n\n\n\n<p>A \u00e1gua \u00e9 \u00f3tima para uma solu\u00e7\u00e3o r\u00e1pida de CSS, um modelo b\u00e1sico de estilos ou um prot\u00f3tipo simples.<\/p>\n\n\n\n<p>Faz exatamente o que promete, sendo uma solu\u00e7\u00e3o \u00f3tima, ultra-r\u00e1pida e sem complica\u00e7\u00f5es.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">O que as Pessoas N\u00e3o Gostam Sobre a \u00c1gua<\/h4>\n\n\n\n<p>\u00c1gua simplesmente n\u00e3o vai funcionar para qualquer projeto complexo de site ou aplicativo. N\u00e3o possui grades, falta muitos componentes que voc\u00ea precisaria para projetos maiores e, em \u00faltima an\u00e1lise, prioriza a simplicidade (ao extremo) em detrimento da personaliza\u00e7\u00e3o ou extensibilidade.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">16. <a href=\"https:\/\/vanillaframework.io\/\" target=\"_blank\" rel=\"noopener\">Vanilla<\/a><\/h3>\n\n\n\n<p>Vanilla Framework ou Vanilla CSS (n\u00e3o deve ser confundido com o termo coloquial vanilla CSS, que se refere ao CSS de n\u00edvel b\u00e1sico ou tradicional) \u00e9 um framework criado e utilizado pela Canonical, a empresa matriz do Ubuntu.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Funcionalidades principais:<\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Arquitetura escal\u00e1vel adequada para grandes projetos web<\/li>\n\n\n\n<li>Sistemas modulares<\/li>\n\n\n\n<li>Constru\u00eddo em Sass<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" width=\"1600\" height=\"1082\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2023\/06\/Vanilla.jpg\" alt=\"Vanilla\" class=\"wp-image-40994 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/06\/Vanilla.jpg.webp 1600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/06\/Vanilla-300x203.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/06\/Vanilla-1024x692.jpg 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/06\/Vanilla-768x519.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/06\/Vanilla-1536x1039.jpg 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/06\/Vanilla-600x406.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/06\/Vanilla-1200x812.jpg.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/06\/Vanilla-730x494.jpg.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/06\/Vanilla-1460x987.jpg.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/06\/Vanilla-784x530.jpg.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/06\/Vanilla-1568x1060.jpg.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/06\/Vanilla-877x593.jpg.webp 877w\" data-sizes=\"(max-width: 1600px) 100vw, 1600px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1600px; --smush-placeholder-aspect-ratio: 1600\/1082;\" \/><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\">Por que as Pessoas Amam Vanilla<\/h4>\n\n\n\n<p>Embora menos popular que grandes frameworks como Bootstrap, Vanilla conta com o apoio, recursos, documenta\u00e7\u00e3o e at\u00e9 suporte de um produto de n\u00edvel empresarial.<\/p>\n\n\n\n<p>H\u00e1 uma an\u00e1lise extremamente detalhada relacionada \u00e0 acessibilidade e notas meticulosamente detalhadas sobre compatibilidade com diferentes navegadores (at\u00e9 a vers\u00e3o espec\u00edfica) e telas.<\/p>\n\n\n\n<p>Os componentes e o estilo s\u00e3o simples e universais tamb\u00e9m.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">O que as pessoas n\u00e3o gostam em Vanilla<\/h4>\n\n\n\n<p>O projeto pode realmente ser um pouco simples para alguns gostos. Ou seja, a est\u00e9tica do design \u00e9 amplamente neutra e funcional, sem muitos enfeites.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Escolha o Melhor Framework CSS para o Seu Projeto<\/h3>\n\n\n\n<p>Agora que compartilhamos 16 op\u00e7\u00f5es incr\u00edveis, como voc\u00ea escolhe a certa?<\/p>\n\n\n\n<p>Como sempre, n\u00e3o h\u00e1 resposta certa ou errada aqui, mas existem algumas perguntas-chave que voc\u00ea pode usar para delimitar suas op\u00e7\u00f5es.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Requisitos e Objetivos do Projeto<\/h3>\n\n\n\n<p>O melhor lugar para come\u00e7ar \u00e9 entender o tipo de projeto que voc\u00ea est\u00e1 construindo. Se voc\u00ea est\u00e1 criando um site simples para um pequeno projeto ou uso pessoal, ent\u00e3o um sistema leve e simples como Water ou Milligram.<\/p>\n\n\n\n<p>Mas se voc\u00ea precisar de algo mais robusto, voc\u00ea pode optar por Foundation ou Bootstrap.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Curva de Aprendizado e Facilidade de Uso<\/h3>\n\n\n\n<p>Em seguida, considere a complexidade do sistema versus suas capacidades ou as de sua equipe. Voc\u00eas s\u00e3o especialistas em explorar novos frameworks CSS? Ou esta \u00e9 a primeira vez que usam algo que n\u00e3o foi criado internamente?<\/p>\n\n\n\n<p>Entender como usar um framework CSS exige um pouco de aprendizado por si s\u00f3. Se voc\u00ea nunca trabalhou com um framework, provavelmente seria melhor escolher uma op\u00e7\u00e3o simples para come\u00e7ar. Depois, uma vez que voc\u00ea tenha entendido a meta, pode mergulhar no aprendizado de sistemas mais complexos.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Personaliza\u00e7\u00e3o e Flexibilidade<\/h3>\n\n\n\n<p>Voc\u00ea est\u00e1 construindo algo que precisa aderir estritamente \u00e0s diretrizes de marca ou design existentes?<\/p>\n\n\n\n<p>Ent\u00e3o, voc\u00ea vai querer escolher uma op\u00e7\u00e3o que tenha temas e personaliza\u00e7\u00e3o integrados para facilitar a adequa\u00e7\u00e3o aos estilos e sistemas de design necess\u00e1rios.<\/p>\n\n\n\n<p>Se voc\u00ea for mais adapt\u00e1vel, pode escolher um sistema com um estilo distinto, mas que carece de alguma flexibilidade dos sistemas mais robustos.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Suporte e Recursos da Comunidade<\/h3>\n\n\n\n<p>Ter uma comunidade de pessoas usando o framework pode fazer toda a diferen\u00e7a. Procure por f\u00f3runs da comunidade, servidores Discord ou subreddits para ver quantas pessoas est\u00e3o ajudando outros usu\u00e1rios e qu\u00e3o ativa \u00e9 a comunidade para cada framework.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Desempenho e Tamanho do Arquivo<\/h3>\n\n\n\n<p>Certifique-se de considerar o tamanho do arquivo e o desempenho dos frameworks que voc\u00ea avalia.<\/p>\n\n\n\n<p>Embora o desempenho do seu site seja influenciado por diversos fatores (como sua <a href=\"https:\/\/www.dreamhost.com\/pt\/hosting\/vps\/\" target=\"_blank\" rel=\"noopener\">hospedagem<\/a>), o CSS tamb\u00e9m pode impactar significativamente suas p\u00e1ginas, tamanhos de arquivos e velocidade de carregamento.<\/p>\n\n\n\n<h2 id=\"summary\" class=\"wp-block-heading\">Continue Construindo<\/h2>\n\n\n\n<p>Esperamos que esta lista de frameworks CSS tenha dado uma ideia de por onde come\u00e7ar no seu pr\u00f3ximo projeto.<\/p>\n\n\n\n<p>Seja construindo o pr\u00f3ximo Facebook ou um site pessoal para mostrar sua cole\u00e7\u00e3o de pedras, adoramos ajudar criativos e empreendedores a construir uma internet bela.<\/p>\n\n\n\n<p>N\u00e3o deixe de se inscrever em nossa newsletter para obter os guias mais recentes, tend\u00eancias e dicas sobre como construir e crescer seu site e neg\u00f3cio.<\/p>\n\n\n\n<div class=\"article-newsletter article-newsletter--gradient\">\n\n\n<h2>Get Content Delivered Straight to Your Inbox<\/h2><p>Subscribe now to receive all the latest updates, delivered directly to your inbox.<\/p><form class=\"nwsl-form\" id=\"newsletter_block_\" novalidate><div class=\"messages\"><\/div><div class=\"form-group\"><label for=\"input_newsletter_block_\"><input type=\"email\"name=\"email\"id=\"input_newsletter_block_\"placeholder=\"Enter your email address\"novalidatedisabled=\"disabled\"\/><\/label><button type=\"submit\"class=\"btn btn--brand\"disabled=\"disabled\"><span>Sign Me Up!<\/span><svg width=\"21\" height=\"14\" viewBox=\"0 0 21 14\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n<path d=\"M13.8523 0.42524L12.9323 1.34521C12.7095 1.56801 12.7132 1.9304 12.9404 2.14865L16.7241 5.7823H0.5625C0.251859 5.7823 0 6.03416 0 6.3448V7.6573C0 7.96794 0.251859 8.2198 0.5625 8.2198H16.7241L12.9405 11.8535C12.7132 12.0717 12.7095 12.4341 12.9323 12.6569L13.8523 13.5769C14.072 13.7965 14.4281 13.7965 14.6478 13.5769L20.8259 7.39879C21.0456 7.17913 21.0456 6.82298 20.8259 6.60327L14.6477 0.42524C14.4281 0.205584 14.0719 0.205584 13.8523 0.42524Z\" fill=\"white\"\/>\n<\/svg>\n<\/button><\/div><\/form><\/div>","protected":false},"excerpt":{"rendered":"<p>No meu tempo, uma folha de estilos era apenas uma folha de estilos. Voc\u00ea codificava o CSS manualmente para cada elemento. E gost\u00e1vamos assim.\u00a0 Ahem. Ok. Desativando o modo rabugento. O CSS evoluiu muito desde os tempos das p\u00e1ginas HTML cruas, e um dos desenvolvimentos mais importantes \u00e9 a cria\u00e7\u00e3o e prolifera\u00e7\u00e3o do CSS [\u2026]<\/p>\n","protected":false},"author":1058,"featured_media":40972,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_yoast_wpseo_metadesc":"","toc_headlines":"[[\"definition\",\"O que \u00e9 um Framework CSS?\"],[\"benefit\",\"Benef\u00edcios de Usar um Framework CSS\"],[\"feature\",\"Principais Funcionalidades de um Framework CSS Moderno\"],[\"frameworks\",\"16 Frameworks CSS Populares\"],[\"summary\",\"Continue Construindo\"]]","hide_toc":false,"footnotes":""},"categories":[14407],"tags":[],"class_list":["post-50807","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-design-de-sites-pt"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v26.3 (Yoast SEO v27.4) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>16 Frameworks CSS Populares que Ajudar\u00e3o Voc\u00ea a Economizar Tempo (Com Estilo) - DreamHost Blog<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www-dev.dreamhost.com\/blog\/pt\/frameworks-css\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"16 Frameworks CSS Populares que Ajudar\u00e3o Voc\u00ea a Economizar Tempo (Com Estilo)\" \/>\n<meta property=\"og:description\" content=\"No meu tempo, uma folha de estilos era apenas uma folha de estilos. Voc\u00ea codificava o CSS manualmente para cada elemento. E gost\u00e1vamos assim.\u00a0 Ahem. Ok. Desativando o modo rabugento. O CSS evoluiu muito desde os tempos das p\u00e1ginas HTML cruas, e um dos desenvolvimentos mais importantes \u00e9 a cria\u00e7\u00e3o e prolifera\u00e7\u00e3o do CSS [\u2026]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www-dev.dreamhost.com\/blog\/pt\/frameworks-css\/\" \/>\n<meta property=\"og:site_name\" content=\"DreamHost Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/DreamHost\/\" \/>\n<meta property=\"article:published_time\" content=\"2023-06-22T14:00:54+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-05-26T19:56:27+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2023\/06\/15-CSS-Frameworks-to-Help-You-Build-Faster-Hero-Image.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1460\" \/>\n\t<meta property=\"og:image:height\" content=\"1095\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Ian Hernandez\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@dreamhost\" \/>\n<meta name=\"twitter:site\" content=\"@dreamhost\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Ian Hernandez\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"23 minutes\" \/>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"16 Frameworks CSS Populares que Ajudar\u00e3o Voc\u00ea a Economizar Tempo (Com Estilo) - DreamHost Blog","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www-dev.dreamhost.com\/blog\/pt\/frameworks-css\/","og_locale":"en_US","og_type":"article","og_title":"16 Frameworks CSS Populares que Ajudar\u00e3o Voc\u00ea a Economizar Tempo (Com Estilo)","og_description":"No meu tempo, uma folha de estilos era apenas uma folha de estilos. Voc\u00ea codificava o CSS manualmente para cada elemento. E gost\u00e1vamos assim.\u00a0 Ahem. Ok. Desativando o modo rabugento. O CSS evoluiu muito desde os tempos das p\u00e1ginas HTML cruas, e um dos desenvolvimentos mais importantes \u00e9 a cria\u00e7\u00e3o e prolifera\u00e7\u00e3o do CSS [\u2026]","og_url":"https:\/\/www-dev.dreamhost.com\/blog\/pt\/frameworks-css\/","og_site_name":"DreamHost Blog","article_publisher":"https:\/\/www.facebook.com\/DreamHost\/","article_published_time":"2023-06-22T14:00:54+00:00","article_modified_time":"2025-05-26T19:56:27+00:00","og_image":[{"width":1460,"height":1095,"url":"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2023\/06\/15-CSS-Frameworks-to-Help-You-Build-Faster-Hero-Image.jpg","type":"image\/jpeg"}],"author":"Ian Hernandez","twitter_card":"summary_large_image","twitter_creator":"@dreamhost","twitter_site":"@dreamhost","twitter_misc":{"Written by":"Ian Hernandez","Est. reading time":"23 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www-dev.dreamhost.com\/blog\/pt\/frameworks-css\/#article","isPartOf":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/pt\/frameworks-css\/"},"author":{"name":"Ian Hernandez","@id":"https:\/\/www-dev.dreamhost.com\/blog\/#\/schema\/person\/220faf2464d5ae08e41cf5f3b28fdc96"},"headline":"16 Frameworks CSS Populares que Ajudar\u00e3o Voc\u00ea a Economizar Tempo (Com Estilo)","datePublished":"2023-06-22T14:00:54+00:00","dateModified":"2025-05-26T19:56:27+00:00","mainEntityOfPage":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/pt\/frameworks-css\/"},"wordCount":5101,"publisher":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/#organization"},"image":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/pt\/frameworks-css\/#primaryimage"},"thumbnailUrl":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/06\/15-CSS-Frameworks-to-Help-You-Build-Faster-Hero-Image.jpg","articleSection":["Design de Sites"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www-dev.dreamhost.com\/blog\/pt\/frameworks-css\/","url":"https:\/\/www-dev.dreamhost.com\/blog\/pt\/frameworks-css\/","name":"16 Frameworks CSS Populares que Ajudar\u00e3o Voc\u00ea a Economizar Tempo (Com Estilo) - DreamHost Blog","isPartOf":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/pt\/frameworks-css\/#primaryimage"},"image":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/pt\/frameworks-css\/#primaryimage"},"thumbnailUrl":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/06\/15-CSS-Frameworks-to-Help-You-Build-Faster-Hero-Image.jpg","datePublished":"2023-06-22T14:00:54+00:00","dateModified":"2025-05-26T19:56:27+00:00","breadcrumb":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/pt\/frameworks-css\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www-dev.dreamhost.com\/blog\/pt\/frameworks-css\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www-dev.dreamhost.com\/blog\/pt\/frameworks-css\/#primaryimage","url":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/06\/15-CSS-Frameworks-to-Help-You-Build-Faster-Hero-Image.jpg","contentUrl":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/06\/15-CSS-Frameworks-to-Help-You-Build-Faster-Hero-Image.jpg","width":1460,"height":1095,"caption":"15 CSS Frameworks to Help You Build Faster Hero Image"},{"@type":"BreadcrumbList","@id":"https:\/\/www-dev.dreamhost.com\/blog\/pt\/frameworks-css\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/dhblog.dream.press\/blog\/"},{"@type":"ListItem","position":2,"name":"16 Frameworks CSS Populares que Ajudar\u00e3o Voc\u00ea a Economizar Tempo (Com Estilo)"}]},{"@type":"WebSite","@id":"https:\/\/www-dev.dreamhost.com\/blog\/#website","url":"https:\/\/www-dev.dreamhost.com\/blog\/","name":"DreamHost Blog","description":"","publisher":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www-dev.dreamhost.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www-dev.dreamhost.com\/blog\/#organization","name":"DreamHost","url":"https:\/\/www-dev.dreamhost.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www-dev.dreamhost.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/dhblog.dream.press\/blog\/wp-content\/uploads\/2019\/01\/dh_logo-blue-2.png","contentUrl":"https:\/\/dhblog.dream.press\/blog\/wp-content\/uploads\/2019\/01\/dh_logo-blue-2.png","width":1200,"height":168,"caption":"DreamHost"},"image":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/DreamHost\/","https:\/\/x.com\/dreamhost","https:\/\/www.instagram.com\/dreamhost\/","https:\/\/www.linkedin.com\/company\/dreamhost\/","https:\/\/www.youtube.com\/user\/dreamhostusa"]},{"@type":"Person","@id":"https:\/\/www-dev.dreamhost.com\/blog\/#\/schema\/person\/220faf2464d5ae08e41cf5f3b28fdc96","name":"Ian Hernandez","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/04\/ian-hernandez-dreamhost-150x150.png","url":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/04\/ian-hernandez-dreamhost-150x150.png","contentUrl":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/04\/ian-hernandez-dreamhost-150x150.png","caption":"Ian Hernandez"},"description":"Ian is a Product Designer based in Los Angeles, California. He is responsible for driving brand and product design at DreamHost, developing and maintaining our internal design system, and writing frontend code when he can. In his free time, he enjoys walking his dog, learning history, and discovering new music online and irl. Connect with him on LinkedIn: https:\/\/www.linkedin.com\/in\/ianhernandez23\/","url":"https:\/\/www-dev.dreamhost.com\/blog\/author\/ianh\/"}]}},"lang":"pt","translations":{"pt":50807,"es":41029,"en":40971,"de":50810,"pl":50812,"ru":50814,"uk":50816,"it":68801,"fr":71188,"nl":71205},"pll_sync_post":[],"_links":{"self":[{"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/posts\/50807","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/users\/1058"}],"replies":[{"embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/comments?post=50807"}],"version-history":[{"count":4,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/posts\/50807\/revisions"}],"predecessor-version":[{"id":63930,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/posts\/50807\/revisions\/63930"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/media\/40972"}],"wp:attachment":[{"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/media?parent=50807"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/categories?post=50807"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/tags?post=50807"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}