Stijlen aanpassen

Inleiding

Slidde.co biedt een unieke benadering van webdesign door je in staat te stellen stijlen aan te passen met CSS direct binnen elk component. In tegenstelling tot traditionele websitebouwers zoals Webflow, onderscheidt Slidde.co zich met:

• Standaard CSS Gebruik:
  • Bereik elke website stijl.
  • Exporteer stijlen naar elke websitebouwer, waardoor ze herbruikbaar zijn als je overstapt naar code-gebaseerde ontwikkeling.
• Vooraf ingestelde Waarden:
  • Geïnspireerd door bibliotheken zoals Tailwind, biedt Slidde.co vooraf ingestelde waarden voor stijlen, waardoor je opties kunt selecteren met een muisklik in plaats van te typen.
• Duidelijke Structuur:
  • Zelfs voor complexe stijlen blijven instellingen duidelijk en verstoren ze de DOM-structuur niet.

Voorbeeldcomponent: Horizontale Navigatiebalk

Laten we een complex component nemen, de horizontale navigatiebalk, en de vijf aanpassingsgebieden verkennen:

1. Aangepaste Stijlen: CSS voor de gehele navigatiebalk.
2. Container Aangepaste Stijlen: Stijlen voor de linkercontainer, die meestal een logo of titel bevat.
3. Knop Aangepaste Stijlen: Stijlen voor desktopknoppen.
4. Knop Actieve Stijlen: Stijlen voor actieve desktopknoppen.
5. Toggle Knop Aangepaste Stijlen: Stijlen voor de mobiele hamburger menuknop.

Je kunt een compleet voorbeeld van een navigatiebalk hier zien template.

Geavanceerde CSS-syntaxis

Slidde.co ondersteunt geavanceerde CSS-syntaxis voor nauwkeurigere styling:

• Puntseparator: Gebruik een . om eigenschappen van modifiers te scheiden.
• CamelCase: Gebruik camelCase voor CSS-eigenschapsnamen.

Voorbeelden:

• &:hover.color: Letterkleur bij hover.
• &:hover.borderColor: Randkleur bij hover.
• padding: Opvulling voor alle schermformaten.
• md.padding: Opvulling voor schermen groter dan medium (desktop).

Om verschillende opvullingen voor mobiel en desktop in te stellen: padding: .5rem & md.padding:2rem

Standaard CSS Selectors:

• & > img.height: Hoogte van eerste-niveau img elementen binnen het huidige element.
• &:first-child.color: ::first-child pseudo-klasse voor het eerste kindelement.
• &::after.content: ::after pseudo-klasse om extra elementen toe te voegen.

Door deze richtlijnen te volgen, kun je Slidde.co effectief gebruiken om je webcomponenten met precisie en gemak te ontwerpen en aan te passen.