Pular para o conteúdo
Olist Ecommerce

Pasta assets_1

🚧 Conteúdo em construção

O diretório de assets possui os recursos externos que os templates podem precisar, como imagens, folhas de estilo e JavaScripts. A pasta está subdivida em três subpastas:

  • imagens: pasta destinada aos arquivos de imagens utilizados no código.
  • javascripts: arquivos com os código que executam ações na loja.
  • sass: arquivos de estilizações baseadas no CSS.
    O acesso dessas subpastas é pela raiz da pasta assets.

Imagens

Seção intitulada “Imagens”

O subdiretório images é o local onde as imagens que são sendo usadas nos templates estão armazenadas. Para acessar as imagens do arquivo nos códigos utilize o filtro image_path, como no exemplo abaixo:
Inclusão da imagem logo.png:

<img src="{{ 'logo.png' | image_path }}"/>

Sass

Seção intitulada “Sass”

A pasta sass possui arquivos e pastas na sua raiz. Os arquivos .scss que estão na raiz são:

  • custom.scss: arquivo que estiliza as páginas de checkout e carrinho (etapas de finalização de compra ao qual os fronts não tem acesso ao HTML nem ao JS);
  • main.scss: estilos acima da dobra de toda a loja;
  • style.scss: estilos abaixo da dobra de toda a loja;

🚧 Atente-se que:

Os arquivos de estilos de páginas não iniciam com o caractere underscore (_).
Os arquivos de estilos de componentes iniciam com underscore(_) exceto no momento de importação de arquivos.

Quando os arquivos do diretório sass são modificados, um script automático compila esses arquivos em um CSS minificado e envia os arquivos para o diretório stylesheets.

Não altere diretamente os arquivos CSS, para isso, chame os arquivos CSS de um template com o filtro stylesheet_path. ​ Veja a seguir a função das pastas existentes dentro de assets > sass.

Base

Seção intitulada “Base”

Possui estilos base e fundamentais para que outros estilos possam ser estruturados.
Os arquivos existentes inicialmente são:

  • _base.scss: inclui o CSS Reset, estilos padrão de tags como títulos, <p> , <ul> , <li> , <img /> , e também classes usadas na loja toda como .container e .lazy
  • _mixins.scss: utiliza a função @mixin no Sass para facilitar a criação de breakpoints e fazer a responsividade das páginas. Você pode criar outros mixins nesse arquivo.
  • _variables: variáveis do Sass para color, font-size, font-family, font-weight e o que mais for necessário. É aconselhável preencher esse arquivo conforme o styleguide disponível no wireframe da loja (Adobe XD), para que tudo esteja de acordo com a identidade visual do cliente
  • _fonts.scss: importação dos arquivos de fonte.