{"id":3158,"date":"2014-11-12T00:33:31","date_gmt":"2014-11-12T02:33:31","guid":{"rendered":"https:\/\/www.kadunew.com\/blog\/?p=3158"},"modified":"2015-04-23T20:59:29","modified_gmt":"2015-04-23T23:59:29","slug":"introducao-ao-foundation-framework","status":"publish","type":"post","link":"https:\/\/www.kadunew.com\/blog\/web-design\/introducao-ao-foundation-framework","title":{"rendered":"Introdu\u00e7\u00e3o ao Foundation Framework"},"content":{"rendered":"<p><strong>Zurb Foundation \u00e9 um framework Front End<\/strong> para o desenvolvimento responsivo de forma r\u00e1pida priorizando o valor sem\u00e2ntico dos elementos, mantendo uma estrutura HTML limpa e de carregamento r\u00e1pido. Utiliza o conceito mobile first e <a href=\"https:\/\/www.kadunew.com\/blog\/web-design\/layout-responsivo-melhoria-progressiva\">melhoria progressiva (Progressive Enhancement)<\/a> para cria\u00e7\u00e3o de design responsivo. Voc\u00ea pode fazer o download apenas de partes do framework que lhe interessa. Caso queira apenas usar o seu grid, ou bot\u00f5es, formul\u00e1rios, etc.<\/p>\n<div class=\"obs\">\nFoundation na sua \u00faltima vers\u00e3o <strong>n\u00e3o oferece suporte para IE8 e anteriores<\/strong>. Caso queira suporte a esses navegadores use a vers\u00e3o 3.2\n<\/div>\n<h2>O que \u00e9 um framework?<\/h2>\n<p>Framework \u00e9 uma esp\u00e9cie de alicerce que n\u00f3s desenvolvedores usamos para desenvolver sistemas, sites, aplicativos, etc. Eles nos trazem diversos recursos j\u00e1 pr\u00e9 configuradores. Para usar um framework voc\u00ea precisa ter como pr\u00e9 requisito um conhecimento mesmo que b\u00e1sico da linguagem alvo do framework. Foundation \u00e9 um framework de CSS para Front Ends, logo voc\u00ea precisa ter um conhecimento b\u00e1sico de HTML e CSS.<\/p>\n<p>Com o Foundation, por exemplo, conseguimos criar layouts de sites sem digitar uma linha de CSS sequer. Mas claro, caso precise criar um layout mais sofisticado podemos usar a base do framework mais o nosso pr\u00f3prio CSS.<\/p>\n<p>Site oficial: <a href=\"http:\/\/Foundation.zurb.com\">http:\/\/Foundation.zurb.com<\/a><\/p>\n<h2>O que \u00e9 o Zurb Foundation? <\/h2>\n<p>Segundo seus criadores o Foundation \u00e9 o Framework para Frond End mais avan\u00e7ado de todos, e de todas suas vantagens podemos destacar:<\/p>\n<ul>\n<li><strong>Sem\u00e2ntica:<\/strong> pensando em performance toda a marca\u00e7\u00e3o utilizada respeita a <a href=\"https:\/\/www.kadunew.com\/blog\/html\/a-importancia-do-html-semantico\" title=\"HTML sem\u00e2ntico\">sem\u00e2ntica dos elementos HTML<\/a> obtendo um c\u00f3digo mais limpo e bem organizado.<\/li>\n<li><strong>Filosofia Mobile-First:<\/strong> o framework adota o conceito de mobile-first para o desenvolvimento, facilitando a cria\u00e7\u00e3o de layoust responsivos. Dessa forma podemos aplicar tamb\u00e9m outro conceito t\u00e3o fundamental no desenvolvimento de sistemas web, a melhoria progressiva.\n<\/li>\n<li><strong>Personalizar o framework:<\/strong> Sem d\u00favida uma grande vantagem \u00e9 a possibilidade de personalizar o framework na hora de fazer o download do framework. Voc\u00ea pode escolher quais os plugins ser\u00e3o usados, cores dos elementos, quantidade e largura de colunas, etc.\n<\/li>\n<\/ul>\n<h3>Plugins<\/h3>\n<p>Contemplam o framework um arquivo principal de JavaScrip e mais arquivos adicionais de plugins, eles est\u00e3o no pacote de arquivos baixados. \u00c9 importante ressaltar que o framework permite voc\u00ea baixar um vers\u00e3o personalizada de acordo com suas necessidades, logo, no momento que estiver personalizando voc\u00ea pode escolher quais arquivos de plugin gostaria de baixar.<\/p>\n<p>Entre os arquivos de plugins dispon\u00edvel para download podemos citar os seguintes:<\/p>\n<ul>\n<li><em>foundation.abide.js<\/em>: utilizado para <a href=\"https:\/\/www.kadunew.com\/blog\/html\/validacao-de-formulario-com-html5\" title=\"Valida\u00e7\u00e3o de formul\u00e1rio com HTML5\">valida\u00e7\u00e3o de campos de formul\u00e1rios com HTML5<\/a>;<\/li>\n<li><em>foundation.accordion.js<\/em>: utilizado para criar efeitos acorde\u00e3o;<\/li>\n<li><em>foundation.alert.js<\/em>: utilizado para criar mensagens de alerta (erro, sucesso&#8230;);<\/li>\n<li><em>foundation.interchange.js<\/em>: plugin destinado ao carregamento din\u00e2mico de acordo com o dispositivo do usu\u00e1rio;<\/li>\n<li><em>foundation.reveal.js<\/em>: plugin destinado a cria\u00e7\u00e3o de janelas modais.<\/li>\n<\/ul>\n<div class=\"obs\">\nUm diferencial do Foundation sem sombra de d\u00favida \u00e9 sua documenta\u00e7\u00e3o detalhada e cheia de exemplos. Documenta\u00e7\u00e3o do framework \u00e9 leitura obrigat\u00f3ria.<br \/>\nDocumenta\u00e7\u00e3o oficial: <a href=\"http:\/\/foundation.zurb.com\/docs\/\">http:\/\/foundation.zurb.com\/docs\/<\/a>\n<\/div>\n<h2>Instalando o Zurb Foundation<\/h2>\n<p>Na p\u00e1gina de download (<a href=\"http:\/\/Foundation.zurb.com\/develop\/download.html\">http:\/\/Foundation.zurb.com\/develop\/download<\/a>) voc\u00ea pode escolher qual a vers\u00e3o \u00e9 mais apropriada para seu projeto. Voc\u00ea pode escolher o pacote mais completo onde ter\u00e1 todos os recursos do Foundation. Se deseja usar SASS h\u00e1 uma vers\u00e3o pr\u00f3pria para isso. Tem a op\u00e7\u00e3o tamb\u00e9m de baixar uma vers\u00e3o mais b\u00e1sica. Essa vers\u00e3o inclui apenas tipografia, grid, bot\u00f5es&#8230; (estrutura em geral) <\/p>\n<p>Caso voc\u00ea queira personalizar o framework voc\u00ea pode escolher a op\u00e7\u00e3o <em>\u201cCustom\u201d<\/em>. Nela voc\u00ea pode marcar apenas as op\u00e7\u00f5es que deseja utilizar. Por exemplo, no seu projeto voc\u00ea deseja usar apenas o grid do framework, ao inv\u00e9s de baixar todos ou parte dos recursos escolha apenas o recurso de grids.<\/p>\n<h2>No\u00e7\u00f5es b\u00e1sicas de grid<\/h2>\n<p>Grid \u00e9 a estrutura do Foundation. Para trabalhar e entender os grids precisamos enxergar o layout como se fosse linhas e colunas, formando uma grade. Criamos essas linhas e colunas aplicando classes <a href=\"https:\/\/www.kadunew.com\/blog\/category\/css\">CSS<\/a> para nossos elementos HTML. Sempre come\u00e7amos a criar uma grid com uma linha. Em seguida uma s\u00e9rie de colunas aninhadas dentro das linhas. Cada grupo de colunas dentro de uma linha geralmente deve ter um total de 12 colunas no padr\u00e3o do Foundation, mas h\u00e1 recursos mais avan\u00e7ados que permite que voc\u00ea altere essa regra.<\/p>\n<p>Temos basicamente tr\u00eas tipos de grids no framework:<\/p>\n<ul>\n<li><strong>Grid small:<\/strong> define as larguras de <em>small-1<\/em> at\u00e9 <em>small-12<\/em>. Quando usamos essa classe estamos nos referindo a larguras de viewport at\u00e9 640px (40em).\n<\/li>\n<li><strong>Grid medium:<\/strong> define as larguras de <em>medium-1<\/em> at\u00e9 <em>medium-12<\/em>. Quando usamos essa classe estamos nos referindo  a larguras de viewport de 641 px at\u00e9 1024px.<\/li>\n<li><strong>Grid large:<\/strong> define as larguras de <em>large-1<\/em> at\u00e9 <em>large-12<\/em>. Essa classe se destina a larguras de viewport que v\u00e3o de 1025px at\u00e9 1440px.<\/li>\n<\/ul>\n<p>Para uma maior flexibilidade a unidade de medida utilizada pelo Foundation \u00e9 o <em>em<\/em>. Pelo padr\u00e3o do Foundation 1em = 16px 1\/16 = 0.0625em. 1pixel \u00e9 igual a 0.0625em.<\/p>\n<p>Foundation oferece por padr\u00e3o uma grade (grid) de 12 colunas que suporta praticamente todas as telas dos dispositivos atuais. E o mais legal, n\u00e3o precisamos, na maioria das vezes, nos preocupar com ajustes de elementos e media queres. O framework se encarrega desse trabalho.<\/p>\n<p>Se quisermos criar uma grid de uma linha e tr\u00eas colunas criamos primeiro uma linha com a classe <code>row<\/code> e tr\u00eas colunas com largura igual a 4 (3X4=12).  \u00c9 interessante sempre fechar esse valor de 12.<\/p>\n<pre class=\"brush: xml; title: HTML; notranslate\" title=\"HTML\">\r\n  &lt;div class=&quot;row&quot;&gt;\r\n    &lt;div class=&quot;small-4 medium-4 large-4 columns&quot;&gt;Coluna 4&lt;\/div&gt;\r\n    &lt;div class=&quot;small-4 medium-4 large-4 columns&quot;&gt;Coluna 4&lt;\/div&gt;\r\n    &lt;div class=&quot;small-4 medium-4 large-4 columns&quot;&gt;Coluna 4&lt;\/div&gt;\r\n  &lt;\/div&gt;\r\n<\/pre>\n<h2>Tipografia (Typography)<\/h2>\n<h3>Cabe\u00e7alhos<\/h3>\n<p>Por padr\u00e3o o Foundation framework tr\u00e1s tr\u00eas tipos de estiliza\u00e7\u00e3o para elementos de cabe\u00e7alho h1 at\u00e9 o h6. Abaixo um exemplo que se aplica a todos elementos de cabe\u00e7alho.<\/p>\n<pre class=\"brush: xml; title: HTML; notranslate\" title=\"HTML\">\r\n&lt;h1&gt; Estiliza\u00e7\u00e3o de exemplo&lt;\/h1&gt;\r\n&lt;h1 class=&quot;subheader&quot;&gt; Estiliza\u00e7\u00e3o de exemplo &lt;\/h1&gt;\r\n&lt;h1&gt;h1 &lt;small&gt; Estiliza\u00e7\u00e3o de exemplo &lt;\/small&gt;&lt;\/h1&gt;\r\n<\/pre>\n<p>Partindo dessa estiliza\u00e7\u00e3o padr\u00e3o voc\u00ea pode alterar, sobrescrever ou adicionar sua pr\u00f3pria estiliza\u00e7\u00e3o. <\/p>\n<h3>Listas<\/h3>\n<p>O framework trabalha com os tr\u00eas tipos de listas dispon\u00edveis no HTML: lista ordenada, lista n\u00e3o ordenada e lista de defini\u00e7\u00e3o. A estiliza\u00e7\u00e3o ocorre com ou sem classe. Classes dispon\u00edveis para o elemento <code>ul<\/code> s\u00e3o <em>.circle<\/em>, <em>.square<\/em> e <em>.disc<\/em>. Caso queira retirar os marcadores usamos a classe <em>.no-bullet<\/em>. Caso deseje deixar sua lista na horizontal \u00e9 s\u00f3 declarar a classe <em>.inline-list<\/em> para o elemento da lista. <\/p>\n<pre class=\"brush: xml; title: HTML; notranslate\" title=\"HTML\">\r\n&lt;ul class=&quot;inline-list&quot;&gt;\r\n  &lt;li&gt;&lt;a href=&quot;&quot;&gt;Item 1&lt;\/a&gt;&lt;\/li&gt;\r\n  &lt;li&gt;&lt;a href=&quot;&quot;&gt;Item 2&lt;\/a&gt;&lt;\/li&gt;\r\n  &lt;li&gt;&lt;a href=&quot;&quot;&gt;Item 3&lt;\/a&gt;&lt;\/li&gt;\r\n  &lt;li&gt;&lt;a href=&quot;&quot;&gt;Item 4&lt;\/a&gt;&lt;\/li&gt;\r\n&lt;\/ul&gt;\r\n<\/pre>\n<h3>R\u00f3tulos(Label)<\/h3>\n<p>R\u00f3tulos s\u00e3o utilizados para dar destaque a uma parte do seu texto, que n\u00e3o seja link nem bot\u00e3o utilizamos elas.<\/p>\n<pre class=\"brush: xml; title: HTML; notranslate\" title=\"HTML\">\r\n&lt;span class=&quot;label&quot;&gt;&lt;\/span&gt;\r\n&lt;span class=&quot;label success&quot;&gt;&lt;\/span&gt;\r\n&lt;span class=&quot;label alert&quot;&gt;&lt;\/span&gt;\r\n&lt;span class=&quot;label seconndary&quot;&gt;&lt;\/span&gt;\r\n&lt;span class=&quot;label radius&quot;&gt;&lt;\/span&gt;\r\n&lt;span class=&quot;label round&quot;&gt;&lt;\/span&gt;\r\n<\/pre>\n<h3>Keystrokes<\/h3>\n<p>Elemento do HTML usado para marcar uma entrada do usu\u00e1rio (tecla de atalho, por exemplo) ou comandos de voz.<\/p>\n<pre class=\"brush: xml; title: HTML; notranslate\" title=\"HTML\">\r\n&lt;kbd&gt;CTRL&lt;\/kbd&gt; + &lt;kbd&gt;V&lt;\/kbd&gt;\r\n<\/pre>\n<h3>Bot\u00f5es (Buttons)<\/h3>\n<p>Criamos bot\u00f5es no framework aplicando a classe <em>button<\/em>. Essa classe cria um bot\u00e3o no formato padr\u00e3o do Foundation. Utilizando outras em comjunto com essa conseguimos fazer bot\u00f5es mais sofisticados.<\/p>\n<pre class=\"brush: xml; title: HTML; notranslate\" title=\"HTML\">\r\n&lt;div class=&quot;large-3 columns&quot;&gt;\r\n        &lt;a href=&quot;#&quot; class=&quot;button&quot;&gt;Bot\u00e3o padr\u00e3o&lt;\/a&gt;\r\n        &lt;a href=&quot;#&quot; class=&quot;button tiny&quot;&gt;Bot\u00e3o tiny&lt;\/a&gt;\r\n        &lt;button class=&quot;button small&quot;&gt;Bot\u00e3o small&lt;\/button&gt;\r\n        &lt;button class=&quot;button large&quot;&gt;Bot\u00e3o large&lt;\/button&gt;\r\n        &lt;a href=&quot;#&quot; class=&quot;button success&quot;&gt;Bot\u00e3o success&lt;\/a&gt;\r\n        &lt;a href=&quot;#&quot; class=&quot;button alert&quot;&gt;Bot\u00e3o alert&lt;\/a&gt;\r\n        &lt;button class=&quot;button secondary&quot;&gt;Bot\u00e3o secondary&lt;\/button&gt;\r\n  &lt;\/div&gt;\r\n<\/pre>\n<p>Podemos utilizar tamb\u00e9m a op\u00e7\u00e3o de grupo de bot\u00f5es. Utilizamos isso principalmente para criamos barra de navega\u00e7\u00e3o e menus. Criamos isso usando a classe <em>button-group<\/em> com classe b\u00e1sica e depois podemos ir modificando nosso elemento com outras classes. Veja o exemplo abaixo.<\/p>\n<pre class=\"brush: xml; title: HTML; notranslate\" title=\"HTML\">\r\n&lt;ul class=&quot;button-group radius&quot;&gt;\r\n    &lt;li&gt;&lt;a href=&quot;#&quot; class=&quot;button success small&quot;&gt;Gravar&lt;\/a&gt;&lt;\/li&gt;\r\n    &lt;li&gt;&lt;a href=&quot;#&quot; class=&quot;button success small&quot;&gt;Importar&lt;\/a&gt;&lt;\/li&gt;\r\n    &lt;li&gt;&lt;a href=&quot;#&quot; class=&quot;button success small&quot;&gt;Exportar&lt;\/a&gt;&lt;\/li&gt;\r\n    &lt;li&gt;&lt;a href=&quot;#&quot; class=&quot;button success small&quot;&gt;Enviar&lt;\/a&gt;&lt;\/li&gt;\r\n&lt;\/ul&gt;\r\n<\/pre>\n<h2>Formul\u00e1rios (forms)<\/h2>\n<p>Utilizando as classes de formul\u00e1rios do Foundation conseguimos criar rapidamente estiliza\u00e7\u00f5es em elementso do tipo input, chave on\/off, slider, entrada de dados personalizados, etiquetas, a\u00e7\u00f5es, valida\u00e7\u00f5es e muito mais.<br \/>\nAbaixo um exemplo de <a href=\"https:\/\/www.kadunew.com\/blog\/css\/validacao-de-formulario-com-foundation\" title=\"Valida\u00e7\u00e3o de formul\u00e1rio com Foundation\">valida\u00e7\u00e3o de formul\u00e1rio com Foundation<\/a>. O formul\u00e1rio verifica se o campo foi preenchido corretamente quando tentamos enviar os dados.<\/p>\n<pre class=\"brush: xml; title: HTML; notranslate\" title=\"HTML\">\r\n  &lt;form data-abide&gt;\r\n  &lt;fieldset&gt;\r\n    &lt;legend&gt;Abide - exemplo&lt;\/legend&gt;\r\n    &lt;div class=&quot;row&quot;&gt;\r\n      &lt;div class=&quot;large-12 columns&quot;&gt;\r\n        &lt;label for=&quot;nome&quot;&gt;Nome (*)\r\n          &lt;input type=&quot;text&quot; required name=&quot;nome&quot; id=&quot;nome&quot; pattern=&quot;\/^&#x5B;a-zA-Z]&#x5B;a-zA-Z0-9-_\\.]{1,20}$\/&quot;&gt;\r\n        &lt;\/label&gt;\r\n        &lt;small class=&quot;error&quot;&gt;Seu nome com no m\u00ednimo 2 e m\u00e1ximo 20 caracteres e sem espa\u00e7os.&lt;\/small&gt;\r\n      &lt;\/div&gt;\r\n    &lt;\/div&gt; \r\n    \r\n    &lt;div class=&quot;row&quot;&gt;\r\n      &lt;div class=&quot;large-12 columns&quot;&gt;\r\n        &lt;button class=&quot;button success radius&quot; type=&quot;submit&quot;&gt;Enviar&lt;\/button&gt;\r\n      &lt;\/div&gt;\r\n    &lt;\/div&gt; \r\n  &lt;\/fieldset&gt;\r\n&lt;\/form&gt;\r\n<\/pre>\n<h2>Navega\u00e7\u00e3o (Navigation)<\/h2>\n<p>Esta funcionalidade se destina a criar um menu de navega\u00e7\u00e3o. Podemos usar uma navaga\u00e7\u00e3o para todo site ou para navega\u00e7\u00e3o dentro da pr\u00f3pria p\u00e1gina. Para cria\u00e7\u00e3o de menus nenhuma novidade, usamos um elemento container <code>ul<\/code> e a esse elemento definimos a classe <em>side-nav<\/em>.<\/p>\n<pre class=\"brush: xml; title: HTML; notranslate\" title=\"HTML\">\r\n&lt;ul class=&quot;side-nav role=&quot;navigation&quot;&quot;&gt; \r\n        &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Home&lt;\/a&gt;&lt;\/li&gt; \r\n        &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Portf\u00f3lio&lt;\/a&gt;&lt;\/li&gt; \r\n        &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Loja&lt;\/a&gt;&lt;\/li&gt; \r\n        &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Contato&lt;\/a&gt;&lt;\/li&gt; \r\n&lt;\/ul&gt;\r\n<\/pre>\n<p>Meu objetivo nesse artigo foi de mostrar algumas vantagens do framework e como aplicar algumas de suas funcionalidade. Lembrando que o Foundation possui uma excelente <a href=\"http:\/\/Foundation.zurb.com\/docs\/\">documenta\u00e7\u00e3o online<\/a>.<\/p>\n<div class=\"obs\">\nNo link abaixo voc\u00ea encontra uma cole\u00e7\u00e3o dos melhores Frameworks para Desenvolvimento Web com suas principais caracter\u00edsticas:<br \/>\n<a href=\"http:\/\/usablica.github.io\/front-end-frameworks\/compare.html\">http:\/\/usablica.github.io\/front-end-frameworks\/compare.html<\/a>\n<\/div>\n<p>Siga-me no Twitter: <a href=\"http:\/\/twitter.com\/kadunew\" rel=\"nofollow\">@kadunew<\/a> ou assine nosso <a href=\"https:\/\/www.kadunew.com\/blog\/feed\">Feed<\/a> e fique por dentro de todas atualiza\u00e7\u00f5es aqui do blog.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Zurb Foundation \u00e9 um framework Front End para o desenvolvimento responsivo de forma r\u00e1pida priorizando o valor sem\u00e2ntico dos elementos, mantendo uma estrutura HTML limpa e de carregamento r\u00e1pido. Utiliza o conceito mobile first e melhoria progressiva (Progressive Enhancement) para cria\u00e7\u00e3o de design responsivo. Voc\u00ea pode fazer o download apenas de partes do framework que [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[28],"tags":[],"class_list":["post-3158","post","type-post","status-publish","format-standard","hentry","category-web-design"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v23.6 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Introdu\u00e7\u00e3o ao Foundation Framework<\/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.kadunew.com\/blog\/web-design\/introducao-ao-foundation-framework\" \/>\n<meta property=\"og:locale\" content=\"pt_BR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Introdu\u00e7\u00e3o ao Foundation Framework\" \/>\n<meta property=\"og:description\" content=\"Zurb Foundation \u00e9 um framework Front End para o desenvolvimento responsivo de forma r\u00e1pida priorizando o valor sem\u00e2ntico dos elementos, mantendo uma estrutura HTML limpa e de carregamento r\u00e1pido. Utiliza o conceito mobile first e melhoria progressiva (Progressive Enhancement) para cria\u00e7\u00e3o de design responsivo. Voc\u00ea pode fazer o download apenas de partes do framework que [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.kadunew.com\/blog\/web-design\/introducao-ao-foundation-framework\" \/>\n<meta property=\"og:site_name\" content=\"KADUNEW\" \/>\n<meta property=\"article:published_time\" content=\"2014-11-12T02:33:31+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2015-04-23T23:59:29+00:00\" \/>\n<meta name=\"author\" content=\"Kadu Oliveira\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Kadu Oliveira\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. tempo de leitura\" \/>\n\t<meta name=\"twitter:data2\" content=\"11 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.kadunew.com\/blog\/web-design\/introducao-ao-foundation-framework\",\"url\":\"https:\/\/www.kadunew.com\/blog\/web-design\/introducao-ao-foundation-framework\",\"name\":\"Introdu\u00e7\u00e3o ao Foundation Framework\",\"isPartOf\":{\"@id\":\"https:\/\/www.kadunew.com\/blog\/#website\"},\"datePublished\":\"2014-11-12T02:33:31+00:00\",\"dateModified\":\"2015-04-23T23:59:29+00:00\",\"author\":{\"@id\":\"https:\/\/www.kadunew.com\/blog\/#\/schema\/person\/07b2297c4825efbd1e9f2a1018926b05\"},\"breadcrumb\":{\"@id\":\"https:\/\/www.kadunew.com\/blog\/web-design\/introducao-ao-foundation-framework#breadcrumb\"},\"inLanguage\":\"pt-BR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.kadunew.com\/blog\/web-design\/introducao-ao-foundation-framework\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.kadunew.com\/blog\/web-design\/introducao-ao-foundation-framework#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.kadunew.com\/blog\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Web Design\",\"item\":\"https:\/\/www.kadunew.com\/blog\/category\/web-design\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Introdu\u00e7\u00e3o ao Foundation Framework\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.kadunew.com\/blog\/#website\",\"url\":\"https:\/\/www.kadunew.com\/blog\/\",\"name\":\"KADUNEW\",\"description\":\"Artigos sobre Front-End e Programa\u00e7\u00e3o web\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.kadunew.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"pt-BR\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.kadunew.com\/blog\/#\/schema\/person\/07b2297c4825efbd1e9f2a1018926b05\",\"name\":\"Kadu Oliveira\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\/\/www.kadunew.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/780660fded589936b30467c54c99d51a?s=96&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/780660fded589936b30467c54c99d51a?s=96&r=g\",\"caption\":\"Kadu Oliveira\"},\"sameAs\":[\"https:\/\/www.kadunew.com\/blog\"],\"url\":\"https:\/\/www.kadunew.com\/blog\/author\/admin\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Introdu\u00e7\u00e3o ao Foundation Framework","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.kadunew.com\/blog\/web-design\/introducao-ao-foundation-framework","og_locale":"pt_BR","og_type":"article","og_title":"Introdu\u00e7\u00e3o ao Foundation Framework","og_description":"Zurb Foundation \u00e9 um framework Front End para o desenvolvimento responsivo de forma r\u00e1pida priorizando o valor sem\u00e2ntico dos elementos, mantendo uma estrutura HTML limpa e de carregamento r\u00e1pido. Utiliza o conceito mobile first e melhoria progressiva (Progressive Enhancement) para cria\u00e7\u00e3o de design responsivo. Voc\u00ea pode fazer o download apenas de partes do framework que [&hellip;]","og_url":"https:\/\/www.kadunew.com\/blog\/web-design\/introducao-ao-foundation-framework","og_site_name":"KADUNEW","article_published_time":"2014-11-12T02:33:31+00:00","article_modified_time":"2015-04-23T23:59:29+00:00","author":"Kadu Oliveira","twitter_misc":{"Escrito por":"Kadu Oliveira","Est. tempo de leitura":"11 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.kadunew.com\/blog\/web-design\/introducao-ao-foundation-framework","url":"https:\/\/www.kadunew.com\/blog\/web-design\/introducao-ao-foundation-framework","name":"Introdu\u00e7\u00e3o ao Foundation Framework","isPartOf":{"@id":"https:\/\/www.kadunew.com\/blog\/#website"},"datePublished":"2014-11-12T02:33:31+00:00","dateModified":"2015-04-23T23:59:29+00:00","author":{"@id":"https:\/\/www.kadunew.com\/blog\/#\/schema\/person\/07b2297c4825efbd1e9f2a1018926b05"},"breadcrumb":{"@id":"https:\/\/www.kadunew.com\/blog\/web-design\/introducao-ao-foundation-framework#breadcrumb"},"inLanguage":"pt-BR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.kadunew.com\/blog\/web-design\/introducao-ao-foundation-framework"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.kadunew.com\/blog\/web-design\/introducao-ao-foundation-framework#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.kadunew.com\/blog"},{"@type":"ListItem","position":2,"name":"Web Design","item":"https:\/\/www.kadunew.com\/blog\/category\/web-design"},{"@type":"ListItem","position":3,"name":"Introdu\u00e7\u00e3o ao Foundation Framework"}]},{"@type":"WebSite","@id":"https:\/\/www.kadunew.com\/blog\/#website","url":"https:\/\/www.kadunew.com\/blog\/","name":"KADUNEW","description":"Artigos sobre Front-End e Programa\u00e7\u00e3o web","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.kadunew.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"pt-BR"},{"@type":"Person","@id":"https:\/\/www.kadunew.com\/blog\/#\/schema\/person\/07b2297c4825efbd1e9f2a1018926b05","name":"Kadu Oliveira","image":{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/www.kadunew.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/780660fded589936b30467c54c99d51a?s=96&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/780660fded589936b30467c54c99d51a?s=96&r=g","caption":"Kadu Oliveira"},"sameAs":["https:\/\/www.kadunew.com\/blog"],"url":"https:\/\/www.kadunew.com\/blog\/author\/admin"}]}},"_links":{"self":[{"href":"https:\/\/www.kadunew.com\/blog\/wp-json\/wp\/v2\/posts\/3158"}],"collection":[{"href":"https:\/\/www.kadunew.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.kadunew.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.kadunew.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.kadunew.com\/blog\/wp-json\/wp\/v2\/comments?post=3158"}],"version-history":[{"count":15,"href":"https:\/\/www.kadunew.com\/blog\/wp-json\/wp\/v2\/posts\/3158\/revisions"}],"predecessor-version":[{"id":3738,"href":"https:\/\/www.kadunew.com\/blog\/wp-json\/wp\/v2\/posts\/3158\/revisions\/3738"}],"wp:attachment":[{"href":"https:\/\/www.kadunew.com\/blog\/wp-json\/wp\/v2\/media?parent=3158"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.kadunew.com\/blog\/wp-json\/wp\/v2\/categories?post=3158"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.kadunew.com\/blog\/wp-json\/wp\/v2\/tags?post=3158"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}