Personalización de estilos

Introducción

Slidde.co ofrece un enfoque único para el diseño web al permitirte personalizar estilos usando CSS directamente dentro de cada componente. A diferencia de los constructores de sitios web tradicionales como Webflow, Slidde.co se destaca con:

• Uso de CSS Estándar:
  • Logra cualquier estilo de sitio web.
  • Exporta estilos a cualquier constructor de sitios web, haciéndolos reutilizables si cambias a un desarrollo basado en código.
• Valores Predeterminados:
  • Inspirado por bibliotecas como Tailwind, Slidde.co proporciona valores predeterminados para estilos, permitiéndote seleccionar opciones con un clic del ratón en lugar de escribir.
• Estructura Clara:
  • Incluso para estilos complejos, las configuraciones permanecen claras y no alterarán la estructura del DOM.

Componente de Ejemplo: Barra de Navegación Horizontal

Tomemos un componente complejo, la barra de navegación horizontal, y exploremos las cinco áreas de personalización:

1. Estilos Personalizados: CSS para toda la barra de navegación.
2. Estilos Personalizados del Contenedor: Estilos para el contenedor izquierdo, que generalmente alberga un logo o título.
3. Estilos Personalizados de Botones: Estilos para botones de escritorio.
4. Estilos Activos de Botones: Estilos para botones activos de escritorio.
5. Estilos Personalizados del Botón de Alternar: Estilos para el botón de menú hamburguesa móvil.

Puedes ver un ejemplo completo de barra de navegación aquí template.

Sintaxis Avanzada de CSS

Slidde.co admite sintaxis avanzada de CSS para un estilo más preciso:

• Separador de Punto: Usa un . para separar propiedades de modificadores.
• CamelCase: Usa camelCase para los nombres de propiedades CSS.

Ejemplos:

• &:hover.color: Color de fuente al pasar el ratón.
• &:hover.borderColor: Color del borde al pasar el ratón.
• padding: Relleno para todos los tamaños de pantalla.
• md.padding: Relleno para pantallas más grandes que medianas (escritorio).

Para establecer diferentes rellenos para móvil y escritorio: padding: .5rem & md.padding:2rem

Selectores CSS Estándar:

• & > img.height: Altura de los elementos img de primer nivel dentro del elemento actual.
• &:first-child.color: Pseudo-clase ::first-child para el primer elemento hijo.
• &::after.content: Pseudo-clase ::after para añadir elementos adicionales.

Siguiendo estas pautas, puedes utilizar Slidde.co de manera efectiva para diseñar y personalizar tus componentes web con precisión y facilidad.