Documentación

Cambios en componentes

En esta sección se encuentra la documentación de los cambios que se hicieron sobre los componentes en la nueva versión de Obelisco.

Si querés comenzar a utilizar nuestros componentes, puedes visualizar el HTML disponible en la sección Elementos.

Accesibilidad

  • Se crea la clase .sr-only que extiende de la clase .visually-hidden.

Accesos

  • En el caso de que el acceso tengo solo texto, la estructura HTML se mantiene como en el caso de acceso con icono o con descripción.
  • La clase .list-group-item-logout queda deprecada.
  • La lista de accesos por ancho completo, que utilizaba las clases .access-deck .max-cards-*, queda deprecada.
  • Respecto a la lista de accesos con ancho por accesos, que utilizaba las clases .access-deck .access-column .max-cards-* queda deprecada y se reemplazan por las clases:
    • .access-items-1: para accesos en 1 sola columna.
    • .access-items-3: para accesos en 3 columnas en desktop, 2 columnas en tablet, y 1 columna en mobile.
    • .access-items-3 row-cols-md-1: para accesos en 3 columnas en desktop, 1 columna en tablet, y 1 columna en mobile.
    • .access-items-4: para accesos en 4 columnas en desktop, 2 columnas en tablet, y 1 columna en mobile.
    • .access-items-4: para accesos en 4 columnas en desktop, 1 columna en tablet, y 1 columna en mobile.
    • Se debe tener en cuenta que, para la disposición de accesos, cada acceso se debe encontrar dentro de una etiqueta div con clase .col, los cuales estarán dentro de etiqueta div con las clases mencionadas.

Alerta

  • La clase .alert-primary queda deprecada y es remplazada por .alert-warning.
  • En el caso de alerta con cierre, en la etiqueta button se reemplaza el atributo data-dismiss="alert" por data-bs-dismiss="alert", y la clase .close se reemplaza por .btn-close.

Barra de progreso

  • La clase .bg-info se reemplaza por .bg-primary.

Bloque de trámite

  • Se elimina la clase .card.

Botones

  • Se elimina la clase .btn-icon, no es necesaria colocarla al utilizar iconos o spinner en botón.
  • Se agrega la clase .o-icon a los iconos de Boxicons y Material Symbols Rounded.
  • Se crea la clase .btn-xs para los botones que son utilizados dentro de tablas.
  • Se crea la clase .btn-tertiary y .btn-light.
  • A los botones con spinner se les agrega el atributo disabled y se modifica la variante de spinner.

Banner

  • Se agrega la clase .o-icon al ícono del componente banner con ícono.

Calendario

  • Se modifica la estructura HTML del colapsable en la variante 'Con colapsable' acorde a actualización del componente Colapsable.
  • La variante con referencias cromáticas queda deprecada.

Colapsables

  • Se modifica estructura HTML del componente, acorde a Bootstrap 5. Se reemplazan las clases .card, .card-header, y .block-body por .accordion-item, .accordion-button y.accordion-body, respectivamente.
  • Se reemplazan los atributos 'data-toggle' y 'data-target' por 'data-bs-toggle' y 'data-bs-target', respectivamente. Se agregan los atributos 'aria-expanded' y 'aria-controls'.
  • La variante de colapsable con encabezado con fondo blanco utiliza la clase .item-white acompañando a la clase .accordion-item.
  • Se reemplaza la estructura HTML de la lista e información dentro de colapsable

Colores

ClaseNuevo valorAntiguo valor
bg-primary#336ACC#FFA82E
bg-secondary#101E37#5C6A7A
bg-tertiary#005E7A-
bg-danger#CC3333#C93B3B
bg-success#26874A#26874A
bg-warning#FF9500#FFA82E
bg-info#0086AD#007BC7
bg-light#F3F6F9#F3F6F9
bg-dark#002733#38485C

