Login
Home
Pricing
Documentation
Feedback
English

Customizing styles

Last updated on 10/29/2024@mrbirddev

Introduction

Slidde.co offers a unique approach to web design by allowing you to customize styles using CSS directly within each component. Unlike traditional website builders like Webflow, Slidde.co stands out with:

  • Standard CSS Usage:
    • Achieve any website style.
    • Export styles to any website builder, making them reusable if you switch to code-based development.
  • Preset Values:
    • Inspired by libraries like Tailwind, Slidde.co provides preset values for styles, allowing you to select options with a mouse click rather than typing.
  • Clear Structure:
    • Even for complex styles, settings remain clear and won’t disrupt the DOM structure.

Sample Component: Horizontal Navigation Bar

Let's take a complex component, the horizontal navigation bar, and explore the five customization areas:

  1. Custom Styles: CSS for the entire navigation bar.
  2. Container Custom Styles: Styles for the left container, typically housing a logo or title.
  3. Button Custom Styles: Styles for desktop buttons.
  4. Button Active Styles: Styles for active desktop buttons.
  5. Toggle Button Custom Styles: Styles for the mobile hamburger menu button.

You can see a complete navigation bar example here template.

Advanced CSS Syntax

Slidde.co supports advanced CSS syntax for more precise styling:

  • Dot Separator: Use a . to separate properties from modifiers.
  • CamelCase: Use camelCase for CSS property names.

Examples:

  • &:hover.color: Font color on hover.
  • &:hover.borderColor: Border color on hover.
  • padding: Padding for all screen sizes.
  • md.padding: Padding for screens larger than medium (desktop).

To set different paddings for mobile and desktop: padding: .5rem & md.padding:2rem

Standard CSS Selectors:

  • & > img.height: Height of first-level img elements within the current element.
  • &:first-child.color: ::first-child pseudo-class for the first child element.
  • &::after.content: ::after pseudo-class to add extra elements.

By following these guidelines, you can effectively use Slidde.co to design and customize your web components with precision and ease.

Loading...