Personalizzazione degli stili

Introduzione

Slidde.co offre un approccio unico al web design permettendoti di personalizzare gli stili utilizzando CSS direttamente all'interno di ciascun componente. A differenza dei costruttori di siti web tradizionali come Webflow, Slidde.co si distingue per:

• Uso del CSS Standard:
  • Raggiungi qualsiasi stile di sito web.
  • Esporta gli stili in qualsiasi costruttore di siti web, rendendoli riutilizzabili se passi a uno sviluppo basato su codice.
• Valori Preimpostati:
  • Ispirato da librerie come Tailwind, Slidde.co fornisce valori preimpostati per gli stili, permettendoti di selezionare le opzioni con un clic del mouse anziché digitare.
• Struttura Chiara:
  • Anche per stili complessi, le impostazioni rimangono chiare e non disturbano la struttura del DOM.

Componente di Esempio: Barra di Navigazione Orizzontale

Prendiamo un componente complesso, la barra di navigazione orizzontale, ed esploriamo le cinque aree di personalizzazione:

1. Stili Personalizzati: CSS per l'intera barra di navigazione.
2. Stili Personalizzati del Contenitore: Stili per il contenitore sinistro, che di solito ospita un logo o un titolo.
3. Stili Personalizzati dei Pulsanti: Stili per i pulsanti desktop.
4. Stili Attivi dei Pulsanti: Stili per i pulsanti desktop attivi.
5. Stili Personalizzati del Pulsante Toggle: Stili per il pulsante del menu hamburger mobile.

Puoi vedere un esempio completo di barra di navigazione qui template.

Sintassi CSS Avanzata

Slidde.co supporta una sintassi CSS avanzata per uno stile più preciso:

• Separatore a Punto: Usa un . per separare le proprietà dai modificatori.
• CamelCase: Usa il camelCase per i nomi delle proprietà CSS.

Esempi:

• &:hover.color: Colore del font al passaggio del mouse.
• &:hover.borderColor: Colore del bordo al passaggio del mouse.
• padding: Padding per tutte le dimensioni dello schermo.
• md.padding: Padding per schermi più grandi di medium (desktop).

Per impostare padding diversi per mobile e desktop: padding: .5rem & md.padding:2rem

Selettori CSS Standard:

• & > img.height: Altezza degli elementi img di primo livello all'interno dell'elemento corrente.
• &:first-child.color: Pseudo-classe ::first-child per il primo elemento figlio.
• &::after.content: Pseudo-classe ::after per aggiungere elementi extra.

Seguendo queste linee guida, puoi utilizzare efficacemente Slidde.co per progettare e personalizzare i tuoi componenti web con precisione e facilità.