Desplegables de navegación y selección

  • Se elimina de la etiqueta button de dropdown el atributo aria-haspopup="true" y se reemplaza data-toggle="dropdown" por data-bs-toggle="dropdown".
  • Se elimina la clase .dropdown-toggle de la etiqueta button de dropdown.
  • Al span con clase .btn-dropdown-text (que se encuentra dentro de la etiqueta button del dropdown), se agrega la clase .ellipsis-1.
  • En el caso de los items del desplegable con texto alineado hacia la derecha, se reemplazan las clases .text-right por .text-end.
  • En el caso de desplegable con disposición a la derecha, se reemplaza la clase .dropdown-menu-right por .dropdown-menu-end.
  • Se agrega la clase .o-icon a los iconos de Boxicons y Material Symbols Rounded.
  • Respecto a los tamaños de desplegables, se reemplazan las clases .btn-dropdown-lg y .btn-dropdown-sm por .btn-lg y .btn-sm, respectivamente.
  • Se modifica la estructura HTML de 'Desplegable con cascada', se utiliza la variante "Click outside" de Bootstrap 5. Se agrega a la etiqueta button del desplegable el atributo data-bs-auto-close="outside". El dropdown en cascada (el que se encuentra dentro de dropdown) tiene la misma estructura HTML que dropdown, con la diferencia de que al div con clase .dropdown se le agrega la clase .sub-dropdown.
  • Se modifica la estructura HTML de 'Desplegable de selección', se utiliza la variante "Click outside" de Bootstrap 5. Se eliminan de la etiqueta button del desplegable los atributos data-toggle="collapse", data-target y aria-controls, y se reemplazan por data-bs-toggle="dropdown" y data-bs-auto-close="outside". Se elimina la clase .dropdown-form. Se modifica la estructura HTML de los inputs de selección.

Destacado

  • Se eliminan las clases .card y .card-simple.
  • Las clases .card-img, .block-body, .card-title y .card-text se reemplazan por .panel-img, .panel-body, .panel-title y .panel-text, respectivamente.
  • Para la disposición de Destacado conjunto, las clases .card-deck y .max-cards-2 quedan deprecadas, se reemplazan por .highlighted-items-2.

Enlace

  • Se agrega en los enlaces el atributo rel="noopener noreferrer".

Etiquetas

  • Se crean las clases .badge-default y .badge-warning.
  • Las clases .badge-primary y .badge-secondary quedan deprecadas.

Formulario - Casillas de selección (Radio y Checkbox)

  • En el caso de checkbox:
    • Las clases .custom-control, .custom-checkbox se reemplazan por .form-checkbox.
    • La clase .custom-control-input se reemplaza por form-checkbox-input.
    • La clase .custom-control-label se reemplaza por form-checkbox-label.
  • En el caso de radio:
    • Las clases .custom-control .custom-radio se reemplazan por .form-radio.
    • La clase .custom-control-input se reemplaza por .form-radio-input.
    • La clase .custom-control-label se reemplaza por .form-radio-label.

Formularios de texto

  • Se elimina la clase .form-group.
  • Se crea la clase .form-label, la cual se asigna al label del campo.
  • Se elimina la clase .form-search que se le asignaba anteriormente al form.
  • Se crea la clase .search-container, que se asigna a un div contenedor del input de búsqueda y su botón.
  • Se crea la clase .input-search-with-button, asignada al input de búsqueda, permitiendo que el botón con el icono funcione como botón de búsqueda.
  • Para los inputs con fondo light, se reemplaza la clase .bg-light de la etiqueta div padre de los inputs, por .form-bg-light.

Grilla

BreakpointViewportAncho máximoEspaciadoÁrea diseñable
Extra small (xs)<576px100%16px100%
Small (sm)≥576px540px16px508px
Medium (md)≥768px720px24px696px
Large (lg)≥992px720px24px696px
Extra large (xl)≥1200px1140px32px1108px
Extra extra large (xxl)≥1400px1140px32px1108px

Header (encabezado)

  • Se remplazan clases .navbar-light y .navbar-expand-lg por .o-header.
  • La estructura de los componentes desplegables y buscador, se ha modificado por lo que deben ser modificados en el header también.
  • La clase .header-logo queda deprecada.
  • La clase .btn-outline-link del botón "Ingresar" se reemplaza por .btn-outline-tertiary.

