Usando os Componentes

O CodyHouse possui uma extensa lista de componentes, acessíveis em https://codyhouse.co/ds/components.

A navegação é bem simples, basta ir abrindo as categorias para ver tudo que ele tem a oferecer, ou fazer uma busca para achar o que precisa.

Depois é só entrar na página do componente e logo no header vai estar o botão azul de Download para que você baixe o componente para sua máquina.

nota

No topo das páginas dos componentes tem um seletor Compatible with, deixe sempre a opção CodyFrame CSS v3 marcada antes de efetuar os downloads para baixar a versão correta para uso.

Baixando o .zip

Os componentes do Cody vêm com basicamente três pastas: /html, /css, /scss. Os mais complexos, aqueles com comportamentos adicionais, também virão com uma pasta /js.

Alguns componentes maiores virão também com dependência de outros componentes menores, todos virão em ordem de prioridade, através de numeração no nome dos arquivos.

Aqui um exemplo de como seria uma estrutura de pastas de um componente do Cody:

modal-video.zip

├── css/
│   ├── _1_modal-window.css
│   └── _2_modal-video.css
├── html/
│   └── modal-video.html
├── js/
│   ├── _1_modal-window.js
│   └── _2_modal-video.js
└── scss/
    ├── _1_modal-window.scss
    └── _2_modal-video.scss

A pasta /css pode ser prontamente ignorada, já que estamos trabalhando com SASS nos projetos e não precisamos do código já compilado.

Onde alocar os arquivos?

Nos temas de nossos projetos, os arquivos de componentes do Cody em nossos projetos ficam dentro da pasta /src, que é uma pasta que armazena os arquivos que ainda irão ser compilados.

O conteúdo das pastas /scss e /js do arquivo .zip devem ser distribuídos para as pastas próprias do tema que armazenam esses arquivos de componentes. Tudo que estiver em /scss deve ser descompactado na pasta /src/scss/components/. E, seguindo a mesma lógica, tudo que está na pasta /js vai para /src/js/components.

tema-base-do-projeto

...
└── src/
    ├── js/
    │   └── components/
    │       ├── _1_modal-window.js
    │       └── _2_modal-video.js
    └── scss/
        └── components/
            ├── _1_modal-window.scss
            └── _2_modal-video.scss

dica

É interessante deixar sempre os arquivos JS e SCSS dos componentes intactos e fazer suas modificações em outros arquivos, mantendo uma integridade dos arquivos originais do Cody em seus projetos.

E o HTML?

O arquivo HTML é apenas um exemplo de como fazer a aplicação daquele componente. Você irá inserir aquela marcação nos seus arquivos .php, adaptando para a realidade do seu projeto.

Para saber todas as capacidades daquele componente, o ideal é ficar de olho na Info Page daquele componente. No exemplo do componente Modal Video, esta seria sua Info Page: https://codyhouse.co/ds/components/info/modal-video.