cefet_web

CSS parte 4

Layouts, custom properties e a
Lanchonete do Coral 55

Roteiro de hoje

  1. Layouts comuns
  2. Custom properties (“variáveis”) em CSS
  3. Lanchonete do Coral 55

Layouts comuns

Padrões de desenho

Unidades de medida

Como fazíamos layout

Layout de páginas

Características de um layout

Layout de páginas (1/3)

  1. Holy Grail 🌐

     .container {
   display: grid;
   grid-template: auto 1fr auto
                / auto 1fr auto;
 }

  2. Barra lateral 🌐

     .container {
   display: flex;
 }
 .sidebar {
   width: 30%;
 }
 .content {
   flex: 1;
   overflow-y: auto;
 }

Layout de páginas (2/3)

  1. Fundo total 🌐

     .above-the-fold {
   background-image: url('...');
   background-size: cover;
   background-repeat: no-repeat;
   height: 100vh;
 }

  2. Cabeçalho grudento 🌐

     header {
   position: sticky;
   top: 0;
 }

Layout de páginas (3/3)

  1. Menu em gaveta 🌐

     #menu {
   position: absolute; left: -200px;
   width: 200px; height: 100vh;
 }
 body.menu-open #menu {
   left: 0;
 }
 body.menu-open .content {
   left: 200px;
 }

  2. Bricolagem 🌐

     .container {
   column-count: 3;
   column-gap: 1rem;
   width: 100%;
 }
 .item {
   break-inside: avoid;
   margin-bottom: 1rem;      
 }

Centralizando as coisas

Centralizando horizontalmente (1/2)

Centralizando elementos “posicionados” (2/2)

Layout de componentes

Layout de componentes (1/2)

  1. ::: figure .push-right.center-aligned margin-top: 1em; exemplo :::

    Lista de cards

    • .card-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
}
.product {
  min-width: 100px;
  height: 150px;
  flex: 1;
} 

    • <div class="card-list">
  <div class="product">...</div>
  <div class="product">...</div>
  <div class="product">...</div>
  <div class="product">...</div>
  <div class="product">...</div>
  <div class="product">...</div>
</div>

Layout de componentes (2/2)

  1. Janelinha Modal + máscara

    • .modal {
  position: fixed;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  z-index: 100;
  opacity: 0;
  pointer-events: none;
}
.modal.visible {
  opacity: 1;
  pointer-events: initial;
}
#mask {
  position: fixed;
  background-color: #0003;
  inset: 0; z-index: 10;
  opacity: 0;
  pointer-events: none;
}
.modal.visible ~ #mask {
  opacity: 1;
  pointer-events: initial;
}
    • ::: figure .push-right.center-aligned margin-top: 1.75em; exemplo ::: 
      <body>
 ...
 <div class="modal visible">
   ...
 </div>
 <div class="modal">
   ...
 </div>
 <div id="mask"></div>
</body>

Custom Properties

“Variáveis” em CSS

Por que novas propriedades/variáveis?

  1. :root {
  --cor-de-destaque: #339966;
}
strong {
  color: var(--cor-de-destaque);
}

    Dar nome a valores

    • Evitando “números mágicos”
  2. Não repetir valores
    • Possibilita reuso de valores
  3. Criar temas
    • ::: did-you-know .push-right.clearer width: 420px; Antes das CSSCP, usávamos preprocessadores CSS que compilavam de uma linguagem para CSS. ::: Alterando um conjunto de valores para outro
  4. Apoiar criação de design systems
    • Configuração de componentes
  5. Controlar via JavaScript
    • Alterável programaticamente

Usando custom properties em CSS

Exemplos de custom properties

:root { /* ⬅️ escopo global */
  --cor-texto: #333;
  --cor-fundo: #fff;
  --cor-texto-destaque: #396;
  --largura-pagina: 800px;
  --largura-produto: calc(
    var(--largura-pagina) / var(--produtos-por-linha)
    - var(--espaco-produtos)
  );
  --espaco-produtos: 2rem;
  --produtos-por-linha: 4;
}
.container {
  max-width: var(--largura-pagina);
  display: flex; flex-wrap: wrap;
  gap: var(--espaco-produtos);
}
.produto {
  width: var(--largura-produto, 200px);
}

Usando a cascata

body {
  --background: white;
}
.sidebar {
  --background: gray;
}
.module {
  background: var(--background);
}

<body>
  <main>
    <div class="module">
      Tenho fundo branco.
    </div>
  <main>
  <aside class="sidebar">
    <div class="module">
      Tenho fundo cinza.
    </div>
  </aside>
</body>

Definindo tipo e herança

::: did-you-know . width: 520px; margin-left: 1rem; Tipos de dados válidos:

Usando custom properties em JavaScript

Lanchonete do
Coral 55

Ajude a criar nosso cardápio

O Siri da lanchonete

Comp / Specs

Passos para o exercício

  1. Criar um fork do repositório do professor em:
    • https://github.com/fegemo/cefet-web-coral-55
  2. Fazer o exercício e fazer commits e push no seu repositório
  3. Enviar a URL do seu fork
  4. Atividade:
    1. Web fonts
    2. Layout geral e das partes
    3. Borbolhas (JavaScript)
    4. Modo escuro

A propriedade line-height (na MDN)

Referências