Kit UI de Directorio de apps
Utiliza los componentes del Kit UI del Directorio de Apps para asegurar que la interfaz de tu aplicación se ajuste a las especificaciones de estilo de SendPulse. Esto acelera significativamente el desarrollo y garantiza un diseño coherente.
El kit incluye una única hoja de estilo para la integración con el directorio de apps, junto con clases predefinidas que estilizan texto, formularios, tablas, botones y otros elementos.
El Kit UI del Directorio de Apps te permite:
- Reducir el tiempo de diseño utilizando todas las reglas CSS/SASS básicas agrupadas en un único archivo.
- Garantizar la coherencia con clases predefinidas para elementos de texto, formularios, tablas, botones y muchos más.
- Aumentar la productividad de tus diseñadores y desarrolladores gracias a los componentes Figma listos para usar.
En este artículo, repasaremos los principales componentes del Kit UI del Directorio de apps y cómo utilizarlos.
Primeros pasos
Para empezar a utilizar el Kit UI del Directorio de Apps, debes añadir un enlace al código CSS del kit en el <head> de la página de tu app. No es necesario realizar ningún otro paso de configuración.
<link rel="stylesheet" href="https://cdn.sendpulse.com/dist/css/sp-marketplace-app-ui.min.css">
Para ajustar el diseño de los elementos del directorio de apps, utiliza el kit UI de Figma con todos los componentes esenciales.
Configura los ajustes de tipografía
El kit UI incluye un amplio conjunto de estilos tipográficos que se alinean con el lenguaje de diseño de SendPulse. Estos estilos garantizan la coherencia y legibilidad en toda la página de tu aplicación.
Cuerpo del texto
El tamaño de fuente base es 16px con una altura de línea de 1.428. Los párrafos (<p>) ncluyen un espaciado vertical predeterminado para facilitar la lectura. Puedes utilizar la clase CSS .lead para ampliar el texto introductorio.
Cada bloque de párrafo (<p>) recibe un margen inferior de la mitad de su altura de línea calculada (10px por defecto).
Elementos de texto en línea
Utiliza elementos de texto en línea para estilizar rápidamente un texto específico del cuerpo. Están disponibles los siguientes elementos:
<mark> |
Resalta el contenido clave.
Ayuda a llamar rápidamente la atención de los usuarios sobre partes clave del texto, como advertencias o instrucciones. |
<del> |
Muestra el contenido eliminado.
Ayuda a mostrar cambios en el contenido, como registros de actualizaciones o comentarios. |
<s> |
Tacha el texto para mostrar datos obsoletos o irrelevantes. |
<ins> |
Añade contenido insertado.
Ayuda a mostrar texto nuevo en documentación actualizada o cambios de versión. |
<u> |
Aplica un subrayado.
Ayuda a dar estilo a los enlaces o a resaltar frases clave en los mensajes. |
<small> |
Aplica el formato de texto secundario (más pequeño).
Ayuda a mostrar texto explicativo, como descripciones de campos de entrada o marcas de tiempo de actualización. |
<strong> |
Aplica negrita al texto.
Ayuda a resaltar un mensaje central o una instrucción clave. |
<em> |
Formatea el texto en cursiva.
Ayuda a resaltar palabras importantes o aclaraciones en las descripciones. |
<abbr> |
Muestra un tooltip al colocar el cursor encima.
Ayuda a explicar abreviaturas, especialmente en formularios o especificaciones API. Utiliza la clase CSS |
<blockquote> |
Formatea el texto como una cita.
Ayuda a insertar comentarios de usuarios o referencias a reseñas externas. Utiliza la clase CSS |
Código
Utiliza las etiquetas de formato de código para mostrar tu texto como código de programación. Están disponibles las siguientes opciones:
<code> |
Envuelve fragmentos de código en línea. |
<kbd> |
Indica la entrada que normalmente se introduce mediante el teclado. |
<pre> |
Incluye varias líneas de código.
Añade todos los caracteres especiales utilizando Unicode para una representación correcta. Utiliza la clase |
<var> |
Indica variables. |
<samp> |
Indica bloques de salida de ejemplo. |
Listas
Utiliza las listas de etiquetas o clases para agrupar un conjunto de elementos relacionados. Las siguientes listas están disponibles en el Kit UI del Directorio de Apps:
<ul> |
Crea una lista no ordenada. |
<ol> |
Crea una lista ordenada. |
<dl> |
Crea una lista descriptiva con los elementos y sus descripciones mostrados debajo con un margen izquierdo.
Los términos largos en listas horizontales se truncan automáticamente y se apilarán en pantallas más pequeñas. |
También puedes estilizar las listas no ordenadas utilizando las siguientes clases CSS:
.list-unstyled |
Elimina el estilo de lista por defecto y el margen izquierdo en los elementos de la lista (sólo hijos inmediatos). También debes añadir la clase a las listas anidadas.
Útil para menús de barra lateral donde es importante mostrar una lista de enlaces sin marcadores por defecto para un diseño más compacto. |
.list-inline |
Coloca todos los elementos de la lista en una sola línea con un ligero relleno.
Ayuda a mostrar las pestañas de navegación o una lista de opciones de inicio de sesión como una fila horizontal. |
Encabezados
Utiliza etiquetas de encabezado HTML estándar para resaltar texto o secciones individuales. También puedes utilizar clases CSS (.h1 a .h6) para aplicar estilos de encabezado al texto en línea sin formatearlo como encabezado. Están disponibles los siguientes encabezados:
h1 |
.h1 |
Negrita | 40px |
h2 |
.h2 |
Negrita | 24px |
h3 |
.h3 |
Regular | 20px |
h4 |
.h4 |
Regular | 18px |
h5 |
.h5 |
Regular | 16px |
h6 |
.h6 |
Regular | 14px |
Para incluir texto secundario dentro de un encabezado, utiliza la etiqueta <small> o la clase .small.
Alineación y transformación del texto
Controla la alineación del texto utilizando las siguientes clases de utilidad:
.text-left |
Alinea el texto a la izquierda. |
.text-center |
Centra el texto. |
.text-right |
Alinea el texto a la derecha. |
.text-justify |
Justifica el formato del texto. |
.text-nowrap |
Desactiva el ajuste automático del texto. |
Transforma el texto utilizando estas clases:
.text-uppercase |
Escribe el texto en mayúsculas. |
.text-lowercase |
Escribe el texto en minúsculas |
.text-capitalize |
Escribe la primera letra de cada palabra en mayúscula. |
Configura los ajustes de las tablas
Utiliza las clases de tabla del kit para garantizar la coherencia y la capacidad de respuesta en la página de tu aplicación. Están disponibles las siguientes clases de tabla:
.table |
Aplica un estilo básico, incluido un ligero relleno y separadores horizontales en todos los elementos <table>. |
.blue-table |
Aplica el estilo de tabla por defecto de SendPulse, incluyendo la ausencia de bordes de cabecera, alternando los fondos de fila. |
.table-striped |
Añade franjas a las filas <tbody> para mejorar la legibilidad (requiere el soporte :nth-child). |
.table-bordered |
Añade bordes alrededor de todas las celdas de la tabla y de la propia tabla. |
.table-hover |
Habilita un estado hover en las filas <tbody> para resaltar la fila bajo el cursor.
Mejora la interacción con el usuario, por ejemplo, al seleccionar un registro de una lista de contactos. |
.table-condensed |
Reduce el relleno de las celdas a la mitad para obtener un diseño de tabla más compacto. |
.table-responsive |
Envuelve una tabla .table para permitir el desplazamiento horizontal en pantallas de menos de 768px (sin efecto en pantallas más grandes).
Proporciona una forma sencilla de ver tablas en dispositivos móviles, como la visualización de estadísticas de campañas de correo electrónico. |
Utiliza clases contextuales para dar formato a elementos específicos, como filas de tabla o celdas individuales. Están disponibles las siguientes clases:
.active |
Aplica un color de hover a toda una fila o celda. |
.success |
Indica una acción exitosa o positiva. |
.info |
Indica un contexto neutro e informativo. |
.warning |
Indica una advertencia que puede requerir atención. |
.danger |
Indica una acción peligrosa o potencialmente negativa. |
Configura los ajustes de los formularios
Añade varios formularios para aceptar diferentes tipos de entradas de usuario. Cada elemento tiene su propio conjunto de tipos y controles admitidos. Están disponibles los siguientes elementos de formulario:
<form> |
El contenedor principal para las entradas del formulario. Puede tener estilo de bloque, inline u horizontal. |
<input> |
Un contenedor para varios tipos de entrada, como texto o selección.
Añade el atributo |
<textarea> |
Un contenedor para entradas de texto multilínea. Controla la altura del área de texto con el atributo rows. |
<select> |
Un contenedor para listas desplegables. Para listas de selección múltiple, utiliza el atributo multiple.
Añade el atributo |
Puedes estilizar y controlar todos los elementos y tipos de formularios utilizando clases.
Controles de formulario básicos
Aplica controles de formulario a tipos de formulario estándar basados en texto (text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel y color) para anular su configuración en una línea o añadir opciones de estilo particulares utilizando lo siguiente:
.form-control |
Estilo base (100% ancho, relleno, bordes y tamaño de fuente) para<input>, <textarea> y <select>. |
.form-control-date |
Anula los estilos específicos de <input type="date"> para que el diseño y el espaciado sean coherentes. |
.form-control-time |
Anula los estilos específicos de <input type="time"> para que el diseño y el espaciado sean coherentes. |
.form-control-static |
Estiliza un bloque de texto no editable para alinearlo con otros controles de formulario.
Ayuda a mostrar un valor predefinido a los usuarios en el mismo estilo visual que otros campos, con la edición desactivada. |
.help-block |
Muestra texto contextual de ayuda a nivel del bloque debajo de un control de formulario (vinculado a través de aria-describedby).
Ayuda a explicar los formatos de entrada o las restricciones, como la longitud mínima de la contraseña, sin saturar la interfaz. |
Si necesitas una entrada de texto multilínea, utiliza <textarea> con .form-control. En cuanto a las listas desplegables (<select>), aplica sólo .form-control. Los navegadores pueden imponer su propio redondeo a los elementos select nativos.
Grupos de entrada
Aplica un mismo estilo a lo largo de varios formularios utilizando grupos de formularios y sus complementos en un contenedor para anteponer o añadir elementos unificados. Puedes agrupar elementos de entrada utilizando las siguientes clases:
.input-group |
Agrupa un <input> con sus complementos (texto o botones) en una única unidad en línea.
Ayuda a insertar un prefijo o sufijo (por ejemplo, un símbolo de moneda o un botón) directamente adyacente al campo de entrada para una interfaz más intuitiva. |
.input-group-addon |
Estiliza el elemento (texto o botón) adjunto inmediatamente antes o después del <input>.
Ayuda a mostrar unidades (por ejemplo, |
Casillas de verificación y botones de radio
Incluye casillas de verificación para permitir a los usuarios seleccionar una o varias opciones de una lista, o añade botones de radio para seleccionar una opción de entre muchas. Utiliza las siguientes clases para envolver y controlar el estilo de las casillas de verificación y los botones de radio:
.checkbox |
Envuelve un <input type="checkbox"> apilado y su <label>. |
.radio |
Envuelve un <input type="radio"> apilado y su <label>. |
.checkbox-inline |
Muestra una casilla de verificación y su <label> en la misma línea (inline). |
.radio-inline |
Muestra un botón de radio y su <label> en la misma línea (inline). |
.disabled (wrapper) |
Se aplica a .checkbox, .checkbox-inline, .radio o .radio-inline para mostrar un cursor desactivado y dar una apariencia más difuminada. |
Incluso si no hay texto de etiqueta visible, envuelve el input en .checkbox o .radio, e incluye un aria-label en el <input> para que los lectores de pantalla lo anuncien correctamente
Contenedores de validación y retroalimentación
Encierra los controles de formulario, sus etiquetas y el texto de ayuda en clases de estilo de validación y retroalimentación para reflejar los estados de éxito, advertencia o error. Para añadir un ícono de retroalimentación, combina una clase de validación con .has-feedback e incluye el elemento .form-control-feedback dentro.
.has-success |
Aplica un estilo de éxito (verde) al contenedor y a sus elementos hijos (etiquetas, entradas y texto de ayuda). |
.has-warning |
Aplica un estilo de advertencia (amarillo) al contenedor y a sus elementos hijos. |
.has-error |
Aplica un estilo de error (rojo) al contenedor y a sus elementos hijos. |
.has-feedback |
Posiciona absolutamente un ícono de retroalimentación dentro de un .form-control cuando se combina con una clase de validación. |
.form-control-feedback |
Posiciona absolutamente el ícono en un contenedor .has-feedback. |
.sp-icon icon-check |
Muestra un ícono de marca de verificación (éxito). |
.sp-icon icon-warning |
Muestra un ícono de advertencia. |
.sp-icon icon-closed |
Muestra un ícono de “error/cerrado” (error). |
Te recomendamos ampliamente incluir un <span class="sr-only"></span> oculto (por ejemplo, «(success)») asociado a través de aria-describedby para que los lectores de pantalla anuncien el estado de validación.
Dimensiones y diseño
Ajusta la altura de los controles individuales, el tamaño global de los grupos de formularios (en formularios horizontales) y el ancho de los controles a través de las columnas de la cuadrícula.
.input-lg |
Renderiza un control de formulario más grande/alto y coincide con la altura de .btn-lg.
Ayuda a crear campos prominentes, por ejemplo, en un formulario de búsqueda con fuentes más grandes para una mejor legibilidad. |
.input-sm |
Renderiza un control de formulario más pequeño/corto y coincide con la altura de .btn-sm.
Útil para paneles de filtros compactos o configuraciones donde el espacio es limitado. |
.form-group-lg |
En un diseño .form-horizontal amplía tanto la etiqueta como el control a un tamaño “grande”.
Útil para elementos clave del formulario, como el campo de entrada principal al configurar una clave API. |
.form-group-sm |
En un diseño.form-horizontal reduce tanto la etiqueta como el control a un tamaño “pequeño”. |
.col-xs-2 |
Envuelve un control en esta columna de la cuadrícula para forzarlo a ocupar 2 columnas en el punto de quiebre xs.
Ayuda a ajustar el ancho del campo en una sola fila en dispositivos móviles. |
.col-xs-3 |
Envuelve un control en esta columna de la cuadrícula para forzarlo a ocupar 3 columnas en el punto de quiebre xs. |
.col-xs-4 |
Envuelve un control en esta columna de la cuadrícula para forzarlo a ocupar 4 columnas en el punto de quiebre xs. |
Configura los ajustes de los botones
Añade y configura botones en la página de tu aplicación utilizando clases de botones en elementos <a>, <button> e <input>. Utiliza las siguientes clases para definir el contexto visual, el tamaño y el estado del botón:
.btn |
Clase base para todos los botones que aplica relleno, borde, tamaño de fuente y cursor. |
.btn-default |
Estilo neutro («secundario») que aplica un fondo claro y texto oscuro. |
.btn-primary |
Estilo de acción primaria que aplica un fondo azul fuerte y texto blanco. |
.btn-success |
Indica una acción exitosa o positiva que aplica un fondo verde. |
.btn-info |
Estilo de información contextual que aplica un fondo azul claro. |
.btn-warning |
Indica precaución y aplica un fondo naranja. |
.btn-danger |
Indica una acción potencialmente peligrosa y aplica un fondo rojo. |
.btn-link |
Estiliza un enlace para que parezca un botón (sin fondo, sólo texto subrayado). |
.btn-lg |
Botón más grande/alto que coincide con la altura de .btn btn-lg. |
.btn-sm |
Botón más pequeño/corto que coincide con la altura de .btn btn-sm. |
.btn-xs |
Botón extrapequeño que utiliza el tamaño estándar más pequeño. |
.btn-block |
Hace que el botón ocupe todo el ancho de su contenedor padre. |
.active |
Fuerza una apariencia presionada (fondo más oscuro y sombra insertada). |
.disabled |
Desvanece visualmente el botón y desactiva los eventos de puntero (para <a> y <button>).
Utiliza |
Puedes aplicar clases de botón a los elementos <a> y <button>. Sin embargo, sólo se admiten elementos <button>dentro de los componentes nav y navbar del directorio de la apps.
Internet Explorer 9 y sus versiones anteriores aplican una sombra de texto no deseada a los elementos <button> deshabilitados. No existe una solución completa en CSS para este problema.
Configura los ajustes de los elementos de imagen
Añade y configura imágenes en la página de tu app utilizando clases y controles. Puedes hacer que las imágenes respondan y cambiar su forma según sea necesario.
Escala las imágenes con su contenedor padre y céntrala utilizando las siguientes clases:
.img-responsive |
Aplica max-width: 100%; height: auto; display: block; para que tu imagen escale con fluidez. |
.center-block |
Centra horizontalmente un elemento de nivel de bloque (por ejemplo, una imagen adaptable). |
Imágenes SVG con .img-responsive pueden estar mal dimensionadas en IE8-10. Para corregirlo, añade width: 100% \9; en un cambio personalizado. Bootstrap no lo incluye por defecto.
Aplica redondeos u otros estilos utilizando las siguientes clases:
.img-rounded |
Añade pequeñas esquinas redondeadas a la imagen. |
.img-circle |
Representa la imagen como un círculo perfecto (requiere una imagen de origen cuadrada). |
.img-thumbnail |
Aplica un borde claro, relleno y esquinas redondeadas para obtener un aspecto de miniatura. |
Internet Explorer 8 no admite el redondeo basado en CSS. Es posible que las imágenes sólo se muestren con esquinas cuadradas.
Clases de ayuda
Utiliza las clases de ayuda para obtener más opciones de formato de elementos. Por ejemplo, puedes controlar el color y la visibilidad del texto, añadir un ícono de cierre o formatear un formulario como si fuera un signo de intercalación.
Colores de texto contextuales
Utiliza las clases de colores de texto contextuales para transmitir significado o énfasis a través del color. Asegúrate siempre de que cualquier significado semántico implícito en el color se comunique también a través del texto visible o del texto oculto para lectores de pantalla (por ejemplo, utilizando .sr-only).
.text-muted |
Aplica un color más claro y apagado para restar énfasis al texto menos importante (por ejemplo, “última actualización”). |
.text-primary |
Colorea el texto con el color primario de la marca. Suele utilizarse para enlaces importantes o llamadas a la acción. |
.text-success |
Aplica un tono verde. Suele utilizarse para indicar éxito (por ejemplo, “Configuración guardada”). |
.text-info |
Aplica un tono azul claro. Suele utilizarse para mensajes informativos o sugerencias. |
.text-warning |
Aplica un tono naranja. Se utiliza para llamar la atención sobre un texto de advertencia (por ejemplo, “La contraseña caduca pronto”). |
.text-danger |
Aplica un tono rojo. Se utiliza para resaltar errores o acciones críticas (por ejemplo, “Eliminar cuenta”). |
En algunos casos, las clases de énfasis no pueden aplicarse debido a la especificidad de otro selector. En la mayoría de los casos, una solución suficiente es envolver el texto en un <span> con la clase.
Colores de fondo contextuales
Las clases de fondo de texto establecen un color de fondo sólido en cualquier elemento a nivel de bloque. Al igual que con los colores de texto, evita confiar sólo en el fondo para dar significado. Incluye texto accesible o etiquetas ocultas según sea necesario.
.bg-primary |
Aplica el color primario de la marca como fondo. Útil para encabezados o banners. |
.bg-success |
Aplica un fondo verde para indicar éxito (por ejemplo, “Operación completada”). |
.bg-info |
Aplica un fondo azul claro para secciones informativas o callouts. |
.bg-warning |
Aplica un fondo naranja para llamar la atención sobre el contenido de advertencia. |
.bg-danger |
Fondo rojo en contextos críticos o peligrosos (por ejemplo, alertas de error). |
En algunos casos, las clases contextuales de fondo no pueden aplicarse debido a la especificidad de otro selector. Una solución suficiente es envolver el contenido del elemento en un <div> con la clase.
Visibilidad y visualización
Controla si un elemento se muestra u oculta, por ejemplo para tecnologías de asistencia, con estas clases de utilidad. Utilizan !important para anular la mayoría de las reglas de visualización.
.show |
Obliga a un elemento a mostrarse como un bloque, anulando cualquier otra configuración de visualización visualización (por ejemplo .hidden).
Ayuda a mostrar una sección oculta de la documentación sólo en determinadas condiciones, como ampliar la configuración de integración avanzada. |
.hidden |
Hace que un elemento se elimine del diseño(display: none), ocultándolo de las tecnologías de asistencia.
Ayuda a eliminar temporalmente determinados formularios o mensajes de la interfaz, por ejemplo, para ocultar una opción de ajuste de autenticación personalizada hasta que esté disponible. |
.invisible |
Oculta un elemento (visibility: hidden) pero permite que ocupe espacio en el flujo del documento.
Ayuda a mantener la alineación del diseño cuando se oculta temporalmente un elemento gráfico, por ejemplo, utilizando un ícono de estado para garantizar que la estructura de la documentación permanezca intacta. |
Utiliza .hidden cuando necesites eliminar un elemento por completo (por ejemplo, para ocultar un modal). Utiliza .invisible cuando necesites hacer invisible un elemento manteniendo intacto su espacio de diseño (por ejemplo, como marcador de posición para contenido futuro).
Clases adicionales
Añade elementos comunes de interfaz de usuario, como íconos de cierre y caretas. Están diseñados para escenarios específicos (por ejemplo, descartar alertas o marcar listas desplegables) y sólo deben utilizarse en sus contextos previstos.
.close |
Estiliza un botón (normalmente <button> o <a>) con un relleno mínimo y un gran símbolo “×”. Se utiliza para descartar alertas, modales u otros componentes descartables.
Incluye siempre un |
.caret |
Renderiza una pequeña flecha apuntando hacia abajo, comúnmente usada dentro de botones desplegables. En los contenedores desplegables, se invierte automáticamente para apuntar hacia arriba.
Ayuda a los desarrolladores a indicar visualmente la presencia de opciones de integración adicionales (por ejemplo, la selección de un canal de comunicación) sin gráficos personalizados. |
Última actualización: 16.06.2025
o