Saltar al contenido principal

Recipes

El framework nunca escribe clases CSS por ti —solo gestiona variables, para que las lean tus propias clases y los controles nativos de tu builder (ver Qué no es). Estos son algunos fragmentos cortos y listos para copiar y pegar, que leen esas variables directamente, para una clase propia o el CSS de un elemento en Bricks o en Etch. Cada variable nombrada abajo es real y ya está en tu sitio en cuanto has aplicado una receta —nada aquí necesita un valor que no tengas ya.

Una tarjeta que se levanta al pasar el ratón​

.my-card {
  padding: var(--card-padding);
  border-radius: var(--card-radius);
  box-shadow: var(--shadow-s);
  transition: box-shadow var(--duration-m), transform var(--duration-m);
}

.my-card:hover {
  box-shadow: var(--shadow-m);
  transform: translateY(-2px);
}

--card-padding y --card-radius ya coinciden con lo que hayas puesto en More settings → Cards; la sombra sube de --shadow-s a --shadow-m al pasar el ratón, y --duration-m es la misma duración de transición que usa el framework en todas partes (forzada a 0s bajo prefers-reduced-motion por el CSS base —tu transición hereda eso gratis).

Un botón a juego con el framework​

.my-button {
  background: var(--primary);
  color: var(--text-on-primary);
  border-radius: var(--radius-btn);
  padding: var(--btn-padding-block) var(--btn-padding-inline);
  font-size: var(--btn-font-size);
  font-weight: var(--btn-font-weight);
}

--text-on-primary nunca es un color fijo: se recalcula a blanco o al tono base más oscuro, el que llegue a 4,5:1 contra --primary, así que este botón se sigue leyendo bien incluso después de que cambies tu color de marca en Colors.

Una insignia en forma de píldora​

.my-badge {
  background: var(--primary-ultra-light);
  color: var(--primary);
  border-radius: var(--radius-pill);
  padding: var(--space-xs) var(--space-s);
  font-size: var(--text-s);
}

--radius-pill siempre está totalmente redondeada, sea cual sea tu radio base —no crece con --radius como sí hacen --radius-s/--radius-l, así que una insignia se queda en forma de píldora a cualquier tamaño.

Una cabecera fija bajo la que aterrizan los anclas​

El CSS base ya hace esto para los enlaces a un ancla dentro de la página (#section) en cuanto fijas la altura de tu cabecera en More settings → Layout & grid. Si construyes la cabecera fija tú mismo a mano en vez de con un ajuste del builder, dale esta altura para que las dos se mantengan sincronizadas:

.my-sticky-header {
  position: sticky;
  top: 0;
  height: var(--header-height);
}