Categorias
CSS Dicas Front-end Geral

Grid Layout sem Segredos (amostra)

Atenção: Este conteúdo é uma amostra grátis do livro Grid Layout sem Segredos.

O conteúdo foi adaptado para exibição na web, e pode ter uma apresentação ligeiramente diferente do e-book original.

Grid Layout Sem Segredos (Capa do livro na Amazon.com.br)

Quebrando as regras do CSS

Grid Layout sem Segredos

Copywright © 2021 by Dorian Torres

Todos os direitos reservados

Por que você deve ler este livro

Ao longo de minha carreira profissional como desenvolvedor de sistemas, a construção de layouts sempre fez parte do dia a dia.

Para isso, me deparei e construí inúmeras possibilidades diferentes de construir layouts e estruturas. Além disso, acompanhei a evolução de diversas tecnologias de back e front-end ao longo dos anos. Entre essas tecnologias, observei também as diversas atualizações de tecnologias como PHP, Javascript, JAVA, C#, elaboração de Design Patterns diversos, desenvolvimento de processos, surgimento de frameworks como React, Vue.JS, Angular, Node JSe é claro: o CSS faz parte disso.

E como é natural, toda essa evolução costuma gerar confusão e dificuldade no aprendizado, principalmente em quem está iniciando na área.

Afinal, hoje em dia nos deparamos com uma característica importante, que é, ao mesmo tempo, a solução e problema: A quantidade de informações disponível.

Costumo chamar de solução pois nos fornece um mar de possibilidades para pesquisa e aprendizado, nos mais diversos canais: livros, audiobooks, vídeos no Youtube, artigos de blog, exemplos em vários idiomas, códigos abertos para serem baixados e testados, editores de texto diversos.

E também costumo dizer que é um grande problema pelo seguinte motivo: Geralmente, enfrenta-se alguma dificuldade em organizar suas ideias e pensamentos, e construir uma boa estratégia de aprendizado.

Sim, a overdose de informação é um problema complicado…

Por causa disso tudo, eu resolvi reunir toda minha experiência, conhecimento, técnicas, estratégias de aprendizado, e então, elaborar um material rico e cheio de conteúdo, com exemplos e formas de elaboração distintas.

A intenção é facilitar seu aprendizado.

Eu quero fazer com que este livro seja um manual que abra as portas e janelas em sua mente, que ajude seu cérebro a fazer as conexões neurais da forma mais eficiente possível. E é claro: não descartando os demais materiais ricos que já existem por aí.

Somos todos uma grande comunidade, reunida para somar, e multiplicar projetos e soluções. Leia os demais livros, assista os outros vídeos, e absorva conhecimento de outros profissionais. Lembre-se: Nossa mente nunca se farta de conhecimento.

Introdução

Grid layout e suas peculiaridades.

O layout em grid é uma estratégia inteligente e interessante, que requer alguns cuidados e planejamento no seu uso.

Neste livro você vai entender e aprender como utilizar de forma simples as estruturas e propriedades do grid layout de uma vez por todas.

Você também vai entender quais os momentos ideais para utilizar o layout em grid e como fazer as variações necessárias em telas diferentes (layout responsivo).

Após a leitura, envie seu comentário, e deixe sua avaliação na Amazon, pois isso contribui muito para que projetos como este sejam cada vez mais relevantes e possamos trazer a cada dia trazer novas informações e material de estudo consistente pra você.

Boa leitura e bons estudos!

Conceito do Grid Layout

O conceito do layout em grid é tão antigo quanto as primeiras versões de software que possuíam alguma apresentação visual.

Sim, o layout em Grid não é algo exclusivo no mundo web.

A propósito, as tabelas no html (table) são exatamente uma forma “emprestada” de se construir um grid.

No sentido literal da palavra, grids são “grelhas” ou “redes”.

São estruturas construídas que seguem à base de linhas e colunas.

Como planilhas Excel.

Portanto, sempre que você precisar estruturar informações, semelhante ao que acontece em uma planilha de dados, uma tabela ou até mesmo organizar um layout, o grid layout pode ser a estratégia ideal a ser utilizada.

É muito importante lembrar que a estrutura de um grid pode ficar comprometida em estruturas responsivas (como celulares). Isso não é uma regra, mas requer alguma atenção.

O layout flexível, por exemplo, é mais adequado para construir layouts que se adaptam com facilidade.

No entanto, tudo vai depender do estudo do projeto e da análise da experiência e interface do usuário (conhecidos atualmente como UI e UX).

Grids tem a tendência de ser dinâmicos até certo ponto, mas obedecendo uma certa estrutura rígida, específica e contínua.

Estrutura em Grid

Entender a estrutura do Grid é muito importante para dominar suas funcionalidades.

Para fins didáticos, resolvi separar neste livro a estrutura do Grid Layout em 4 partes:

  • Container
  • Template
  • Item
  • Áreas

Container do Grid (Grid Container)

container é o recipiente que contém o todo o conteúdo do grid. No CSS, este container é definido com display: grid;

Todos os elementos HTML que estiverem dentro do container se comportarão como um item do gridÉ neste container que definimos todas as diretrizes de como o grid funcionará. Definimos o comportamento de linhas, colunas, áreas e templates.

A regra geral do grid é definida do container. Essas regras podem ser sobrescritas ou complementadas nos itens (grid-items).

Um container sem nenhuma definição é criado como um grid 1×1. Ou seja: possui uma linha e uma coluna.

