Departamento de Gobernanza, Administración Digital y Autogobierno

Estilos comunes de la nueva Euskadi.eus

En Euskadi.eus Berria se han establecido una serie de estilos CSS comunes para ser utilizados en páginas y contenidos. Para usar esos estilos comunes se debe usar el siguiente codigo en el HTML:

class="estiloaren_izena"

Recuerda que para estos "class" pueden usarse de forma conjunta. Por ejemplo, para hacer que el texto que este en una etiqueta <span> se represente en negrita y letra cursiva usaremos:

class="letra_etzana letra_lodia_600"

Todos estos estilos pueden ser usados tanto en portales como en contenidos, siempre que no modifiquen los estilos generales definidos para Euskadi.eus berria. Consulta con tu Gestor Web si tienes cualquier duda.

Estilos para gestionar la visibilidad de un elemento

.inv
Ocultar el elemento (en todos los dispositivos). De cara a la accesibilidad, el elemento estara disponible para lectores de pantalla
.hidden
Ocultar el elemento (en todos los dispositivos). De cara a la accesibilidad, el elemento no estara disponible para lectores de pantalla
.inv_screen
Ocultar el elemento en pantallas grandes (PC, TV...)
.ikus_screen
Mostrar el elemento en pantallas grandes (PC, TV...)
.inv_mugik
Ocultar el elemento en pantallas pequeñas (Telefono, tablet...)
.ikus_mugik
Mostrar el elemento en pantallas pequeñas (Telefono, tablet...)
.inv_print
Ocultar el elemento en la version para imprimir
.ikus_print
Mostrar el elemento en la version para imprimir

Estilos para gestionar la apariencia de un elemento

.borobil
Elementuari borobil itxura emateko (hau da, ertz borobilak emateko)
.taula_orokorra
Para dar formato a las tablas y hacer que en moviles aparezcan con barras de scroll
.botoiak

Para dar a los enlaces y los elementos "input" la apariencia de botón

Enlaces en un listado

Daremos a la etiqueta UL la clase "botoiak":

<ul class="botoiak">
<li><a href="/eusko-jaurlaritza/-/ezagutu-eusko-jaurlaritza#9164">Pertsonak</a></li>
<li><a href="/eusko-jaurlaritza/-/ezagutu-eusko-jaurlaritza#1728">Sistema politikoa</a></li>
</ul>
En un solo enlace, daremos la clase "botoiak" al elemento que contenga el enlace (p, div, etc):
<div class="botoiak">
<a href="/eusko-jaurlaritza/-/ezagutu-eusko-jaurlaritza#9164">Pertsonak</a>
</div>
En un formulario daremos la clase "botoiak" al elemento que contenga el submit del formulario:
<div class="botoiak">
<input type="submit" value="Bilatu" id="bilaketa" />
</div>
.alert-info
Crea un bloque con fondo azul claro
.center-block
Centra un elemento de tipo bloque (no texto)
.margin_top_2 / .margin_top_4 / .margin_top_8
Muestra el elemento como bloque y le da un margen superior de 2em / 4em / 8em
.margin_right_2 / .margin_right_4 / .margin_right_8
Muestra el elemento como bloque y le da un margen derecho de 2em / 4em / 8em
.margin_bottom_2 / .margin_bottom_4 / .margin_bottom_8
Muestra el elemento como bloque y le da un margen inferior de 2em / 4em / 8em
.margin_left_2 / .margin_left_4 / .margin_left_8
Muestra el elemento como bloque y le da un margen izquierdo de 2em / 4em / 8em

Tipografía y colores

.kontuz
Texto en color rojo (#ff0000)
.editatu
Texto en color verde  (#669900)
.urdina
Texto en color azul (color estandar de los enlaces)
.testu_arrunta
Texto en color negro (color estandar del texto)
.testu_etzana
Texto en cursiva
.testu_lodia_600
Texto en negrita (600)
.testu_lodia_700
Texto en negrita (700, mas voluminosa que la anterior)
.testu_azpimarra
Texto subrayado
.r01AlignLeft
Texto alineado a la izquierda
.r01AlignRight:
Texto alineado a la derecha
.r01AlignCenter
Texto centrado
.r01AlignJustify
Texto justificado
.text-lowercase
Muestra el texto en minúsculas
.text-uppercase
Muestra el texto en mayúsculas

Ponte en contacto con tu Gestor Web si ante cualquier duda o si detectas alguna necesidad referente a los estilos CSS.