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":
En un solo enlace, daremos la clase "botoiak" al elemento que contenga el enlace (p, div, etc):<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 formulario daremos la clase "botoiak" al elemento que contenga el submit del formulario:<div class="botoiak">
<a href="/eusko-jaurlaritza/-/ezagutu-eusko-jaurlaritza#9164">Pertsonak</a>
</div><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.