Iconos

  • Se crea la clase .o-icon. Todo componente de Obelisco que lleve un ícono de Boxicons o Material Symbols requiere que se le añada la clase .o-icon para que aplique los estilos correspondientes a su componente.

Lista de pasos

  • Se agrega la clase .list-steps-item-title a los títulos de los ítems de la lista de pasos.

Mapa

  • Se reemplazan las clases .card y .card-map por .map.
  • Las clases .card-iframe, .block-body, .card-title y .card-text se reemplazan por .map-iframe, .map-body, .map-title y .map-text, respectivamente.

Mensaje de estados

  • La clase .status-primary queda deprecada y es remplazada por .status-warning.
  • Se reemplaza el atributo 'data-target' por 'data-bs-target'.

Modal

  • Se reemplaza el atributo 'data-toggle' por 'data-bs-toggle'
  • Se reemplaza el atributo 'data-target' por 'data-bs-target'
  • Se reemplaza el atributo 'data-dismiss' por 'data-bs-dismiss'
  • Se agrega el atributo 'aria-labelledby' en el div con clase .modal y el atributo 'id' en el título del modal.
  • Eliminación del 'role="dialog"' y 'role="document"' ya que Bootstrap 5 lo maneja automáticamente

Pasos de un formulario

  • Se modifica la estructura HTML del componente.
  • Las clases .step-next, .step-text, .steps, .step se reemplazan por .step-subtitle, .steps-detail, .steps-items, .step-item, respectivamente.
  • Se agrega etiqueta div con clase .steps, el cual envuelve el div con clase .steps-items y el span con clase .steps-detail.

Pestaña

  • Se modifica la clase '.tabs-slider' por '.tabs-box'.
  • Se modifica la clase '.fixedwith' por '.fixed-width'.
  • Se modifica la clase '.icons-container' por '.tabs-controls'.
  • Se modifica la clase '.right-left' por '.prev-next'.
  • El atributo data-toggle se reemplaza por data-bs-toggle en los botones dentro de las pestañas.
  • El atributo data-target se reemplaza por data-bs-target en los botones dentro de las pestañas.

Pie de Página (Footer)

  • Se modifica la clase d-lg-inline por d-md-inline, para que realice el cambio de imagen en 768px.

Spinner

  • Se agrega la variante tertiary en spinner (.text-tertiary).
  • La variante info no forma parte de las variantes de spinner de Obelisco.

Tarjetas

  • Quedan deprecadas las clases .card-simple y .card-lg.
  • En el caso de tarjeta Temática, las clases .card-horizonal, .card-simple y .card-lg se reemplazan por la clase .thematic. Se agrega al enlace de la tarjeta la clase .card-title-link.
  • Las clases .card-img-left y .card-img-top se reemplazan por la clase .card-img.
  • La clase .card-icon-left se reemplazan por .card-icon.
  • Las clases .card-deck, .max-cards-3 y .card-column quedan deprecadas y se reemplazan por .card-items-3.
  • Las clases .card-deck, .max-cards-2 y .card-column quedan deprecadas y se reemplazan por .card-items-2.

Tipografía

  • Se crean las siguientes clases para el Cuerpo: .text-xl, .text-lg, .text-md y .text-sm, las cuales corresponden a los tamaños Cuerpo XL, Cuerpo L, Cuerpo M, y Cuerpo SM, respectivamente. La clase .text-xs se utiliza para Cuerpo XS.
  • Respecto a la categoría Titulares, se crearon las clases .headline-lg, .headline-md y .headline-sm, que corresponden a Titulares L, Titulares M y Titulares S.
  • Las clases .font-weight-*, se renombraron a .fw-*. Las clases .fw-bold, .fw-semibold y .fw-normal, se utilizan para los valores de font-weight de 700, 600 y 400 respectivamente.
  • La clase .font-italic se renombro a .fst-italic.
  • Se creó la clase .underline-2 la cuál da un subrayado al elemento. El grosor del subrayado es 2px.
  • Respecto a las citas, se reemplaza la etiqueta small (utilizada para la información del autor) por etiqueta p con clase .author.

Contenido en esta página

Navegación de pie de página