Uma olhada nos bastidores sobre como fazer uma estrutura CSS e um tutorial sobre como construir um site com ela.
Por que criamos o CodyFrame e como ele evoluiu
Há 7 anos, começamos a CodyHouse como uma coleção de experimentos de web design. Fizemos isso para promover nossa agência de web design. Não havia muitos sites na época que compartilhavam conteúdo semelhante (Codrops foi uma de nossas principais inspirações).
Nossa biblioteca cresceu muito em popularidade, mas logo percebemos como era difícil incluir vários experimentos no mesmo projeto: eles haviam desconectado o código CSS, o que exigia a extração do estilo comum (por exemplo, botões, tipografia) para evitar repetição e estilo de código inconsistência.
É por isso que decidimos construir o CodyFrame e uma nova biblioteca de componentes conectados .
A ideia original era criar uma estrutura CSS superleve que incluiria apenas um conjunto de estilos globais (por exemplo, cores, elementos de formulário e botões) que pudéssemos reutilizar cada vez que um novo componente fosse criado.
Conforme a biblioteca continuou crescendo, começamos a enfrentar alguns problemas: ao incluir decisões de layout nos componentes (por exemplo, margens e preenchimentos), era difícil criar variações de layout.
Nossos componentes são construídos usando a convenção de nomenclatura BEM , portanto, mesmo a menor alteração exigia uma variação de componente:
<div class="component component--padding-y-sm">
<!-- ... -->
</div>
<div class="component component--margin-y-xl">
<!-- ... -->
</div>
<style>
.component {
padding: var(--space-md) 0;
margin: var(--space-md) 0;
}
.component--padding-y-sm {
padding: var(--space-sm) 0;
}
.component--margin-y-xl {
margin: var(--space-xl) 0;
}
</style>Decidimos incluir algumas classes de utilitários no framework, e acabou sendo muito útil não apenas para secar o código dos componentes, mas também para torná-los mais fáceis de personalizar.
<div class="component margin-y-md padding-y-sm">
<!-- ... -->
</div>
<div class="component margin-y-xl padding-y-md">
<!-- ... -->
</div>Desde então, incluímos muitas classes de utilitários e desenvolvemos um sistema para construir uma arquitetura CSS escalonável baseada em BEM e classes de utilitários .
CodyFrame v2
Na v1, cada arquivo global continha as regras básicas e o estilo personalizado:
.btn {
/* base style */
display: inline-flex;
text-decoration: none;
/* custom style */
background-color: var(--color-primary);
color: var(--color-white);
}Uma falha desta versão foi o processo de atualização: quando uma nova versão do framework era lançada, as alterações no código base seriam misturadas com o código customizado que o usuário já havia modificado.
Para corrigir esse problema, no CodyFrame v2 decidimos dividir a estrutura em duas partes:
- Estilo básico – regras CSS essenciais e classes de utilitários;
- Estilo personalizado – modelos SCSS para criar seu estilo personalizado.
css/
├── base/
│ ├── _accessibility.scss
│ ├── _buttons.scss
│ ├── _colors.scss
│ ├── _forms.scss
│ ├── _icons.scss
│ ├── _spacing.scss
│ ├── _typography.scss
│ └── _util.scss
└── custom-style/
├── _buttons.scss
├── _colors.scss
├── _forms.scss
├── _icons.scss
├── _spacing.scss
└── _typography.scssCada vez que uma nova versão do framework é lançada, nossos usuários podem substituir a pasta ‘base’ pela nova sem afetar seu estilo personalizado!
Propriedades Customizadas CSS
Desde o início, temos usado propriedades customizadas CSS para lidar com variáveis no CodyFrame.
Variáveis CSS são ótimas para manutenção de código: você define a variável em um lugar e a usa em qualquer lugar em seu código. Se você precisar modificar seu valor posteriormente, precisará atualizar apenas uma linha de código e ele se propagará por toda a base de código.
Mas nós os escolhemos (principalmente) por um motivo diferente: ao contrário das variáveis SASS, você pode atualizar o valor de uma variável CSS usando uma classe ou consultas de mídia.
.icon {
--size: 1em;
height: var(--size);
width: var(--size);
}
.icon--sm {
--size: 16px;
}Por que não usar uma estrutura existente
Construir uma estrutura é um processo de aprendizagem . Ele nos ensinou muito sobre a sustentabilidade do código e nos livrou de buscar outras atualizações de frameworks.
Claro, leva tempo para convencer os desenvolvedores de que vale a pena tentar. Mas, a longo prazo, é um negócio ganha-ganha tanto para nós quanto para nossos membros.
O CodyFrame v2 revelou-se muito estável: ele foi lançado por mais de 2 anos, com mais de 40 lançamentos menores.
O CodyFrame v3 foi lançado há alguns dias para incluir os novos Módulos SASS com alguns ajustes importantes nos sistemas de cores e espaçamento.
Nosso framework agora é baixado quase 10.000 vezes / mês, e considero isso uma grande conquista.
Planos para o futuro
Acabamos de lançar o CodyFrame v3 e ainda estamos de olho nos relatórios de problemas.
Planejamos continuar enviando novos componentes e modelos até que fiquemos sem ideias. Também estamos procurando componentes nativos da web , que tornariam nossos componentes compatíveis com todas as estruturas JS populares.
CodyFrame em ação
Agora a parte divertida! Vamos construir algo com CodyFrame e os componentes!
Aqui está o resultado final:
Para manter o tutorial curto e agradável, incluiremos CodyFrame via CDN:
<!doctype html>
<html lang="en">
<head>
<script>document.getElementsByTagName("html")[0].className += " js";</script>
<link rel="stylesheet" href="https://unpkg.com/codyhouse-framework/main/assets/css/style.min.css">
<link rel="stylesheet" href="assets/style.css">
</head>
<body>
<!-- ... -->
<script src="https://unpkg.com/codyhouse-framework/main/assets/js/util.js"></script>
<script src="assets/script.js"></script>
</body>
</html>Se você deseja criar seu estilo personalizado (por exemplo, botões de modificação, tipografia, …), você pode baixar os modelos SCSS incluídos na estrutura e modificá-los usando nossos editores globais , conforme explicado em nossa Documentação .
Como navegação principal da página, usaremos os componentes do cabeçalho principal de nossa biblioteca de IU.
Copie o código HTML, CSS e JS usando os botões no canto superior direito da página e inclua-os em seu projeto.
Podemos personalizar a estrutura HTML deste cabeçalho: vamos deletar o código para o item do botão ‘Download’ e o divisor ( .header__item--divider) e vamos remover o aria-current="page"atributo do link ‘Recursos’ – esse atributo é usado para estilizar o link da página atual. No nosso caso, é a página inicial, portanto, não precisamos defini-la para nenhum dos links de cabeçalho:
<header class="header position-relative js-header">
<div class="header__container container max-width-lg">
<div class="header__logo">
<a href="#0">
<svg width="104" height="30" viewBox="0 0 104 30">
<title>Go to homepage</title>
<!-- ... -->
</svg>
</a>
</div>
<button class="btn btn--subtle header__trigger js-header__trigger" aria-label="Toggle menu" aria-expanded="false" aria-controls="header-nav">
<i class="header__trigger-icon" aria-hidden="true"></i>
<span>Menu</span>
</button>
<nav class="header__nav js-header__nav" id="header-nav" role="navigation" aria-label="Main">
<div class="header__nav-inner">
<div class="header__label">Main menu</div>
<ul class="header__list">
<li class="header__item">
<a href="#0" class="header__link">About</a>
</li>
<!-- more list items here -->
</ul>
</div>
</nav>
</div>
</header>Para obter mais informações sobre o componente Cabeçalho principal, você pode verificar sua página de informações .
Para a seção de herói, usaremos algumas das classes do utilitário CodyFrame.
<section class="container max-width-adaptive-md padding-top-xl padding-bottom-xxl">
<h1>Lorem ipsum dolor sit amet consectetur adipisicing elit</h1>
<p class="line-height-md margin-y-md">Lorem ipsum dolor ...</p>
<div class="flex items-center gap-sm">
<a href="#0" class="btn btn--primary">Download</a>
<a href="#0" class="color-inherit">Learn more</a>
</div>
</section>As classes .containere .max-width-adaptive-mdsão usadas para definir a largura do elemento herói. As classes flex ( .flex/ .items-center/ .gap-sm) são usadas para alinhar os botões de ação e criar uma lacuna.
Para completar a seção do herói, precisaremos 1) animar o título com palavras giratórias, 2) criar o efeito de deslocamento do elemento de parágrafo e 3) criar o efeito de foco para o link ‘Saiba mais’.
Para o efeito de deslocamento, podemos usar as classes utilitárias da grade: 1) a .colclasse (e seu modificador responsivo .col-8@md) para alterar a largura do elemento em um ponto de interrupção específico e 2) a .offsetclasse para compensá-lo.
<div class="grid">
<h1>Lorem ipsum dolor sit amet consectetur adipisicing elit</h1>
<div class="col-8@md offset-4@md">
<p class="line-height-md margin-y-md">Lorem ipsum dolor ...</p>
<div class="flex items-center gap-sm">
<a href="#0" class="btn btn--primary">Download</a>
<a href="#0" class="color-inherit">Learn more</a>
</div>
</div>
</div>Para animar as palavras do título, podemos usar o componente Título Animado (a variação ‘clipe’).
Vamos copiar o código CSS e JS do componente em nosso projeto. Em seguida, use o HTML para substituir o <h1>elemento de nossa seção hero:
<div class="grid">
<h1 class="text-xxxl text-anim text-anim--clip js-text-anim">
We <span class="text-anim__wrapper js-text-anim__wrapper"><i class="text-anim__word text-anim__word--in js-text-anim__word">design</i><i class="text-anim__word js-text-anim__word">develop</i><i class="text-anim__word js-text-anim__word">create</i></span> digital experiences
</h1>
<div class="col-8@md offset-4@md">
<p class="line-height-md margin-y-md">Lorem ipsum dolor ...</p>
<div class="flex items-center gap-sm">
<a href="#0" class="btn btn--primary">Download</a>
<a href="#0" class="color-inherit">Learn more</a>
</div>
</div>
</div>Finalmente, para o efeito de foco do link, vamos usar o componente Efeitos de link . Importe o código CSS, copie o HTML e use-o para substituir o <a>elemento original :
<a class="link-fx-1 color-contrast-higher" href="#0">
<span>Learn more</span>
<svg class="icon" viewBox="0 0 32 32" aria-hidden="true">
<g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><!-- ... --></g>
</svg>
</a>Para a próxima seção, vamos usar o componente Sticky Hero – a variação de ‘escala’ – com algumas personalizações menores.
Primeiro, copiaremos o código HTML, CSS e JS do componente em nosso projeto.
No HTML, podemos atualizar o conteúdo do .sticky-hero__contentpara incluir um <blockquote>elemento:
<div class="sticky-hero__content">
<blockquote class="container max-width-sm text-center color-white">
<p class="text-xxl">One belongs to New York instantly, one belongs to it as much in five minutes as in five years.</p>
<footer class="margin-top-lg">— Tom Wolfe</footer>
</blockquote>
</div>Agora vamos criar a seção da galeria. O HTML incluirá um elemento de título e imagens:
<div class="container max-width-adaptive-lg padding-y-xl">
<div>
<h2 class="text-md font-medium border-top padding-top-xs">Selected Works</h2>
<figure>
<img src="assets/img/gallery-img-1.jpg" alt="Image Preview">
</figure>
<figure>
<img src="assets/img/gallery-img-2.jpg" alt="Image Preview">
</figure>
<figure>
<img src="assets/img/gallery-img-3.jpg" alt="Image Preview">
</figure>
<figure>
<img src="assets/img/gallery-img-4.jpg" alt="Image Preview">
</figure>
</div>
</div>No celular, queremos que os elementos estejam um abaixo do outro, enquanto em uma tela maior, eles podem ser posicionados para criar uma grade. Mais uma vez, usaremos as classes do utilitário de grade:
<div class="container max-width-adaptive-lg padding-y-xl">
<div class="grid gap-xs">
<h2 class="col-4@md text-md font-medium border-top padding-top-xs">Selected Works</h2>
<figure class="col-8@md">
<img src="assets/img/gallery-img-1.jpg" alt="Image Preview">
</figure>
<figure class="col-8@md">
<img src="assets/img/gallery-img-2.jpg" alt="Image Preview">
</figure>
<figure class="col-4@md">
<img src="assets/img/gallery-img-3.jpg" alt="Image Preview">
</figure>
<figure class="offset-1@md col-10@md">
<img src="assets/img/gallery-img-4.jpg" alt="Image Preview">
</figure>
</div>
</div>Você pode brincar com as classes .col-{number}e .offset-{number}para criar um layout de grade diferente!
Para animar as imagens da galeria conforme elas entram na janela de visualização, vamos usar o componente Reveal Effects .
Das diferentes animações, usaremos a rotação para cima. Certifique-se de incluir o CSS e JS do componente e, em seguida, adicione as .reveal-fx.reveal-fx--rotate-upclasses, conforme explicado na página de informações :
<figure class="col-8@md reveal-fx reveal-fx--rotate-up">
<img src="assets/img/gallery-img-1.jpg" alt="Image Preview">
</figure>
Para a próxima seção, vamos criar um layout de coluna única em dispositivos móveis e duas colunas em telas maiores:
<div class="bg-dark padding-y-xl">
<div class="container max-width-adaptive-lg">
<div class="grid gap-md">
<div class="col-4@md">
<!-- content of first column -->
</div>
<div class="col-8@md">
<!-- content of second column -->
</div>
</div>
</div>
</div>Agora podemos adicionar um elemento de título à primeira coluna e alguns elementos de texto à segunda coluna.
<div class="col-4@md">
<h3 class="text-xxl">Lorem, ipsum dolor sit amet consectetur adipisicing elit.</h3>
</div>
<div class="col-8@md">
<div class="text-component">
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
<a href="#0">Read more</a>
</div>
</div>A classe .text-component é usada para estilizar blocos contendo tipografia, cuidando do ritmo vertical e estilizando os elementos embutidos.
Para completar esta seção, vamos adicionar um efeito de foco ao link na parte inferior da segunda coluna, como fizemos para o link na seção superior do herói! O CSS do componente Link Effects já foi incluído, só precisamos copiar o novo HTML e substituir o link original:
<div class="col-8@md">
<div class="text-component">
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
<a class="link-fx-1 color-contrast-higher" href="#0">
<span>Read more</span>
<svg class="icon" viewBox="0 0 32 32" aria-hidden="true">
<g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><!-- ... --></g>
</svg>
</a>
</div>
</div>Nossa página está quase completa! Ainda temos duas seções + o rodapé 💪
Para essas seções, podemos usar três componentes da biblioteca de IU:
- O componente Stacking Cards – a variação ‘bg-images’;
- O componente Newsletter ;
- O componente rodapé principal .
E aqui está a página completa:
O CodyFrame vem com um tema escuro integrado! Para ativar mais escuro, adicione o data-theme="dark"ao elemento de corpo, nenhuma alteração adicional é necessária!
<body data-theme="dark">
<!-- page content here -->
</body>