Anpassa stilar

Introduktion

Slidde.co erbjuder ett unikt tillvägagångssätt för webbdesign genom att låta dig anpassa stilar med CSS direkt inom varje komponent. Till skillnad från traditionella webbplatsbyggare som Webflow, utmärker sig Slidde.co med:

• Standardanvändning av CSS:
  • Uppnå vilken webbplatsstil som helst.
  • Exportera stilar till vilken webbplatsbyggare som helst, vilket gör dem återanvändbara om du byter till kodbaserad utveckling.
• Förinställda värden:
  • Inspirerade av bibliotek som Tailwind, erbjuder Slidde.co förinställda värden för stilar, vilket gör att du kan välja alternativ med ett musklick istället för att skriva.
• Tydlig struktur:
  • Även för komplexa stilar förblir inställningarna tydliga och stör inte DOM-strukturen.

Exempelkomponent: Horisontell Navigeringsfält

Låt oss ta en komplex komponent, den horisontella navigeringsfältet, och utforska de fem anpassningsområdena:

1. Anpassade stilar: CSS för hela navigeringsfältet.
2. Container Anpassade Stilar: Stilar för den vänstra containern, som vanligtvis rymmer en logotyp eller titel.
3. Knapp Anpassade Stilar: Stilar för skrivbordsknappar.
4. Knapp Aktiva Stilar: Stilar för aktiva skrivbordsknappar.
5. Växla Knapp Anpassade Stilar: Stilar för mobilens hamburgermenyknapp.

Du kan se ett komplett exempel på navigeringsfält här mall.

Avancerad CSS-syntax

Slidde.co stödjer avancerad CSS-syntax för mer exakt styling:

• Punktseparator: Använd en . för att separera egenskaper från modifierare.
• CamelCase: Använd camelCase för CSS-egenskapsnamn.

Exempel:

• &:hover.color: Teckensnittsfärg vid hovring.
• &:hover.borderColor: Kantfärg vid hovring.
• padding: Padding för alla skärmstorlekar.
• md.padding: Padding för skärmar större än medium (skrivbord).

För att ställa in olika paddings för mobil och skrivbord: padding: .5rem & md.padding:2rem

Standard CSS-väljare:

• & > img.height: Höjden på första nivåns img-element inom det aktuella elementet.
• &:first-child.color: ::first-child pseudo-klass för det första barnelementet.
• &::after.content: ::after pseudo-klass för att lägga till extra element.

Genom att följa dessa riktlinjer kan du effektivt använda Slidde.co för att designa och anpassa dina webbkomponenter med precision och lätthet.