Este es el framework de desarrollo web Framework Midesof, una versión desarrollada por el Ministerio de Desarrollo Social y Familia que utiliza como base framework Bootstrap 5.3.3.
Esta herramienta pretende sentar las bases para todos los desarrollos frontend del Midesof y con esto, establecer un lineamiento uniforme y claro en diseño de productos digitales de cara a la ciudadanía.
Framework Midesof
Versión 2.0
Enero 2025
Herramientas
Figma
Manual y guía visual Figma
Manual de uso y desarrollo en Figma que permite visualizar y comprender los elementos de diseño definidos en este Kit Digital.
Archivo desarrollado en código PHP, que sirve como base para apoyar el comienzo de un nuevo desarrollo. Contiene una muestra de todos los elementos del Framework que aquí se presentan.
Este framework ministerial está basado en una versión de Bootstrap 4 llamada Twitter. Adicionalmente Cuenta con todas las clases y estilos del framework original. Para detalles apoyarse en la documentación oficial Bootstrap 4.0
Bootstrap 4
Grilla
Bootstrap se basa en una grilla dinámica de 12 columnas
1
2
3
4
5
6
7
8
9
10
11
12
Medidas generales
Extra small
<576px
Small
≥576px
Medium
≥768px
Large
≥992px
Extra large
≥1200px
Ancho máximo del "container"
None (auto)
540px
720px
960px
1140px
Prefijo Clase
.col
.col-sm
.col-md
.col-lg
.col-xl
Número de columnas
12
Ancho de gutter
30px (15px cada lado de la columna)
Norma de espaciado
Grilla de 8px
Separación vertical mínima y máxima entre ítems dentro de elementos pequeños como menús, cards, textos, botones.
4px
8px
16px
Separación vertical mínima y máxima para items dentro de elementos medianos.
8px
16px
24px
32px
Separación vertical entre secciones diferentes en una misma pantalla
64px
80px
Estilos de espaciado disponibles
Padding (espacio interior)
Padding global
.p4
.p8
.p16
.p24
.p32
.p64
.p80
Padding arriba
.p4-top
.p8-top
.p16-top
.p24-top
.p32-top
.p64-top
.p80-top
Padding abajo
.p4-bottom
.p8-bottom
.p16-bottom
.p24-bottom
.p32-bottom
.p64-bottom
.p80-bottom
Padding izquierda
.p4-left
.p8-left
.p16-left
.p24-left
.p32-left
.p64-left
.p80-left
Padding derecha
.p4-right
.p8-right
.p16-right
.p24-right
.p32-right
.p64-right
.p80-right
Padding solo izquierda y derecha (eje x)
.p4-x
.p8-x
.p16-x
.p24-x
.p32-x
.p64-x
.p80-x
Padding solo arriba y abajo (eje y)
.p4-y
.p8-y
.p16-y
.p24-y
.p32-y
.p64-y
.p80-y
Margen (separación exterior)
Margen global
.m4
.m8
.m16
.m24
.m32
.m64
.m80
Margen arriba
.m4-top
.m8-top
.m16-top
.m24-top
.m32-top
.m64-top
.m80-top
Margen abajo
.m4-bottom
.m8-bottom
.m16-bottom
.m24
.m32-bottom
.m64-bottom
.m80-bottom
Margen izquierda
.m4-left
.m8-left
.m16-left
.m24-left
.m32-left
.m64-left
.m80-left
Margen derecha
.m4-right
.m8-right
.m16-right
.m24-right
.m32-right
.m64-right
.m80-right
Margen solo izquierda y derecha (eje x)
.m4-x
.m8-x
.m16-x
.m24-x
.m32-x
.m64-x
.m80-x
Margen solo arriba y abajo (eje y)
.m4-y
.m8-y
.m16-y
.m24-y
.m32-y
.m64-y
.m80-y
Header
Hemos definido 2 temas o estilos gráficos, de los cuales se proponen distintos formatos según el contenido que se necesita presentar.
Tema Claro
Ejemplo 01
Logo Midesof + Accesibilidad + Menú simple
Código
Ejemplo 02
Logo Midesof + Accesibilidad + Menú + submenús hover
Código
Ejemplo 03
Logo Midesof + Accesibilidad + Menú + submenús al hacer click
Código
Ejemplo 04
Logo Midesof + Logo de proyecto/servicio
Código
Tema Oscuro
Para utilizar el tema oscuro del header, es necesario reallizar solo dos ajuses.
En la etiqueta < header >, se debe cambiar la clase "bg-claro" por la clase "bg-terciario"
En la etiqueta .navbar-brand, reemplazar la imagen "logo_mdsyf_texto_head-negro.svg" por la versión blanca del mismo "logo_mdsyf_texto_head-blanca.svg"
Ejemplo
Código
Footer
Formato Amplio
Ejemplo 01
Logo ministerio + 2 columnas
Código
Ejemplo 02
Logo ministerio + 3 columnas
Código
Ejemplo 03
Logo ministerio + 1 columna + redes sociales
Código
Formato compacto
Ejemplo 04
Solo logo
Código
Ejemplo 05
Logo + enlaces
Código
Logotipos o isologos
Estos son los logotipos o isologos aprobados y que podráin utilizar tusu sitios webs o sistemas.
La tipografía/fuente oficial es la "Roboto" la cual puede utilizarse en todas sus versioens si se desea (+ Detalles).
Adicionalmente el framework utiliza por defecto la familia "Roboto Slab" para en el títular h1
Tipografía
Roboto
La tipografía Roboto es la tipografía oficial de todos los proyectos web a nivel de frontend. Está disponible en todas sus versiones, estilos y valores.
La tipografía Roboto Slab se incorcoporó para ser utilizada en el titular H1. Si se desea utilziar en otros estilos de texto, debe validarse con el equipo de Diseño web del Midesof.
Normal - Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Negrita - Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Cursiva - Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Normal - Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Adicionalmemnte, para aquellos casos en que la galería de Material Design no tenga disponible el ícono que necesita tu proyecto, es posible usar la fuente Font Awesome Icons que ya va incluida en el proyecto.
Ofrecemos un paleta de colores basada en el Kit de gobierno 2023, pero con la incoporación de más variantes y tonalidades que permitan diseñar nuevos elementos y funcionalidades sin perder el lineamiento cromático inicial.
Fondos
Primario
bg-primario {color: #006FB3}
bg-primario2 {color: #0085D6}
bg-primario3 {color: #0096F3}
Secundario
bg-secundario {color: #FD1010}
bg-rojo1 {color: #FE3E3E}
bg-rojo2 {color: #FE6565}
Terciario
bg-terciario {color: #012C50}
Celeste
bg-celeste {color: #CFE1F3}
bg-plata {color: #A8B7C7}
Rojos
bg-rojo1 {color: #E22C2C}
bg-rojo2 {color: #E53F40}
Naranjos
bg-naranjo1 {color: #E0701E}
bg-naranjo2 {color: #FFA11B}
bg-naranjo3 {color: #F56B0F}
Verdes
bg-verde1 {color: #2D717C}
bg-verde2 {color: #0B8578}
Violeta
bg-violeta {color: #6633CC}
Grises
bg-gris1 {color: #191A1A}
bg-gris2 {color: #4A4A4A}
bg-gris3 {color: #8A8A8A}
bg-gris4 {color: #B2B2B2}
bg-gris5 {color: #CCCCCC}
bg-gris6 {color: #E5E5E5}
bg-gris7 {color: #F2F2F2}
Estado
bg-peligro {color: #E22C2C}
bg-precaucion {color: #F56B0F}
bg-exito {color: #0B8578}
bg-info {color: #CFE1F3
bg-claro {color: #ffffff}
bg-oscuro {color: #191A1A}
Textos
Paleta de colores
.text-primario - Color: #006FB3
.text-primario2 - Color: #0085D6
.text-primario3 - Color: #0096F3
.text-celeste - Color: #CFE1F3
.text-secundario - Color: #FD1010
.text-rojo1 - Color: #FE3E3E
.text-rojo2 - Color: #FE6565
.text-rojo3 - Color: #E22C2C
.text-rojo4 - Color: #E53F40
.text-terciario - Color: #012C50
.text-violeta - Color: #6633CC
.text-naranjo1 - Color: #E0701E
.text-naranjo2 - Color: #F56B0F
.text-naranjo3 - Color: #FFA11B
.text-verde1 - Color: #2D717C
.text-verde2 - Color: #0B8578
.text-gris1 - Color: #191A1A
.text-gris2 - Color: #4A4A4A
.text-gris3 - Color: #8A8A8A
.text-gris4 - Color: #B2B2B2
.text-gris6 - Color: #CCCCCC
.text-gris6 - Color: #E5E5E5
.text-gris7 - Color: #F2F2F2
.text-plata - Color: #A8B7C7
Acciones o estados
.text-peligro - Color: #E22C2C;
.text-precaucion - Color: #F56B0F;
.text-exito - Color: #0B8578;
.text-info - Color: #CFE1F3;
.text-oscuro - Color: #191A1A;
.text-claro - Color: #ffffff;
Botones
Existen 3 tamaños de botones bajo 3 tipologías que pasamos a detallar
Botón primario
Se utiliza para llamar a una acción principal o predominante. Se puede combinar con el uso de botones secundarios y de enlace, y se recomienda no utilizar dos o más botones primarios juntos o en una misma pantalla.
Se utiliza para llamar a una acción menos prominente pero aún importante. Suelen representar acciones complementarias a la de un botón primario, como “cancelar”, “más detalles”, “ver más”, etc. El uso apropiado de botones secundarios puede ayudar a equilibrar la interfaz, ofreciendo a los usuarios una gama completa de opciones sin abrumarles con demasiadas acciones principales.
Se utilizan para acciones secundarias o menos destacadas en la interfaz, sin embargo pueden ser utilizados para acciones principales si se desea mantener una apariencia más ligera y minimalista.
ClaveÚnica es una clave acceso única a un gran número de servicios del Estado de Chile. Su ingtegración en los sistemas y portales web implica utilizar el botón de acceso o inicio de sesión que está normado por Gobienro Digital.
Los dos formatos permitidos para usar en distintos tamaños, son los siguientes:
Dejamos a disposición una serie de cards o tarjetas para presentar distintos contenidos. Todas tienen su origen en el Framework de Gobierno de Chile, en su versión con Boostrap 4.0, por lo tanto las clases y estilos deben citarse inicialmente desde ahí.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vel risus rhoncus, lacinia massa sed, ultrices lorem. Duis id imperdiet elit. Aliquam vel scelerisque nibh.
Suspendisse ultrices ullamcorper ante vel euismod.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vel risus rhoncus, lacinia massa sed, ultrices lorem. Duis id imperdiet elit. Aliquam vel scelerisque nibh.
Suspendisse ultrices ullamcorper ante vel euismod.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vel risus rhoncus, lacinia massa sed, ultrices lorem. Duis id imperdiet elit. Aliquam vel scelerisque nibh.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vel risus rhoncus, lacinia massa sed, ultrices lorem. Duis id imperdiet elit. Aliquam vel scelerisque nibh.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vel risus rhoncus, lacinia massa sed, ultrices lorem. Duis id imperdiet elit. Aliquam vel scelerisque nibh.
Código
Ejemplo 11
Títular con enlace - contenido
Suspendisse ultrices.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vel risus rhoncus, lacinia massa sed, ultrices lorem. Duis id imperdiet elit. Aliquam vel scelerisque nibh.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vel risus rhoncus, lacinia massa sed, ultrices lorem. Duis id imperdiet elit. Aliquam vel scelerisque nibh.
Este framework ministerial está basado en una versión de Bootstrap 4 llamada Twitter. Adicionalmente Cuenta con todas las clases y estilos del framework original. Para detalles apoyarse en la documentación oficial Bootstrap 4.0
Colapsable
Ejemplo 01
Recomendado para preguntas frecuentes
Et et consectetur ipsum labore excepteur est proident excepteur ad velit occaecat qui minim occaecat veniam. Fugiat veniam incididunt anim aliqua enim pariatur veniam sunt est aute sit dolor anim. Et et consectetur ipsum labore excepteur est proident excepteur ad velit occaecat qui minim occaecat veniam. Fugiat veniam incididunt anim aliqua enim pariatur veniam sunt est aute sit dolor anim.
Nulla est ullamco ut irure incididunt nulla Lorem Lorem minim irure officia enim reprehenderit. Magna duis labore cillum sint adipisicing exercitation ipsum. Nostrud ut anim non exercitation velit laboris fugiat cupidatat. Nulla est ullamco ut irure incididunt nulla Lorem Lorem minim irure officia enim reprehenderit. Magna duis labore cillum sint adipisicing exercitation ipsum. Nostrud ut anim non exercitation velit laboris fugiat cupidatat.
Sint sit mollit irure quis est nostrud cillum consequat Lorem esse do quis dolor esse fugiat sunt do. Eu ex commodo veniam Lorem aliquip laborum occaecat qui Lorem esse mollit dolore anim cupidatat. Sint sit mollit irure quis est nostrud cillum consequat Lorem esse do quis dolor esse fugiat sunt do. Eu ex commodo veniam Lorem aliquip laborum occaecat qui Lorem esse mollit dolore anim cupidatat.
Código
Tabs
Tab Horizontal
Tab 01
Sint sit mollit irure quis est nostrud cillum consequat Lorem esse do quis dolor esse fugiat sunt do. Eu ex commodo veniam Lorem aliquip laborum occaecat qui Lorem esse mollit dolore anim cupidatat. Sint sit mollit irure quis est nostrud cillum consequat Lorem esse do quis dolor esse fugiat sunt do. Eu ex commodo veniam Lorem aliquip laborum occaecat qui Lorem esse mollit dolore anim cupidatat.
Tab 02
Nulla est ullamco ut irure incididunt nulla Lorem Lorem minim irure officia enim reprehenderit. Magna duis labore cillum sint adipisicing exercitation ipsum. Nostrud ut anim non exercitation velit laboris fugiat cupidatat. Nulla est ullamco ut irure incididunt nulla Lorem Lorem minim irure officia enim reprehenderit. Magna duis labore cillum sint adipisicing exercitation ipsum. Nostrud ut anim non exercitation velit laboris fugiat cupidatat.
Tab 03
Et et consectetur ipsum labore excepteur est proident excepteur ad velit occaecat qui minim occaecat veniam. Fugiat veniam incididunt anim aliqua enim pariatur veniam sunt est aute sit dolor anim. Et et consectetur ipsum labore excepteur est proident excepteur ad velit occaecat qui minim occaecat veniam. Fugiat veniam incididunt anim aliqua enim pariatur veniam sunt est aute sit dolor anim.
Tab 04
Sint sit mollit irure quis est nostrud cillum consequat Lorem esse do quis dolor esse fugiat sunt do. Eu ex commodo veniam Lorem aliquip laborum occaecat qui Lorem esse mollit dolore anim cupidatat. Sint sit mollit irure quis est nostrud cillum consequat Lorem esse do quis dolor esse fugiat sunt do. Eu ex commodo veniam Lorem aliquip laborum occaecat qui Lorem esse mollit dolore anim cupidatat.
Código
Tab Vertical
Tab 01
Sint sit mollit irure quis est nostrud cillum consequat Lorem esse do quis dolor esse fugiat sunt do. Eu ex commodo veniam Lorem aliquip laborum occaecat qui Lorem esse mollit dolore anim cupidatat. Sint sit mollit irure quis est nostrud cillum consequat Lorem esse do quis dolor esse fugiat sunt do. Eu ex commodo veniam Lorem aliquip laborum occaecat qui Lorem esse mollit dolore anim cupidatat.
Tab 02
Nulla est ullamco ut irure incididunt nulla Lorem Lorem minim irure officia enim reprehenderit. Magna duis labore cillum sint adipisicing exercitation ipsum. Nostrud ut anim non exercitation velit laboris fugiat cupidatat. Nulla est ullamco ut irure incididunt nulla Lorem Lorem minim irure officia enim reprehenderit. Magna duis labore cillum sint adipisicing exercitation ipsum. Nostrud ut anim non exercitation velit laboris fugiat cupidatat.
Tab 03
Et et consectetur ipsum labore excepteur est proident excepteur ad velit occaecat qui minim occaecat veniam. Fugiat veniam incididunt anim aliqua enim pariatur veniam sunt est aute sit dolor anim. Et et consectetur ipsum labore excepteur est proident excepteur ad velit occaecat qui minim occaecat veniam. Fugiat veniam incididunt anim aliqua enim pariatur veniam sunt est aute sit dolor anim.
Tab 04
Sint sit mollit irure quis est nostrud cillum consequat Lorem esse do quis dolor esse fugiat sunt do. Eu ex commodo veniam Lorem aliquip laborum occaecat qui Lorem esse mollit dolore anim cupidatat. Sint sit mollit irure quis est nostrud cillum consequat Lorem esse do quis dolor esse fugiat sunt do. Eu ex commodo veniam Lorem aliquip laborum occaecat qui Lorem esse mollit dolore anim cupidatat.
Código
Banners
Este tipo de banner está pensado para incorporar un vínculo a otras instituciones del estado, o bien para destacar información en particular.
Los Breadcrumb o "migas de pan", es un menú secundario al menú principal del sitio web, que permite navegar por los distintos niveles de un contenido expecífico. Es un complemento a la navegación principal que cumple un rol visual, ya que le permite al usuario ubicar el nivel de navegación en que se encuentra, y asu vez un rol práctico, permitiendo navegar por los distintos niveles.
Ejemplo
Inicio
Dos niveles
Tres niveles
Código
Paginador
Paginador con texto
Paginador con iconos
Código
Modal y alertas
Presentamos una serie de recursos que permiten notificar, informar o alertar al usuario de las distintas dinámicas o eventos que ocurran en el sitio web.
Mensajes modal
Modal superior
Titulo del Modal superior
Phasellus nec aliquet neque, ac feugiat dolor. Maecenas convallis quam urna. Suspendisse ultrices ullamcorper ante vel euismod. Morbi eu quam vitae nunc rhoncus euismod ut sed libero. Cras at tincidunt mi, sit amet molestie quam.
Phasellus nec aliquet neque, ac feugiat dolor.
Código
Modal al centro de la página
Titulo del Modal al centro
Phasellus nec aliquet neque, ac feugiat dolor. Maecenas convallis quam urna. Suspendisse ultrices ullamcorper ante vel euismod. Morbi eu quam vitae nunc rhoncus euismod ut sed libero. Cras at tincidunt mi, sit amet molestie quam.
Phasellus nec aliquet neque, ac feugiat dolor.
Código
Alertas
Color de fondo
Información destacada
info Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Información exitosa o positiva
check_circle Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Información de peligro
cancel Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Información de advertencia
info Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Código
Sin color de fondo
Información destacada
info Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Información exitosa o positiva
check_circle Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Información de peligro
cancel Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Información de advertencia
info Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Código
Formularios
Presentamos una serie de recursos que permiten notificar, informar o alertar al usuario de las distintas dinmaicas o eventos que ocurran en tu sitio web.
Campos de texto
Input simples
Distintos tamaños
Código
Input estilos
Otros estilos de input disponibles
calendar_month
home
Código
Campo de texto / Text area
Código
Select
Código
Checkbox y Radio
Checkbox
Ejemplos
Checkbox en línea
Código
Radio
Ejemplos
Radios en línea
Código
Formulario de búsqueda
Barra de búsqueda
search
search
search
Código
Recuadro de búsqueda
Encuentra beneficios
Puedes buscar un programa por su nombre, número de id, temática, etc.
