publicado 01-02-2024
El objetivo de esta guía es brindar los elementos de diseño necesarios para estandarizar los contenidos de los sitios web con la identidad gráfica del Gobierno de Chiapas.
Fortalecer la identidad gubernamental al homologar la funcionalidad e imagen de todos los sitios web para mejorar la experiencia del usuario, promover la modernización tecnológica y administrativa al interior de las instancias gubernamentales.
publicado 01-02-2024
La configuración de la cabecera y pie de página con la identidad gráfica del Gobierno de Chiapas en los sitios web es dinámica y muy facil de implementar.
Para la configuración de la cabecera y pie de página no es necesario descargar ningún archivo. Solo ingrese una hoja de estilo y un archivo con código javascript en los documentos html que así lo requiera. Estos archivos (css y javascript) se encargaran de crear la cabecera y pié de página del sitio web similar a la del sitio www.chiapas.gob.mx
La hoja de estilo y el archivo con código javascript se encuentran alojados en nuestro CDN (Content Delivery Network - Red de Distribución de Contenidos). Se recomienda ocupar los archivos alojados en el CDN, ya que así las actualizaciones se reflejarán en automático en los sitios web.
https://frameworkscdn.chiapas.gob.mx/styles/mainV5.css<head> de cada html ingrese la ruta
copiada de la hoja de estilo de la siguiente forma :
...
<link href="https://frameworkscdn.chiapas.gob.mx/styles/mainV5.css" rel= "stylesheet">
</head>
https://frameworkscdn.chiapas.gob.mx/chisjsV5.js<body> de cada html ingrese la ruta
copiada del script de la siguiente forma :
...
<script src="https://frameworkscdn.chiapas.gob.mx/chisjsV5.js"></script>
</body>
publicado 01-02-2024
Para una mejor representación entre navegadores, usamos Normalize.css, un proyecto de Nicolas Gallagher y Jonathan Neal.
publicado 01-02-2024
Este es el template básico para agregar una nueva página. Para que el framework funcione
correctamente se debe incorporar la liga de los estilos dentro de la etiqueta
<head>, y la liga del script antes de cerrarse la etiqueta
<body>.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Ejemplo de nueva página para CHIAPAS.GOB.mx</title>
<!-- CSS -->
<link href="/favicon.ico" rel="shortcut icon">
<link href="https://frameworkscdn.chiapas.gob.mx/styles/gobchis_v5.css" rel="shortcut icon">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous" rel="shortcut icon">
<link href="https://frameworkscdn.chiapas.gob.mx/styles/mainV5.css" rel="stylesheet">
<!-- Respond.js soporte de media queries para Internet Explorer 8 -->
<!-- ie8.js EventTarget para cada nodo en Internet Explorer 8 -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.c/respond/1.4.2/respond.min.js"></script>
<script src="https://cdnjs.cloudflare.c/ajax/libs/ie8/0.2.2/ie8.js"></script>
<![endif]-->
</head>
<body>
<!-- Contenido -->
<main class="page">
<div class="container">...</div>
</main>
<!-- JS -->
<script src="https://frameworkscdn.chiapas.gob.mx/chisjsV5.js"></script>
</body>
</html>
publicado 01-02-2024
<div class="row">
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
</div>
<div class="row">
<div class="col-md-8">.col-md-8</div>
<div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
<div class="col-md-6">.col-md-6</div>
<div class="col-md-6">.col-md-6</div>
</div>
publicado 01-02-2024
Incluye más de 250 íconos en formato de fuente del conjunto Glyphicon.
<span class="glyphicon glyphicon-search" aria-hidden="true"></span>
publicado 01-02-2024
El catálogo de colores que se mencionan a continuación deberán usarse en el apartado de contenidos del sitio. El cuerpo de texto dentro de las páginas deberá ir en negro #0C0206.
publicado 01-02-2024
La barra de navegación es un componente que sirve como encabezado de navegación para su
aplicación o sitio web. Comienza extendida
en dispositivos móviles y se vuelven horizontales a medida que aumenta el ancho de la vista
disponible. En caso de utilizar, se
deberá de crear justo después de que se haya abierto la etiqueta
<main>.
<nav class="navbar navbar-submenu sub-navbar navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#subenlaces">
<span class="sr-only">Interruptor de Navegación</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/">ADITECH</a>
</div>
<div class="collapse navbar-collapse" id="subenlaces">
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Enlace</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Desplegable <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Acción</a></li>
<li><a href="#">Otra acción</a></li>
<li><a href="#">Algo más aquí</a></li>
<li class="divider"></li>
<li><a href="#">Enlace separado</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
publicado 01-02-2024
Los controles de formularios individuales reciben automáticamente algunos
estilos globales. Todos los elemento <input>,
<textarea> y <select> con la clase
.form-control se componen de un ancho de 100% de forma
predeterminada. Para un espaciado más óptimo se deben envolver las etiquetas
y los controles con la clase .form-group .
<form role="form">
<div class="form-group">
<label class="control-label" for="email-01">Correo electrónico:</label>
<input class="form-control" id="email-01" placeholder="Correo electrónico" type="text">
</div>
<div class="form-group">
<label class="control-label" for="password-01">Contraseña</label>
<input class="form-control" id="password-01" placeholder="Contraseña" type="password">
</div>
<div class="form-group">
<label class="control-label" for="file-01">Cargar archivo:</label>
<input id="file-01" type="file">
</div>
<div class="checkbox">
<label>
<input type="checkbox">
Acepto los términos
</label>
</div>
<div class="form-group">
<textarea class="form-control" rows="3"></textarea>
</div>
<button class="btn btn-primary pull-right" type="submit">Enviar</button>
</form>
Se debe añadir la clase .form-inline al <form>
para los controles con alineación a la izquierda y de tipo inline-block. Esto
únicamente se aplica a las formas con ventanas que son al menos 768px de ancho.
publicado 01-02-2024
Los botones en una interfaz son elementos vitales, ya que en la mayoría de los casos reúnen muchas de las capacidades de navegación que su creador ha concebido.
Utilice cualquiera de las clases de botones disponibles para crear rápidamente un botón con estilo.
Para más información ingrese a: ejemplos de caso de uso.
<!-- Botón básico -->
<button type="button" class="btn btn-default">Básico</button>
<!-- Botón de error -->
<button type="button" class="btn btn-danger">Error</button>
<!-- Botón primario -->
<button type="button" class="btn btn-primary">Primario</button>
<!-- Botón tipo hipervínculo -->
<button type="button" class="btn btn-link">Hipervínculo</button>
Aquí se detalla los diferentes tamaños que tienen los botones. Agrega la clase
.btn-lg, .btn-sm, o .btn-xs para
modificar el tamaño del botón.
<p>
<button class="btn btn-primary btn-lg" type="button">Grande</button>
<button class="btn btn-light btn-lg" type="button">Grande</button>
</p>
<p>
<button class="btn btn-primary" type="button">Básico</button>
<button class="btn btn-light" type="button">Básico</button>
</p>
<p>
<button class="btn btn-primary btn-sm" type="button">Chico</button>
<button class="btn btn-light btn-sm" type="button">Chico</button>
</p>
<p>
<button class="btn btn-primary btn-xs" type="button">Extra chico</button>
<button class="btn btn-light btn-xs" type="button">Extra chico</button>
</p>Los botones aparecen con una sombra interna, color de fondo y borde más oscuro.
Agrega la clase .active sólo para las etiquetas
<a> o <button>.
<button class="btn btn-primary btn-lg active" type="button">Ejemplo</button>
<button class="btn btn-light btn-lg active" type="button">Ejemplo</button>
Los botones deshabilitados funcionan igual que los activos. Si se desea cambiar
la apariencia del botón agrega la clase .disabled a los botones que
necesites deshabilitar.
<button class="btn btn-primary btn-lg disabled" type="button">Ejemplo</button>
<button class="btn btn-primary btn-lg disabled" type="button">Ejemplo</button>
Serie de botones a la vez en una sola línea con el grupo de botones.
<div class="btn-group" role="group" aria-label="...">
<button type="button" class="btn btn-primary">Izquierda</button>
<button type="button" class="btn btn-primary">Centro</button>
<button type="button" class="btn btn-primary">Derecha</button>
</div>
Conjunto de botones que aparecerán apilados verticalmente en lugar de horizontal.
<div class="btn-group-vertical" role="group" aria-label="...">
...
</div>Grupo de botones que abarcarán todo el ancho de su contenedor. También funciona con menús desplegables de los botones dentro del grupo de botones.
<div class="btn-group btn-group-justified" role="group" aria-label="...">
...
</div>
Estos botones van acompañados de un ícono que representa su acción, además del texto.
<!-- Icono del lado izquierdo del botón -->
<button class="btn btn-primary" type="button">
<span class="glyphicon glyphicon-search"></span>
Ejemplo
</button>
<!-- Icono del lado derecho del botón -->
<button class="btn btn-primary" type="button">
Ejemplo
<span class="glyphicon glyphicon-search"></span>
</button>
publicado 01-02-2024
En esta sección se describe todo lo relacionado con paginadores.
<nav aria-label="Page navigation example">
<ul class="pagination">
<li class="page-item"><a class="page-link" href="#">Previous</a></li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item"><a class="page-link" href="#">Next</a></li>
</ul>
</nav>publicado 01-02-2024
Los siguientes son ejemplos de encabezados con diferentes tamaños de letra.
Los títulos y subtítulos deberán ocupar sólo 2/3 del formulario web, es decir, 8 columnas. El tamaño de fuente de los títulos corresponderá a h1, y el de los subtitulos a h2. En caso de que el título sea muy extenso podrá colocarlo en h2.
<h1>h1. Ejemplo Texto</h1>
<h2>h2. Ejemplo Texto</h2>
<h3>h3. Ejemplo Texto</h3>
<h4>h4. Ejemplo Texto</h4>
<h5>h5. Ejemplo Texto</h5>
<h6>h6. Ejemplo Texto</h6>
publicado 01-02-2024
La tipografía para el texto predeterminada es Novecento Wide, el tamaño de fuente estandarizado es de 18px, con un interlineado de 1.428. Esto se aplica a todo el contenido dentro de body. El tamaño mínimo recomendable para el texto es de 16px.
Para más información ingrese a: ejemplos de caso de uso.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis consectetur libero id gravida volutpat. Nunc mauris lorem, sodales eu suscipit id, fermentum vitae neque.
Mauris nec massa sem. Etiam quis ipsum in quam consequat bibendum et in ipsum. Suspendisse faucibus metus lacus, vitae adipiscing lacus tincidunt vel.
Praesent id dui suscipit, consectetur ante eget, commodo velit. Vivamus ac turpis nec lectus tincidunt vestibulum vel in odio.
Ut vel varius felis. Suspendisse potenti. Curabitur luctus eros vel massa adipiscing lacinia. Sed bibendum interdum mi nec interdum. Integer nec erat enim.
<p>Lorem ipsum dolor...</p>
<ul class="list-group">
<li class="list-group-item">An item</li>
<li class="list-group-item">A second item</li>
<li class="list-group-item">A third item</li>
<li class="list-group-item">A fourth item</li>
<li class="list-group-item">And a fifth one</li>
</ul><ol class="list-group list-group-numbered">
<li class="list-group-item">A list item</li>
<li class="list-group-item">A list item</li>
<li class="list-group-item">A list item</li>
</ol><ul class="list-group list-group-horizontal">
<li class="list-group-item">An item</li>
<li class="list-group-item">A second item</li>
<li class="list-group-item">A third item</li>
</ul>
<ul class="list-group list-group-horizontal-sm">
<li class="list-group-item">An item</li>
<li class="list-group-item">A second item</li>
<li class="list-group-item">A third item</li>
</ul>
<ul class="list-group list-group-horizontal-md">
<li class="list-group-item">An item</li>
<li class="list-group-item">A second item</li>
<li class="list-group-item">A third item</li>
</ul>
<ul class="list-group list-group-horizontal-lg">
<li class="list-group-item">An item</li>
<li class="list-group-item">A second item</li>
<li class="list-group-item">A third item</li>
</ul>
<ul class="list-group list-group-horizontal-xl">
<li class="list-group-item">An item</li>
<li class="list-group-item">A second item</li>
<li class="list-group-item">A third item</li>
</ul>
<ul class="list-group list-group-horizontal-xxl">
<li class="list-group-item">An item</li>
<li class="list-group-item">A second item</li>
<li class="list-group-item">A third item</li>
</ul>publicado 01-02-2024
Para el relleno básico estilo-luz y sólo divisores horizontales se debe
añadir la clase base .table a cualquier tabla.
| # | First Name | Last Name | Username |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry | the Bird |
<table class="table">
...
</table>| # | First Name | Last Name | Username |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry | the Bird |
<table class="table table-striped">
...
</table>| # | First Name | Last Name | Username |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry | the Bird |
<table class="table table-bordered">
...
</table>| # |
|
|
|
|
|
|
|---|---|---|---|---|---|---|
| 1 |
|
|
|
|
|
|
| 2 |
|
|
|
|
|
|
| 3 |
|
|
|
|
|
|
<table class="table table-responsive">
...
</table>publicado 01-02-2024
Agrega cualquier texto y un botón opcional de cerrar dentro de la clase
.alert, después agrega una de las clases contextuales (ej.
.alert-success).
<div class="alert alert-success">...</div>
<div class="alert alert-info">...</div>
<div class="alert alert-warning">...</div>
<div class="alert alert-danger">...</div><div class="alert alert-warning alert-dismissible fade show" role="alert">
<strong>Holy guacamole!</strong> You should check in on some of those fields below.
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>publicado 01-02-2024
Indican la ubicación de la página actual dentro de una jerarquía de navegación.
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item active" aria-current="page">Inicio</li>
</ol>
</nav>
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Inicio</a></li>
<li class="breadcrumb-item active" aria-current="page">Archivo</li>
</ol>
</nav>
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Inicio</a></li>
<li class="breadcrumb-item"><a href="#">Archivo</a></li>
<li class="breadcrumb-item active" aria-current="page">Datos</li>
</ol>
</nav>publicado 01-02-2024
Información contextualizada.
Para poder utilizar la herramienta Tooltips, debe inicializar sus valores en el inicio de la página. Una forma de inicializar el plugin Tooltip sería seleccionarlas por su atributo data-bs-toggle, así:
const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]')
const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl))
Ejemplo:
El elmento Placeholder muestra algunos enlaces en línea con el plugin Tooltip. Por el momento, este elemento rellena el contenido. Esto para simular la presencia de texto real. Y todo para indicar como se vería la información cuando se utiliza en situaciones del mundo real. Esperemos que hayas sido testigo de como estas sugerencias sobre el plugin pueden funcionar en la práctica estos tooltips sobre los enlaces una vez que las utilizas tú propio sitio web o proyecto.
<p class="muted">Placeholder text to demonstrate some <a href="#" data-bs-toggle="tooltip" data-bs-title="Default tooltip">inline links</a> with tooltips. This is now just filler, no killer. Content placed here just to mimic the presence of <a href="#" data-bs-toggle="tooltip" data-bs-title="Another tooltip">real text</a>. And all that just to give you an idea of how tooltips would look when used in real-world situations. So hopefully you've now seen how <a href="#" data-bs-toggle="tooltip" data-bs-title="Another one here too">these tooltips on links</a> can work in practice, once you use them on <a href="#" data-bs-toggle="tooltip" data-bs-title="The last tip!">your own</a> site or project.</p>publicado 01-02-2024
Paneles colapsables para mostrar/ocultar bloques de forma simultánea.
Lorem ipsum dolor sit amet de. Nulla vitae elit libero, avehicula pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.
<div class="panel-group ficha-collapse" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-parent="#accordion" data-toggle="collapse" href="#panel-01" aria-expanded="true" aria-controls="panel-01">
Título del bloque 1
</a>
</h4>
<button type="button" class="collpase-button collapsed" data-parent="#accordion" data-toggle="collapse" href="#panel-01"></button>
</div>
<div class="panel-collapse collapse in" id="panel-01">
<div class="panel-body">
Lorem ipsum dolor sit amet de. Nulla vitae elit libero, avehicula pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.
</div>
</div>
</div>
</div>publicado 01-02-2024
Permiten mostrar diferentes tipos de contenido dependiendo de la pestaña seleccionada.
Fusce ut neque justo, et aliquet enim. In hac habitasse dictumst. Nullam commodo que erat, vitae facilisis erat. Cras at mauris ut tortor vestibulum fringilla vel sed metus. Donec interdum purus a justo feugiat rutrum. Sed ac neque ut neque dictum accumsan. Cras lacinia rutrum risus, id viverra metus dictum sit amet. Fusce venenatis, urna eget cursus placerat, dui nisl fringilla purus, nec tincidunt sapien justo ut nisl. Curabitur lobortis semper neque et varius. Etiam eget lectus risus, a varius orci. Nam placerat mauris at dolor imperdiet at aliquet lectus ultricies. Duis tincidunt mi at quam condimentum lobortis.
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#tab-01">Título 1</a></li>
<li><a data-toggle="tab" href="#tab-04">Título 4</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tab-01">...</div>
<div class="tab-pane" id="tab-04">...</div>
</div>publicado 01-02-2024
Las ventanas modales son indicaciones de diálogo flexibles y dinámicas que permiten mostrar información sobre toda las demás ventanas de la misma aplicación.
<div class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Ejemplo de ventana modal</h4>
</div>
<div class="modal-body">
<p>Ejemplo de texto interno.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cerrar</button>
<button type="button" class="btn btn-primary">Guardar</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->Se pueden activar ventanas modales sin tener que escribir una línea
individual de javascript mediante etiquetas. Se debe establecer
data-toggle="modal" en un elemento controlador, como botón, así
como data-target="#foo" o href="#foo" para apuntar
a un modal en específico para alternar.
<button type="button" data-toggle="modal" data-target="#foo">Abrir ventana modal</button>El siguiente ejemplo llamará a una ventana modal con un id de
myModal con la siguiente línea de Javascript.
$('#myModal').modal(options)Para más información leer la siguiente documentación: Bootstrap Javascript modals.
publicado 01-02-2024
Los iframes deberán utilizarse únicamente en caso de ser necesario.
<iframe frameborder="0" height="430" src="https://dnt.aditech.chiapas.gob.mx/cti/" width="100%"></iframe>publicado 10-03-2020
Información contextualizada.
Un componente de presentación de diapositivas para recorrer elementos, como un carrusel. Los carruseles anidados no son compatibles.
<div id="carouselExample" class="carousel slide">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="..." class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="...">
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExample" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExample" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
