{"id":7306,"date":"2018-01-11T11:05:45","date_gmt":"2018-01-11T13:05:45","guid":{"rendered":"https:\/\/www.mxcursos.com\/blog\/?p=7306"},"modified":"2019-03-16T02:24:32","modified_gmt":"2019-03-16T05:24:32","slug":"frameworks-css","status":"publish","type":"post","link":"https:\/\/www.mxcursos.com\/blog\/frameworks-css\/","title":{"rendered":"Framework’s CSS – Crie sites de forma r\u00e1pida"},"content":{"rendered":"

Os Framework’s CSS<\/strong> s\u00e3o um conjunto de configura\u00e7\u00f5es pr\u00e9-definidas para criar estrutura que facilite a cria\u00e7\u00e3o de projetos como sites, blogs ou Dashboards.<\/p>\n

Muitos deles vem com as conhecidas Grids, importantes para design responsivo, componentes como bot\u00f5es, formul\u00e1rios, tabelas, e ainda vem acompanhados com Javascript para criar efeitos e recursos como modais, slideshows ou carrossel.<\/p>\n

Um Framework \u00e9 um conjunto de abstra\u00e7\u00f5es que v\u00e3o definir um fluxo de uma aplica\u00e7\u00e3o. Os Framework’s CSS segue esse linha, com defini\u00e7\u00f5es para seu HTML e classes para CSS, permitindo assim que voc\u00ea estruture seus projetos.<\/p>\n

Entregar um projeto r\u00e1pido faz toda diferen\u00e7a, principalmente quando voc\u00ea precisa se preocupar com detalhes que nos Framework’s CSS j\u00e1 est\u00e3o presentes.<\/p>\n

Quer saber mais sobre CSS? Veja nossa lista de post sobre este assunto<\/a>.<\/p>\n

O surgimento deles vieram da necessidade de se trabalhar com sites responsivos (Adapt\u00e1veis e flex\u00edveis para dispositivos m\u00f3veis), cria\u00e7\u00e3o das grids e tamb\u00e9m dos modelos mobile first, que \u00e9 uma t\u00e9cnica que d\u00e1 \u00eanfase primeiro em design e experi\u00eancia em dispositivos m\u00f3veis.<\/p>\n

Algo muito interessante em Framework’s CSS \u00e9 a popularidade. Isso ajuda impulsionar a evolu\u00e7\u00e3o do CSS, pois trazem solu\u00e7\u00f5es que mais tarde s\u00e3o implementadas nativamente.<\/p>\n

Vamos listar alguns Framework’s CSS que v\u00e3o aumentar sua produtividade.<\/p>\n

Bootstrap<\/h3>\n

\"Framework's<\/a><\/p>\n

O Bootstrap \u00e9 um dos Framework’s CSS mais populares. No primeiro momento ele foi criado para ser usado internamente no Twitter por\u00a0Mark Otto e Jacob Thornton.\u00a0 Surgiu com nome de Twitter Blueprint e em 2011 foi lan\u00e7ado como open source e teve o nome alterado para Bootstrap.<\/p>\n

Na vers\u00e3o 2, inclui o web responsivo. J\u00e1 na vers\u00e3o 3 mudou o conceito para mobile first e na vers\u00e3o 4 Sass e FlexBox.<\/p>\n

Acesse o site e conhe\u00e7a este Framework CSS.<\/a><\/p>\n

Pure.css<\/h3>\n

\"Framework's<\/a><\/p>\n

O Pure.css \u00e9 Framework CSS do Yahoo. Seu lan\u00e7amento p\u00fablico foi em 2013. Sua forma de escrever o CSS se baseia no SMACSS<\/a>.<\/p>\n

Ele \u00e9 modular e pequeno. Minificado com gzip, ele chega a 3.8 KB. Possui grid, menu, bot\u00f5es, entre outros.<\/p>\n

Acesse o site e conhe\u00e7a este Framework CSS.<\/a><\/p>\n

Materialize<\/h3>\n

\"Framework's<\/a><\/p>\n

O Materialize CSS \u00e9 baseado o Material Design. Trata-se de um conjunto de princ\u00edpio de design para melhorar a experi\u00eancia do usu\u00e1rio.<\/p>\n

O Material Design foi criado pelo Google e o primeiro release do MaterializeCSS foi em\u00a0 2014. A equipe respons\u00e1vel pelo projeto \u00e9 composta por Alvin Wang, Alan Chang, Alex Mark e Kevin Louie.<\/p>\n

Acesse o site e conhe\u00e7a este Framework CSS<\/a>.<\/p>\n

Foundation<\/h3>\n

\"Framework's<\/a><\/h3>\n

O Foundation foi lan\u00e7ado publicamente em 2011 pela empresa\u00a0ZURB<\/strong>. Mas ele surge em 2008 com como guia de estilo do ZURB e em 2010 foi unificado e dado nome de Foundation.<\/p>\n

Desde do inicio seu foco era cria\u00e7\u00e3o de design responsivo para poder facilitar a constru\u00e7\u00e3o de sites.\u00a0 Ele possui estilos para bot\u00f5es, formul\u00e1rio, layout responsivo, tipografia, etc.<\/p>\n

Acesse o site e conhe\u00e7a este Framework CSS<\/a>.<\/p>\n

Bulma.io<\/h3>\n

\"Framework's<\/a><\/h3>\n

Bulma.io \u00e9 um Framework CSS baseado em Flexbox. Foi criado pelo Jeremy Thomas e foi inspirado no Bootstrap.<\/p>\n

Seu primeiro release foi em 2016.\u00a0 Ele possui diversos componentes para layout, formul\u00e1rio, bot\u00f5es, etc.<\/p>\n

Acesse o site e conhe\u00e7a este Framework CSS.<\/a><\/p>\n

Mas precisamos ainda utilizar Framework’s CSS?<\/h3>\n

Precisar n\u00e3o \u00e9 bem a palavra, mas a utiliza\u00e7\u00e3o deles vai facilitar a cria\u00e7\u00e3o de recursos. Eles tamb\u00e9m v\u00e3o evoluindo gradativamente, pois por tr\u00e1s de cada Framework, tem sempre uma comunidade apaixonada e ativa.<\/p>\n

Um cuidado que precisa ter \u00e9 devido \u00e0 padroniza\u00e7\u00e3o dos elementos gr\u00e1ficos, para que tudo n\u00e3o fique com a mesma apar\u00eancia.<\/p>\n

Ou seja, d\u00ea asas \u00e0 sua imagina\u00e7\u00e3o e personalize bem seus projetos criados com Framework’s CSS.<\/p>\n

Usa algum desses? Tem sugest\u00f5es de outros?<\/p>\n

Deixe um coment\u00e1rio abaixo.<\/p>\n","protected":false},"excerpt":{"rendered":"

Os Framework’s CSS s\u00e3o um conjunto de configura\u00e7\u00f5es pr\u00e9-definidas para criar estrutura que facilite a cria\u00e7\u00e3o de projetos como sites, blogs ou Dashboards. Muitos deles vem com as conhecidas Grids, importantes para design responsivo, componentes como bot\u00f5es, formul\u00e1rios, tabelas, e ainda vem acompanhados com Javascript para criar efeitos e recursos como modais, slideshows ou carrossel. […]<\/p>\n","protected":false},"author":67,"featured_media":8044,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[678],"tags":[],"class_list":["post-7306","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-desenvolvimento"],"_links":{"self":[{"href":"https:\/\/www.mxcursos.com\/blog\/wp-json\/wp\/v2\/posts\/7306","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.mxcursos.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.mxcursos.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.mxcursos.com\/blog\/wp-json\/wp\/v2\/users\/67"}],"replies":[{"embeddable":true,"href":"https:\/\/www.mxcursos.com\/blog\/wp-json\/wp\/v2\/comments?post=7306"}],"version-history":[{"count":0,"href":"https:\/\/www.mxcursos.com\/blog\/wp-json\/wp\/v2\/posts\/7306\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.mxcursos.com\/blog\/wp-json\/wp\/v2\/media\/8044"}],"wp:attachment":[{"href":"https:\/\/www.mxcursos.com\/blog\/wp-json\/wp\/v2\/media?parent=7306"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.mxcursos.com\/blog\/wp-json\/wp\/v2\/categories?post=7306"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.mxcursos.com\/blog\/wp-json\/wp\/v2\/tags?post=7306"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}