From 074785cea106179cb3305637055ab0a009ca74f2 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:42:52 -0500 Subject: initial commit --- .../breadcrumb_navigation/index.html | 57 +++++++++++++++ files/pt-br/web/css/layout_cookbook/index.html | 85 ++++++++++++++++++++++ .../css/layout_cookbook/media_objects/index.html | 80 ++++++++++++++++++++ 3 files changed, 222 insertions(+) create mode 100644 files/pt-br/web/css/layout_cookbook/breadcrumb_navigation/index.html create mode 100644 files/pt-br/web/css/layout_cookbook/index.html create mode 100644 files/pt-br/web/css/layout_cookbook/media_objects/index.html (limited to 'files/pt-br/web/css/layout_cookbook') 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 +--- +
{{CSSRef}}
+ +

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.

+ +

Links displayed inline with separators

+ +

Exigências

+ +

Os itens tipicamente são exibidos em linha com um separador para indicar uma hierarquia entre páginas individuais.

+ +

Receita

+ +

{{EmbedGHLiveSample("css-examples/css-cookbook/breadcrumb-navigation.html", '100%', 530)}}

+ +
+

Baixe esse examplo

+
+ +

Faça escolhas

+ +

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.

+ +

Preocupações com acessibilidade

+ +

Eu utilizei os atributos aria-label e aria-current 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.

+ +

Compatibilidade com navegadores

+ +

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.

+ + + +

Flexbox

+ +

{{Compat("css.properties.flex")}}

+ +

Veja também

+ + 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 +--- +
{{CSSRef}}
+ +

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.

+ +
+

Note: 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.

+
+ +

As Receitas

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
RecipeDescriptionLayout Methods
Media objectsUma 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.CSS Grid, {{cssxref("float")}} fallback, {{cssxref("fit-content")}} sizing
ColumnsQuando escolher layout de múltiplas colunas, flexbox ou grid para suas colunas.CSS Grid, Multicol, Flexbox
Center an elementComo centralizar um item horizontalmente e verticalmente.Flexbox, Box Alignment
Sticky footersCriando um rodapé que fica na parte inferior do contêiner ou viewport quando o conteúdo é menor.CSS Grid, Flexbox
Split navigationUm padrão de navegação em que alguns links são visualmente separados dos outros.Flexbox, {{cssxref("margin")}}
Breadcrumb navigationCriando uma lista de links para permitir que o visitante navegue de volta pela hierarquia da página.Flexbox
List group with badgesUma lista de itens com um acessório para exibir uma contagem.Flexbox, Box Alignment
PaginationLinks para páginas de conteúdo (como resultados de pesquisa).Flexbox, Box Alignment
CardUm componente de notas/cartão, exibido em uma grade de notas/cartão.Grid Layout
Grid wrapperPara alinhar o conteúdo da grade em um wrapper central, ao mesmo tempo em que permite que os itens sejam quebrados.CSS Grid
+ +

Contribuir com uma receita

+ +

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.

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 +--- +
{{CSSRef}}
+ +

O Media Object (Objeto de Mídia) é um padrão que vemos em toda web. Nomeado por Nicole Sullivan 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.

+ +

+ +

Exigências

+ +

O Padrão Media Object precisa de algumas ou todas as seguintes características:

+ + + +

A receita

+ +

{{EmbedGHLiveSample("css-examples/css-cookbook/media-objects.html", '100%', 1200)}}

+ +
+

Download this example

+
+ +

Escolhas feitas

+ +

Eu escolhi usar o Layout de Grade 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).

+ +

Outro motivo para usar o Layout de Gride é para que eu possa usar {{cssxref("fit-content")}} para o tamanho da faixa de imagem. Usando fit-content 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 max-content. 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.

+ +

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.

+ +

Uma opção para o padrão é girá-lo para mudar a imagem para o outro lado — isso é feito adicionando a classe media-flip, que define um modelo de grade invertida, fazendo com que o layout seja espelhado.

+ +

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.

+ +

Fallbacks (Alternativas, Plano B)

+ +

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.

+ +

{{EmbedGHLiveSample("css-examples/css-cookbook/media-objects-fallback.html", '100%', 1200)}}

+ +
+

Baixe este examplo

+
+ +

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.

+ +

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).

+ +

Recursos relevantes no MDN

+ + + +

Compatibilidade do Navegador

+ +

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.

+ +

A tabela de compatibilidade nesta página é gerada a partir de dados estruturados. Se você deseja contribuir com os dados, confira https://github.com/mdn/browser-compat-data e envie-nos uma solicitação de recebimento.

+ +

Áreas de Modelo de Grade

+ +

{{Compat("css.properties.grid-template-areas")}}

+ +

Flutuador

+ +

{{Compat("css.properties.float")}}

-- cgit v1.2.3-54-g00ecf