Oxyprops - Configuracion - Oxygenados La comunidad
Oxygenados La comunidad hispana
Recoda White Full Logo
Patrocinador
Menu
post oxygen builder
img-4

Oxyprops - Configuracion

Listado Plugins
Prólogo

Ya hemos mencionado en la review inicial de este producto que definitivamente este es un producto que es de lo mejor que hay en el mercado y que si o si tiene que estar dentro de tu arsenal de plugins.
Por eso no podemos dejar de hacer una segunda entrada para mostrar mas a fondo las características de Oxyprops , así que vamos a meternos un poco mas en profundidad el panel de configuración inicial.

Primer vistazo al panel de configuración

En el scrolling Image de abajo vemos a groso modo el panel de configuración del que vamos a tratar de dar una visión mas o menos clara.

Ajustes
  • Todas las opciones seleccionables del panel tienen a su izquierda un icono que, situando el puntero del ratón sobre él desplegará un tooltip con información sobre la opción.
  • Configuración Principal
    En la parte superior del panel tenemos una serie de opciones agrupadas en tres categorías:

    Try your settings for various schemes

    Builder Features

    Utility Stylesheets

    Setings Generales Oxyprops

    Try your settings for various schemes - Prueba tus ajustes para varios esquemas

    Esta opción solo es para fines demostrativos y no afecta para nada ni en el plano operativo del constructor ni en el frontend, cambiando entre las seis opciones tendrás una orientación visual de los diferentes esquemas.

    Builder Features - Características en el Constructor

    Son las diferentes opciones que se cargarán en el constructor de Oxygen:

    Activate OxyProps context menu -  Activar el menú contextual de OxyProps

    Con el menú contextual de OxyProps, puedes acceder directamente a los accesorios personalizados.
    Click con el botón derecho del ratón en un campo de valor y se le mostrarán los props relevantes.
    Click, el valor se rellenará y la unidad se configurará.
    Para ejemplo la imagen de abajo que muestra el panel de selección que aparece cuando se hace click con el botón derecho del ratón en el campo de unidades de color de texto.
    img-7

    Add OxyProps Elements to Plus Menu - Añadir elementos OxyProps al menú de elementos

    OxyProps viene con elementos pre-construidos, como el conmutador "Dark-Mode"
    Esta opción creará una sección en el menú Oxygen Builder donde podrá acceder a estos elementos De momento solo hay tres elementos pero se están desarrallonado mas.
    Los actuales son los que abajo se muestran en la imagen
    img-8

    Replace Oxygen Global Settings - Sustituir la configuración global de Oxygen

    Sobrescribir la configuración global actual de Oxygen con los valores predeterminados de OxyProps utilizando las propiedades personalizadas de OP.
    De cualquier manera, siempre podrás modificar los ajustes globales individualmente a tu gusto.
    Para volver a los valores predeterminados de OxyProps después de la modificación, desmarca esta opción, guarda, vuelve a marcar y vuelve a guradar de nuevo.

    Make Colors available as global colors - Hacer que los colores estén disponibles como colores globales

    Con esta opción, se crearán dos conjuntos de colores.El primero tendrá todos los colores lógicos, el segundo todas las muestras de color.¡Ahora, en cualquier lugar donde apliques su color global o-marca, estará vinculado al accesorio, y reactivo a los ajustes de los esquemas de color !

    Apply OxyProps Normalize - Aplica Oxyprops Normalize

    Carga la hoja de estilos OxyProps Normalize que define los preajuste

    Custom Color Schemes Stylesheet - Hoja de estilos de combinaciones de colores personalizadas

    Se creará una hoja de estilo en Oxygen Builder donde podrás definir todos los colores lógicos con tus propios valores, y anular los valores predeterminados y los temas de OxyProps.

    Utility Stylesheets

    Las hojas de estilo de las clases pueden representar una enorme cantidad de kilobytes, ya que contienen todas las combinaciones posibles.
    Para evitar la sobrecarga, sólo tienes que seleccionar las que quieres cargar en el constructor y en el front-end.

    All of them! -  Todas
    Caragará todas las opciones, estén o activadas en el checkbox.

    Colors - Colores

    Aplicará los colores de OxyProps a los elementos con clases de utilidad de color.

    Colors Schemes - Esquemas de Colores

    Esquemas de color para cada uno de los Colores OxyProps disponibles.
    Esquemas de color para cada uno de los colores OxyProps disponibles.
    Se pueden anidar.

    Aspect Ratios

    Este paquete hace que los accesorios personalizados de OxyProps estén disponibles como clases.
    Puedes elegir entre incluir o no el object-fit:cover.

    Easing

    Este paquete hace que los accesorios personalizados de OxyProps estén disponibles como clases. Establece fácilmente las funciones de temporización para animaciones y transiciones.

    Layers

    Las clases de Oxyprops Layers permiten asignar z-index.

    Cards

    Dos juegos de cards predefinidos.

    12 Columns Grid

    Un conjunto de clases para crear un diseño en una cuadrícula de hasta 12 columnas a través del ancho de la página de Oxygen Builder.

    Gradients

    Un conjunto de degradados de fondo y de texto elaborados por expertos. Una selección de combinaciones y filtros para hacer el diseño aún más interesante.

    Shadows

    Un conjunto de utilidades de sombras para contenedores, tanto interiores como exteriores, para combinar con esquemas de color y aportar profundidad a los diseños.

    Tipography

    Todo lo que se necesita para estilizar textos.
    Familias de fuentes. Pesos de las fuentes. Tamaños fluidos y estáticos. Guión y seguimiento. Alineaciones, orientaciones, direcciones...

    Animations

    Este paquete hace que los props personalizados de animación OxyProps estén disponibles como clases.
    Asigna fácilmente animaciones en los estados base, hover y activo.

    Bordes

    5 variaciones de formas "Shapes".
    Radio condicional exclusivo.

    Buttons

    Botones Oxyprops disponibles en todos los colores, lisos o con contorno. Combínalos con animaciones y de relajación para obtener impresionantes efectos hover.

    Layouts

    Las clases de OxyProps incluyen potentes clases que le ayudarán a crear diseños fluidos, receptivos y consistentes en poco tiempo.
    Paleta de Colores

    En esta sección ajustamos los colores que conformarán la base de la paleta de colores.

    Canvas Color

    El lienzo es la muestra de color para fondos y textos principales.
    Actualmente ofrece 6 variaciones de grises.
    Define los colores de superficie{1-4} y de texto{1-2}.

    Brand Color

    Como puedes imaginar, Brand define la muestra de color de la marca.
    Utilizar --o-brand y --o-brand-hover como colores lógicos que se adaptarán al esquema de color. Todos los tonos estarán disponibles  --o-user-brand-{0-9}
    Interpretar {0-9} como: del 0 al 9.

    Accent Color

    Usar color de acento(Acent Color), que es color un complementario al color de Marca es a menudo una buena elección.
    Utiliza --o-acento y --o-acento-hover como colores lógicos que se adaptarán al esquema de color. Al igual que Brand Color tonos estarán disponiblescomo --o-user-accent-{0-9}

    Links Color

    Esto define el color para los enlaces activos. OxyProps Normalize lo aplica automáticamente a los enlaces y botones. Pero no hay por qué preocuparse, OxyProps está construido con selectores de especificidad cero para que siempre puedas redfinir fácilmente los valores donde quieras.

    Visited Color

    Todas las variantes están disponibles para el uso. E incluso si la intención original es para los enlaces visitados. Utilízalos de la manera que quieras.
    img-9

    Puedes utilzar cualquiera de los colores que se muestran con calaquier combianción entre ellos o bien usar la opción Custom que hay al final de cada columna y establacer el color deseado.

    Fluid Typography

    Aqui  es donde se trabaja en las fuentes fluidas (fluid fonts)

    Escalas y Ratios

    Se pueden ajustar los parámetros de los tamaños de las fuentes bien por deslizadores bien con los botones que tienen unos valores predeterminados.
    img-10
    Siempre podemos ver de manera gráfica como quedarían nuestras fuentes con los cambios realizados y actuar en consecuencia.
    img-11
    Ya por última configuración queda la relación de tramaño entre Headings y Subheadings, el cual se va estableciendo con un deslizador y en todo momento tenemos referencia visual de los cambios que vamos realizando.
    img-12
    Y ya para rematar la faena nos muestra el resultado final de todos y cada uno del resultado de los ajustes en los diferentes elementos afectados; así como la paleta de colores con todas las variantes del 0 al 10.
    img-13
    0 0 votos
    Puntuación
    Suscribir
    Notificar de
    guest
    0 Comentarios
    Viejos
    Nuevos Más votados
    Comentarios en línea
    Ver todos los comentarios
    img-16
    Numbify

     ¿Qué es Numbify?
    Numbify es una herramienta para Oxygen que sirve para clonar, (por no decir copiar), páginas web.
    Su funcionamiento se basa en la copia de elementos del frontend, para pegarlos en la interface de edición de Oxygen, estos elementos pueden ser, por lo menos hasta el momento de redactar esta review, cualquier elemento del DOM con la limitación jerárquica máxima de una sección; esto quiere decir que no podrás copiar de una tacada todo el body.

    Leer más
    img-17
    Code Snippets

    Es el que mas tiempo lleva en funcionamiento y también es el mas barato al ser totalmente gratuito.

    Leer más
    img-18
    Advanced Scripts

    De los mas veteranos en el mundo de Oxygen cuenta a su favor con la experiencia de los propios creadores en este campo y el apoyo logrado en el facebook oficial de Oxygen.

    Leer más