Personalizando estilos

Introdução

Slidde.co oferece uma abordagem única para design web, permitindo que você personalize estilos usando CSS diretamente em cada componente. Ao contrário de construtores de sites tradicionais como o Webflow, o Slidde.co se destaca com:

• Uso de CSS Padrão:
  • Alcance qualquer estilo de site.
  • Exporte estilos para qualquer construtor de sites, tornando-os reutilizáveis se você mudar para desenvolvimento baseado em código.
• Valores Predefinidos:
  • Inspirado por bibliotecas como Tailwind, o Slidde.co fornece valores predefinidos para estilos, permitindo que você selecione opções com um clique do mouse em vez de digitar.
• Estrutura Clara:
  • Mesmo para estilos complexos, as configurações permanecem claras e não interrompem a estrutura do DOM.

Componente de Exemplo: Barra de Navegação Horizontal

Vamos pegar um componente complexo, a barra de navegação horizontal, e explorar as cinco áreas de personalização:

1. Estilos Personalizados: CSS para toda a barra de navegação.
2. Estilos Personalizados do Container: Estilos para o container esquerdo, geralmente abrigando um logotipo ou título.
3. Estilos Personalizados do Botão: Estilos para botões de desktop.
4. Estilos Ativos do Botão: Estilos para botões de desktop ativos.
5. Estilos Personalizados do Botão de Alternância: Estilos para o botão de menu hambúrguer móvel.

Você pode ver um exemplo completo de barra de navegação aqui template.

Sintaxe Avançada de CSS

Slidde.co suporta sintaxe avançada de CSS para um estilo mais preciso:

• Separador de Ponto: Use um . para separar propriedades de modificadores.
• CamelCase: Use camelCase para nomes de propriedades CSS.

Exemplos:

• &:hover.color: Cor da fonte ao passar o mouse.
• &:hover.borderColor: Cor da borda ao passar o mouse.
• padding: Espaçamento para todos os tamanhos de tela.
• md.padding: Espaçamento para telas maiores que médio (desktop).

Para definir espaçamentos diferentes para mobile e desktop: padding: .5rem & md.padding:2rem

Seletores CSS Padrão:

• & > img.height: Altura dos elementos img de primeiro nível dentro do elemento atual.
• &:first-child.color: Pseudo-classe ::first-child para o primeiro elemento filho.
• &::after.content: Pseudo-classe ::after para adicionar elementos extras.

Seguindo estas diretrizes, você pode usar o Slidde.co de forma eficaz para projetar e personalizar seus componentes web com precisão e facilidade.