initial commit

3 files changed, 222 insertions, 0 deletions

diff --git a/files/pt-br/web/css/layout_cookbook/breadcrumb_navigation/index.html b/files/pt-br/web/css/layout_cookbook/breadcrumb_navigation/index.html
new file mode 100644
index 0000000000..6f478482a9
--- /dev/null
+++ b/files/pt-br/web/css/layout_cookbook/breadcrumb_navigation/index.html
@@ -0,0 +1,57 @@
+---
+title: Navegação "Migalha de Pão"
+slug: Web/CSS/Layout_cookbook/Breadcrumb_Navigation
+tags:
+  - CSS
+  - Layout
+  - Migalha de pão
+  - Navegação
+  - cookbook
+  - flexbox
+translation_of: Web/CSS/Layout_cookbook/Breadcrumb_Navigation
+---
+<div>{{CSSRef}}</div>
+
+<p class="summary">A navegação "migalha de pão" ajuda o usuário a enteder sua localização no site, fornecendo uma trilha de navegação de volta à pagina inicial.</p>
+
+<p><img alt="Links displayed inline with separators" src="https://mdn.mozillademos.org/files/16228/breadcrumb-navigation.png" style="height: 108px; width: 1268px;"></p>
+
+<h2 id="Exigências">Exigências</h2>
+
+<p>Os itens tipicamente são exibidos em linha com um separador para indicar uma hierarquia entre páginas individuais.</p>
+
+<h2 id="Receita">Receita</h2>
+
+<p>{{EmbedGHLiveSample("css-examples/css-cookbook/breadcrumb-navigation.html", '100%', 530)}}</p>
+
+<div class="note">
+<p><a href="https://github.com/mdn/css-examples/blob/master/css-cookbook/breadcrumb-navigation--download.html">Baixe esse examplo</a></p>
+</div>
+
+<h2 id="Faça_escolhas">Faça escolhas</h2>
+
+<p>Esse padrão é apresentado usando um layout flexível simples demonstrando como uma linha de CSS pode nos fornecer nossa navegação. Os separadores são adicionados usando o conteúdo gerado por CSS. Você pode alterá-las para qualquer separador que desejar.</p>
+
+<h2 id="Preocupações_com_acessibilidade">Preocupações com acessibilidade</h2>
+
+<p>Eu utilizei os atributos <code>aria-label</code> e <code>aria-current</code> para ajudar os usuários a entender o que é essa navegação e onde a página atual está na estrutura. Veja os links relacionados para mais informações.</p>
+
+<h2 id="Compatibilidade_com_navegadores">Compatibilidade com navegadores</h2>
+
+<p>Os vários métodos de layout têm diferente suporte para o navegador. Veja os gráficos abaixo para obter detalhes sobre o suporte básico para as propriedades usadas.</p>
+
+<div class="hidden">
+<p>A tabela de compatibilidade nesta página é gerada a partir de dados estruturados. Se você deseja contribuir com os dados, consulte <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> e nós envie seu pull request.</p>
+</div>
+
+<h4 id="Flexbox">Flexbox</h4>
+
+<p>{{Compat("css.properties.flex")}}</p>
+
+<h2 id="See_also" name="See_also">Veja também</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout">CSS Flexible Box Layout</a></li>
+ <li><a href="https://www.w3.org/TR/WCAG20-TECHS/G65.html">Fornecendo uma trilha de "migalha de pão"</a></li>
+ <li><a href="https://tink.uk/using-the-aria-current-attribute/">Usando o atributo aria-current</a></li>
+</ul>
diff --git a/files/pt-br/web/css/layout_cookbook/index.html b/files/pt-br/web/css/layout_cookbook/index.html
new file mode 100644
index 0000000000..c829a8e4d3
--- /dev/null
+++ b/files/pt-br/web/css/layout_cookbook/index.html
@@ -0,0 +1,85 @@
+---
+title: CSS Layout cookbook
+slug: Web/CSS/Layout_cookbook
+tags:
+  - CSS
+  - Layout
+  - livro de receitas
+  - receitas
+translation_of: Web/CSS/Layout_cookbook
+---
+<div>{{CSSRef}}</div>
+
+<p class="summary">O livro de receitas (Cookbook) de layout CSS visa reunir receitas para padrões de layout comuns, coisas que você pode precisar implementar em seus próprios sites. Além de fornecer código que você pode usar como ponto de partida em seus projetos, essas receitas destacam as diferentes maneiras pelas quais as especificações de layout podem ser usadas e as escolhas que você pode fazer como desenvolvedor.</p>
+
+<div class="note">
+<p><strong>Note</strong>: Se você é novo no layout CSS, então primeiro você pode dar uma olhada em nosso módulo de aprendizado de layout CSS, pois isso lhe dará o básico de que você precisa para usar as receitas aqui.</p>
+</div>
+
+<h2 id="As_Receitas">As Receitas</h2>
+
+<table class="standard-table" style="height: 543px; width: 1188px;">
+ <thead>
+  <tr>
+   <th scope="col">Recipe</th>
+   <th scope="col">Description</th>
+   <th scope="col">Layout Methods</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><a href="/en-US/docs/Web/CSS/Layout_cookbook/Media_objects">Media objects</a></td>
+   <td>Uma caixa de duas colunas com uma imagem de um lado e um texto descritivo do outro, por ex. um post no facebook ou um tweet.</td>
+   <td><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">CSS Grid</a>, {{cssxref("float")}} fallback, {{cssxref("fit-content")}} sizing</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/CSS/Layout_cookbook/Column_layouts">Columns</a></td>
+   <td>Quando escolher layout de múltiplas colunas, flexbox ou grid para suas colunas.</td>
+   <td><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">CSS Grid</a>, <a href="/en-US/docs/Web/CSS/CSS_Columns">Multicol</a>, <a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout">Flexbox</a></td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/CSS/Layout_cookbook/Center_an_element">Center an element</a></td>
+   <td>Como centralizar um item horizontalmente e verticalmente.</td>
+   <td><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout">Flexbox</a>, <a href="/en-US/docs/Web/CSS/CSS_Box_Alignment">Box Alignment</a></td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/CSS/Layout_cookbook/Sticky_footers">Sticky footers</a></td>
+   <td>Criando um rodapé que fica na parte inferior do contêiner ou viewport quando o conteúdo é menor.</td>
+   <td><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">CSS Grid</a>, <a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout">Flexbox</a></td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/CSS/Layout_cookbook/Split_Navigation">Split navigation</a></td>
+   <td>Um padrão de navegação em que alguns links são visualmente separados dos outros.</td>
+   <td><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout">Flexbox</a>, {{cssxref("margin")}}</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/CSS/Layout_cookbook/Breadcrumb_Navigation">Breadcrumb navigation</a></td>
+   <td>Criando uma lista de links para permitir que o visitante navegue de volta pela hierarquia da página.</td>
+   <td><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout">Flexbox</a></td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/CSS/Layout_cookbook/List_group_with_badges">List group with badges</a></td>
+   <td>Uma lista de itens com um acessório para exibir uma contagem.</td>
+   <td><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout">Flexbox</a>, <a href="/en-US/docs/Web/CSS/CSS_Box_Alignment">Box Alignment</a></td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/CSS/Layout_cookbook/Pagination">Pagination</a></td>
+   <td>Links para páginas de conteúdo (como resultados de pesquisa).</td>
+   <td><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout">Flexbox</a>, <a href="/en-US/docs/Web/CSS/CSS_Box_Alignment">Box Alignment</a></td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/CSS/Layout_cookbook/Card">Card</a></td>
+   <td>Um componente de notas/cartão, exibido em uma grade de notas/cartão.</td>
+   <td><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">Grid Layout</a></td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/CSS/Layout_cookbook/Grid_wrapper">Grid wrapper</a></td>
+   <td>Para alinhar o conteúdo da grade em um wrapper central, ao mesmo tempo em que permite que os itens sejam quebrados.</td>
+   <td><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">CSS Grid</a></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Contribuir_com_uma_receita">Contribuir com uma receita</h2>
+
+<p>Como com todo o MDN, gostaríamos que você contribuísse com uma receita no mesmo formato que os mostrados acima. Veja esta página para um modelo e diretrizes para escrever seu próprio exemplo.</p>
diff --git a/files/pt-br/web/css/layout_cookbook/media_objects/index.html b/files/pt-br/web/css/layout_cookbook/media_objects/index.html
new file mode 100644
index 0000000000..d62d36fb4e
--- /dev/null
+++ b/files/pt-br/web/css/layout_cookbook/media_objects/index.html
@@ -0,0 +1,80 @@
+---
+title: 'Recipe: Media objects'
+slug: Web/CSS/Layout_cookbook/Media_objects
+translation_of: Web/CSS/Layout_cookbook/Media_objects
+---
+<div>{{CSSRef}}</div>
+
+<p class="summary">O <em>Media Object</em> (Objeto de Mídia) é um padrão que vemos em toda web. <a href="http://www.stubbornella.org/content/2010/06/25/the-media-object-saves-hundreds-of-lines-of-code/">Nomeado por Nicole Sullivan</a> refere-se a uma caixa de duas colunas com uma imagem de um lado e texto descritivo do outro, por ex. uma postagem no facebook ou tweet.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16112/media-object.png"></p>
+
+<h2 id="Exigências">Exigências</h2>
+
+<p>O Padrão Media Object precisa de algumas ou todas as seguintes características:</p>
+
+<ul>
+ <li>Empilhados no Celular, duas colunas no Computador.</li>
+ <li>A imagem pode estar à esquerda ou à direita.</li>
+ <li>A imagem pode ser pequena ou grande.</li>
+ <li>Media Objects (Objetos de Mídia) podem ser aninhados.</li>
+ <li>O Media Object deve limpar o conteúdo, não importando o tamanho.</li>
+</ul>
+
+<h2 id="A_receita">A receita</h2>
+
+<p class="codepen">{{EmbedGHLiveSample("css-examples/css-cookbook/media-objects.html", '100%', 1200)}}</p>
+
+<div class="note">
+<p class="codepen"><a href="https://github.com/mdn/css-examples/blob/master/css-cookbook/media-objects--download.html">Download this example</a></p>
+</div>
+
+<h2 id="Escolhas_feitas">Escolhas feitas</h2>
+
+<p>Eu escolhi usar o <a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">Layout de Grade </a>para o Media Object (Objeto de Layout), pois ele permite controlar o layout em duas dimensões quando preciso. Isso significa que, quando temos um rodapé, com conteúdo curto acima, o rodapé pode ser empurrado para a parte inferior do Media Object (Objeto de Layout).</p>
+
+<p>Outro motivo para usar o Layout de Gride é para que eu possa usar {{cssxref("fit-content")}} para o tamanho da faixa de imagem. Usando <code>fit-content</code> com um tamanho máximo de 200 pixels, quando temos uma imagem pequena como o ícone, a faixa fica tão grande quanto o tamanho dessa imagem — o tamanho <code>max-content</code>. Se a imagem for maior, a faixa para de crescer em 200 pixels e, como a imagem possui {{cssxref("max-width ")}} de 100% aplicado, ele diminui para que continue a caber dentro da coluna.</p>
+
+<p>Usando {{cssxref("grid-template-areas")}} para alcançar o layout, eu posso ver o padrão no CSS. Eu defino minha grade quando tivermos uma largura máxima de 500 pixels, em dispositivos menores o Media Object empilha.</p>
+
+<p>Uma opção para o padrão é girá-lo para mudar a imagem para o outro lado — isso é feito adicionando a classe <code>media-flip</code>, que define um modelo de grade invertida, fazendo com que o layout seja espelhado.</p>
+
+<p>Quando aninhamos um media object (Objeto de Layout) dentro do outro, precisamons colocá-lo na segunda faixa no layout regular, e na primeira faixa quando invertida.</p>
+
+<h2 id="Fallbacks_Alternativas_Plano_B">Fallbacks (Alternativas, Plano B)</h2>
+
+<p>Existem várias alternativas possíveis para esse padrão, dependendo dos navegadores que você deseja oferecer suporte. Um bom exemplo seria flutuar a imagem para a esquerda e adicionar uma correção clara à caixa para garantir que ela contivesse as flutuações.</p>
+
+<p class="codepen">{{EmbedGHLiveSample("css-examples/css-cookbook/media-objects-fallback.html", '100%', 1200)}}</p>
+
+<div class="note">
+<p class="codepen"><a href="https://github.com/mdn/css-examples/blob/master/css-cookbook/media-objects-fallback--download.html">Baixe este examplo</a></p>
+</div>
+
+<p>Depois que os elementos flutuantes se tornam itens da grade, o flutuador não se aplica mais; portanto, você não precisa fazer nada de especial para limpá-lo.</p>
+
+<p>O que você precisará fazer é remover as margens aplicadas ao item e as larguras que não precisamos em um contexto de grade (nós temos o {{cssxref("gap")}} propriedade para controlá-lo em grades, e a faixa assume o controle do dimensionamento).</p>
+
+<h2 id="Recursos_relevantes_no_MDN">Recursos relevantes no MDN</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">Layout Grade CSS </a></li>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement">Aprimoramento progressivo e Layout de Grid</a></li>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas">Usando áreas de modelo de Grade</a></li>
+ <li><a href="/en-US/docs/Web/CSS/fit-content">Conteúdo Adequado</a></li>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas">Áreas de Modelo de Grade</a></li>
+</ul>
+
+<h2 id="Compatibilidade_do_Navegador">Compatibilidade do Navegador</h2>
+
+<p>Os vários métodos de layout tem suporte diferente para os navegadores. Veja os gráficos abaixo para obter detalhes sobre o suporte básico para as propriedades usadas.</p>
+
+<p>A tabela de compatibilidade nesta página é gerada a partir de dados estruturados. Se você deseja contribuir com os dados, confira <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> e envie-nos uma solicitação de recebimento.</p>
+
+<h4 id="Áreas_de_Modelo_de_Grade">Áreas de Modelo de Grade</h4>
+
+<p>{{Compat("css.properties.grid-template-areas")}}</p>
+
+<h4 id="Flutuador">Flutuador</h4>
+
+<p>{{Compat("css.properties.float")}}</p>