OxyMade

Tu próxima web en Oxygen empieza por decisiones que ya tomaste

Abres un proyecto nuevo y, antes de diseñar nada, vuelves a definir tamaños de texto, márgenes, tonos del color de marca y estilos de botón. Lo hiciste en la web anterior y en la de antes. Tres páginas después, dos secciones tienen separaciones distintas y nadie recuerda cuál era la buena.

Lo que cobras por un sitio es el diseño, pero buena parte de tus horas se va en reconstruir el sistema que lo sostiene. Cuando esas reglas no existen desde el primer día, cada página las inventa de nuevo y el resultado se nota.

OxyMade es un framework para Oxygen con esas reglas ya tomadas. No es un constructor. Necesitas Oxygen, y el criterio de diseño sigue siendo tuyo.

Medidas y colores con reglas fijas

• Tipografía adaptable: escala según la pantalla, con ajustes para títulos H1 a H3, textos display, cuerpo y letra pequeña.
• Espaciado: una escala de s1 a s72, donde cada unidad vale 4 px, y separaciones de sección de none a xxl.
• Radios de borde: de none a full, iguales en todo el sitio.

La paleta se genera sola a partir de cinco colores de marca: Primary, Secondary, Tertiary, Accent y Neutral. A ellos se suman tres de estado: Error, Warning y Success.

Cada color tiene 11 tonos semánticos y 10 variaciones de transparencia. Es decir, el fondo suave de una alerta o el borde de una tarjeta salen de la misma familia, sin elegir un código de color distinto cada vez.

Clases de utilidad y componentes listos

El sistema se inspira en Tailwind y funciona con variables CSS. Sus clases cubren márgenes y rellenos, flexbox y grid, anchos y altos, tipografía, fondos, bordes y puntos de corte.

Sobre esa base vienen estilos para tarjetas y contenedores, insignias, campos de formulario, alertas, navegación y menús.

Los botones van con un complemento para el nuevo Oxygen: cuatro tipos, cinco colores, tres tamaños y opciones de icono, en 144 variaciones entre estilos, tamaños y estados.

Bloques y plantillas, una oferta aparte del framework

El framework es la base. Por separado, OxyMade mantiene Layers, un conjunto de bloques como cabeceras, pies, secciones hero y tablas de precios, y una colección de plantillas de página listas para usar.

Se usan desde la biblioteca online de oxymade.com: copias el bloque o la página y lo pegas en el editor de Oxygen, sin proceso de importación. Esos bloques llevan marcas FREE o PRO, y las plantillas tienen su propio acceso, así que no los des por incluidos al instalar el framework.

Instalar la base y probarla en un sitio de ensayo

Está hecho para el nuevo Oxygen, y necesitas ese constructor en tu WordPress. También hay bloques para Oxygen Classic: si sigues en esa edición, comprueba en un sitio de prueba qué partes te sirven.

1. Instala el nuevo Oxygen en un sitio de ensayo.
2. Sube el framework a WordPress como cualquier plugin y actívalo.
3. Monta una página con sus clases de espaciado y tipografía.
4. Revisa la paleta con tus colores de marca.
5. Prueba esa página en móvil antes de llevar el sistema a un proyecto real.

Con qué versión de Oxygen trabajas decide el resto

Oxygen es el constructor que necesitas debajo de OxyMade.

OxyExtras resuelve otro problema: añade 41 componentes, como carruseles, paneles off canvas, megamenús y minicarrito. Es para el Oxygen clásico y no se aplica al nuevo Oxygen.

Cuatro aclaraciones para usar OxyMade

¿Sirve sin Oxygen?

No. Sus recursos están hechos específicamente para ese constructor.

¿Instalo algo para usar las clases?

Sí. El framework se sube y se activa como un plugin de WordPress.

¿Cómo se usan las plantillas?

Se copian desde la biblioteca online de oxymade.com, que tiene su propio acceso, y se pegan en el editor de Oxygen.

¿Puedo cambiar lo que pego?

Sí. Después de pegar un bloque o una plantilla, lo personalizas en Oxygen.