General

En 2017, todas las hojas de estilo de la Sede Electrónica se integran en una sola, utilizando Less Bootstrap 3.3.7. que da lugar a una hoja main-sede.css minificada.

El enlace a la hoja de estilo se encuentra en el apartado cssjs de los template , que es integrado en los servicios y en los portales. Se accede desde el siguinete link: https://www.zaragoza.es/cont/assets/css/main-sede.min.css

Específicas

Dada la diversidad de portales y servicios que ofrece la web del Ayuntamiento, se ha optado por añadir nuevos CSS en cada portal, para dar respuesta a necesidades específicas. Esta opción no afecta al resto de portales.

Estas CSS se integran en los template de cada portal con la siguiente ruta: https://www.zaragoza.es/cont/assets/css/portales/nombre_del_portal.css

Para mejorar la compatibilidad entre navegadores, bootstrap utiliza Normalize.css un proyecto de Nicolas Gallagher y Jonathan Neal que hace que los navegadores representen todos los elementos de manera más consistente y en línea con los estándares modernos. Se dirige con precisión solo a los estilos que necesitan normalizarse.

Colores de Principales

Colores Utilitarios

Son los colores que nos brinda Bootstrap para ser aplicados a distintos estados de los elementos,

Monocromáticos

Familia

Tamaños

Iconos grandes

Disponemos de una colección de iconos grandes realizada por Abaco Digital que utilizamos para clasificar trámites o equipamientos en áreas, servicios, etc.

Los mismos son de distintos colores:

Iconos rojos

Iconos azules

Iconos verdes

Iconos negativo

Iconos positivo

Iconos generales

Para los iconos generales de la sede electrónica se utiliza Font Awesome Free en su versión 5.15.4

Modo de empleo:

	
<span class="........."></span> 
	

Deberemos colocarlo dentro de una etiqueta <span> y ponerle la clase correspondiente al icono que necesitamos colocar.

Tipo de inputs

Para cada tipo de input de nuestros formularios, Bootstrap nos ofrece una serie de controladores para lograr un estilarlos.

Los mismos se logran colocandole la clase .form-control a los elementos que necesitemos

	
<input type="text" class="form-control" placeholder="input text de ejemplo"/> 
	

	
<input type="password" class="form-control" placeholder="contraseña de ejemplo"/> 
	

	
<input type="datetime-local" class="form-control" placeholder="datetime-local de ejemplo"/> 
	

	
<textarea class="form-control" rows="3" placeholder="textarea de ejemplo"></textarea>
	

	
<select class="form-control">
	<option>1</option>
	<option>2</option>
	<option>3</option>
	<option>4</option>
	<option>5</option>
</select>
	

	
<div class="checkbox">
	<label>
		<input type="checkbox" value="">
		Tipo checkbox 
	</label>
</div>
	

	
<div class="radio">
	<label>
		<input type="radio" name="optionsRadios" value="option1">
		Tipo radio
	</label>
</div>
	

Texto de ayuda

	
<div class="form-group">
	<label class="sr-only" for="inputHelpBlock">Input con texto de ayuda</label>
	<input type="text" id="inputHelpBlock" class="form-control" aria-describedby="helpBlock">
	<span id="helpBlock" class="help-block">Esto es un texto de ayuda que nos sirve para hacer mas descriptivos los campos del formulario</span>
</div>
	

Estados de validación

Para incluir estados de valdacion de los distintos tipo de formulario, podemos hacer uso de las clases .has-warning, .has-error, o .has-success

	
<div class="form-group has-success">
	<label class="sr-only" for="inputHelpBlock">Input con texto de ayuda</label>
	<input type="text" id="inputHelpBlock" class="form-control" aria-describedby="helpBlock">
	<span id="helpBlock" class="help-block">Esto es un texto de ayuda que nos sirve para hacer mas descriptivos los campos del formulario</span>
</div>
	

Tablas responsivas

	
<div class="table-responsive">
	...
</div>
	

	
<div class="table-responsive">
	<table class="table">
		<thead>
			...
		</thead>
		<tbody>
			...
		</tbody>
	</table>
</div>
	

	
<div class="table-responsive">
	<table class="table table-bordered">
		<thead>
			...
		</thead>
		<tbody>
			...
		</tbody>
	</table>
</div>
	

	
<div class="table-responsive">
	<table class="table table-striped">
		<thead>
			...
		</thead>
		<tbody>
			...
		</tbody>
	</table>
</div>
	

Imágenes repsonsivas

Utilizando las clases de Bootstrap podemos hacer que las imágenes sean responsivas utilizando la clase .img-responsive

	
<img src="..." class="img-responsive" alt="" /> 
	

Imagenes con formas

Bootstrap nos da la opción de darle formas a las imágenes para distintas presentaciones

	
<img src="..." alt="..." class="img-rounded">
<img src="..." alt="..." class="img-circle">
<img src="..." alt="..." class="img-thumbnail">
	

Imagenes - Relación de aspecto

Bootstrap 3, por defecto, no nos permite trabajar con relaciones de aspecto en imágenes. Por lo que para ello se desarrolló la clase .img-aspect-ratio.

Para utilizarla necesitaremos definir un contenedor y utilizar la clase img-aspect-ratio con alguna de las configuraciones predefinidas .i16y9, .i4y3, .i1y1

Los componentes tienen su propia manera de manejar las imágenes. Por favor leer la respectiva documentación del componente a utilizar

	
<figure class="col-xs-12 col-sm-4">
	<div class="img-aspect-ratio i16y9">
		<img src="..." alt="...">
	</div>
	<figcaption class="text-center">16:9</figcaption>
</figure>