Configurando o Cody no Projeto
O Cody vem com uma pasta bastante interessante de arquivos SCSS de nome /custom-style. Essa pasta você poderá encontrar acessando o seu tema-base e navegando para /src/scss/.
Adentrando essa pasta, e acessando seus arquivos internos, você poderá configurar muitas variáveis CSS que serão base para muitos componentes e classes utilitárias que você irá usar durante o desenvolvimento do projeto.
Uma boa configuração prévia desses arquivos tornará mais ágil o desenvolvimento do projeto. Então não deixe para trocar os pneus do carro quando este já estiver em movimento.
Falaremos então, nessa seção, de algumas das coisas que podemos configurar no Cody, como cores, espaçamentos, tipografias, botões, formulários, entre outros.
A maior parte dos itens falados nessa seção poderão ser gerenciados usando uma interface visual, numa seção do site do CodyHouse que ele chama de Globals e poderá ser acessada por esse link.
Cores do projeto
No arquivo _color.scss vai todo o esquema de cores que será utilizado no site. Uma miríade de variáveis para que você possa usar a paleta do cliente de forma prática em seu projeto.
O Cody utiliza o padrão de cores HSL em vez de um padrão mais tradicional como RGB. Será um tanto chato ficar convertendo de um padrão para outro, porém c'est la vie.
Como pode realmente ser bem maçante gerenciar as cores diretamente no arquivo _colors.scss, recomendamos usar a interface visual para fazer essa gestão, acessando pelo link https://codyhouse.co/ds/globals/colors. Para efeitos de tutorial, seguiremos pela forma visual.
Logo ao entrar na edição de cores,
--color-primary
Essa é a cor primária do seu projeto, o que significa possivelmente que é
--color-accent
Às vezes o conceito do que é primary e o que é accent pode ser muito
--color-black e --color-white
Essas são as cores preta e branca do seu projeto. Mas não necessariamente vão ser exatamente #000 e #fff, você pode definir seu próprio tom para sua cor mais escura e mais clara.
Outras cores
Você não precisa ficar preso a apenas essas opções de cores pré-definidas, você pode apertar no botão de adicionar e colocar mais cores para jogo, definindo por sua conta também os nomes que as variáveis terão.
Em vários projetos a paleta será bem mais extensa, então apenas uma primary e uma accent não darão conta. Crie as suas.
Espaçamentos
Tipografia
Botões e Formulários
Utilizando o _buttons.scss, você poderá definir todos os estilos de botões do site. Afinal, como pensar em um site sem pensar em botões?
Já para os formulários, você poderá utilizar o _forms.scss.