Cada novo elemento adicionado se transforma em uma nova linha ou nova coluna do grid, dependendo das configurações (você entenderá isso mais adiante). A intersecção entre linhas e colunas formam as células do grid.

Eventualmente, um item pode ocupar uma ou mais células. Como acontece quando usamos a função mesclar no Excel.

A definição do container é feito da seguinte forma:

.grid-container{
display: grid;
}

Um item do grid pode se comportar como um outro grid, porém, essa funcionalidade não herdada automaticamente.

Se você desejar que um item do grid se comporte como um container (outro grid) dentro do grid principal, é preciso fazer a declaração de forma explícita.

Lembrando que este é um novo grid, com comportamentos e regras próprias. Ele não herda as funcionalidades do grid principal.

Veja no exemplo:

css
.grid-container{
display: grid;
}
.item.grid2 {
display: grid;
}

Dessa forma, o item do grid que tem a classe CSS “grid2” se comportará como um grid.

Templates do grid (Grid Template)

Os templates do grid são o “desenho” do grid.

É a configuração responsável por informar o que será exibido e como os itens serão dispostos ao longo do layout em grid.

Os templates são definidos dentro do grid container.

Podemos definir os seguintes templates para um grid:

  • Template de linhas (grid-template-rows)
  • Template de colunas (grid-template-columns)
  • Template de áreas (grid-template-areas)

Para fins didáticos, vamos explanar os templates de linhas e colunas, e em uma seção separada, o de áreas, pois possuem um comportamento ligeiramente diferente.

Dependendo das necessidades do projeto ou até mesmo familiaridade e preferência pessoal, é possível utilizar uma ou outra abordagem.

Item do grid (Grid Item)

O item do grid é o elemento que armazena o conteúdo.

Como dito antes sobre a estrutura, um item pode ocupar uma ou mais células do grid.

Fazemos essa definição informando as linhas e/ou colunas utilizadas, ou através dos nomes de áreas.

Podemos definir a mescla de células informando a coluna inicial e final, por exemplo, fazendo com que o item ocupe várias colunas.

Podemos também transformar um item do grid em outro grid, ou em um container de outro layout diferente (um layout flexível (flexbox) por exemplo).

Naturalmente, como qualquer elemento html e css, os itens do grid também aceitam suas próprias definições de estilos, cores, fonte, e qualquer outra atribuição independente.

Áreas (Grid Area)

O conceito de áreas é uma abordagem particularmente interessante, pois permite uma manipulação mais fácil de ser lida, por trabalhar com identificadores (nomes ou alias) específicos.

Sendo assim, torna-se uma tarefa relativamente simples e de melhor compreensão atribuir valores aos respectivos itens, quando necessário.

Uma área pode ocupar uma ou mais células do grid. E assim, podemos atribuir uma área a um item (através da propriedade grid-area).

Aplicação Prática

Para continuar lendo este material, adquira o livro na Amazon:

Categorias
CSS Dicas Front-end Geral

CSS3 – Seletores com Atributos

Neste post você vou te mostrar uma estratégia MUITO bacana para trabalhar com atributos e organizar seu código.

Além disso, você vai também entender como trabalhar com especificidade e deixar seu código de fácil leitura e muito lógico!

Veja o vídeo abaixo:

Hierarquia e especificidade são as bases do CSS3.

Se você ainda não domina a hierarquia no CSS, em todas as suas formas, infelizmente você não será capaz se ser um desenvolvedor de sucesso.

Pensando nisso, eu falei sobre isso (e muitos outros assuntos) no livro Quebrando as Regras do CSS

Neste livro eu resolvi falar sobre o que ninguém: Um desenvolvedor completo, que domina as ferramentas que usa para trabalhar, deve incorporá-la.

Você deve PENSAR em CSS.

Como quando você vai aprender qualquer idioma: Você se torna fluente quando incorpora, quando pensa, fala e sonha naquele idioma.

No CSS é a mesma coisa

E como se não bastasse, eu preparei algumas surpresinhas para quem adquirir o livro na pré-venda.

Para saber mais sobre o livro Quebrando as Regras, é só clicar neste link.

Categorias
CSS Dicas Front-end Geral

CSS3 – Animações simples com Transitions (vídeo)

Neste simples tutorial você vai aprender a criar animações muito úteis e de forma muito rápida com a propriedade transitions do CSS3.

Esta abordagem é muito útil para efeitos rápidos e visualmente bonitos no front-end.

Categorias
CSS Dicas Geral

Variáveis em CSS3

Aprenda a utilizar variáveis e calcular valores em CSS3 com as funções:

var() e calc().

A utilização das variáveis auxiliam muito no momento em que você precisa atribuir vários valores diferentes em classes diferentes.

E isso se torna ainda mais útil quando você precisa fazer cálculos com calc() e criar valores derivados de forma dinâmica.

Veja o vídeo explicativo:

Veja o conteúdo no Codepen:

Veja no CodePen: CSS – Uso de variáveis by dorian (@dorian_oliveiraoficial) on CodePen.

Formulário em Flexbox

Funções em CSS

Quebrando as Regras: Lançamento oficial do livro

Categorias
CSS Dicas Geral

Animação com troca de conteúdo

Códigos úteis para necessidades diversas de box com CSS3.

Animação com CSS3 e troca de conteúdo (utilizando content nas interceptações de @keyframes).

Não foi utilizado Javascript.

Veja no Codepen: Breath by dorian (@dorian_oliveiraoficial)on CodePen.