Bricks Design System Builder 2.2

Sistema de Diseño para Bricks 2.2

Configura tus variables de diseño y exporta archivos JSON nativos para el Gestor de Variables de Bricks Builder.

Viewport Min: px

Viewport Max: px

Base REM: px (?)

Paleta de Colores

Colores de Marca

Primary

Secondary

Personalizados

Fondos

BG Dark

BG Light

Page Layout

Desktop (Default)

Page Width

Offset (min.)

Column Gap

Enable responsive spacing (different gaps for tablet & mobile)

TABLET (≤ 1024PX)

Offset (min.)

Column Gap

MOBILE (≤ 768PX)

Offset (min.)

Column Gap

Tipografía Fluida

Fuente Titulares (Headings)

Fuente Texto (Body)

Line-Height Body

Line-Height Headings

Base Min (px)

Base Max (px)

Escala Móvil

Escala Desktop

Vista previa:

Espaciado Fluido

Genera valores CSS clamp() que escalan proporcionalmente entre un tamaño mínimo (móvil) y máximo (desktop), adaptándose a cualquier ancho de pantalla sin media queries.

Base Min (px)

Base Max (px)

Section Spacing

Escala de espaciado dedicada para padding vertical de secciones. Valores mayores que el espaciado de componentes, ideales para ritmo visual entre secciones.

Base Min (px)

Base Max (px)

Exportación a Bricks Builder 2.2

Descarga los 4 archivos JSON para importarlos desde el Style Manager de Bricks Builder 2.2.
Abre el Builder > Styles (icono 🎨) > cada pestaña tiene un botón Import con drag & drop de archivos JSON:
Variables → pestaña Variables > Import.
Classes → pestaña Classes > Import.
Theme Styles → pestaña Theme Styles > Import.
Settings (Style Manager) → pestaña Settings > Import.

Snippet CSS para WPCodeBox

Descarga el archivo JSON compatible con WPCodeBox. Contiene el CSS del framework (layouts, widths, responsive, alignments) listo para importar desde WPCodeBox > Tools > Import.

Importador directo para WPCodeBox

Este snippet PHP importa todas las variables, clases, theme styles y style manager directamente en la base de datos de Bricks 2.2. Crea un snippet PHP en WPCodeBox, pega este código, ejecútalo una sola vez y luego desactívalo.