1. Introducción

¡Hola! hemos creado algunas directrices de cómo usar el diseño en los diferentes elementos.

IMPORTANTE
Esta guía de estilo no es definitiva ya que irá creciendo junto al proyecto, por lo que algunos elementos pueden tener modificaciones en el futuro.

En este proyecto para el maquetar el front utilizamos como base el framework Foundation. Puedes leer toda su documentación pero te recomendamos que leas con atención los siguientes enlaces, ya que resumen muy bien el funcionamiento del framework:

• Grid
• Utility classes
• Kitchen shink

Para desarrollar el CSS utilizamos SASS. Si clonas el repositorio verás la siguiente estructura en las hojas de estilo:

• application.sccs hace un @import del resto de SCSS para compilarlos en un solo fichero.
• debates.sccs todos los estilos relacionados con la sección de debates.
• fonts.sccs desde aquí se important todas las fuentes.
• foundation_and_overrides.sccs fichero SCSS de Foundation con todas sus variables por defecto.
• icons.sccs fuente de iconos personalizada para el proyecto, creada en Fontastic.me.
• variables.sccs lista de variables para utilizar en el resto de SCSS.

2. Tipografía

La fuente que utilizamos para el texto es Open Sans y utlizamos Lato para el logotipo: gobierno abierto

Heading 1

h1 {font-size: 32px;}

Heading 2

h2 {font-size: 24px;}

Heading 3

h3 {font-size: 18px;}

Heading 4

h4 {font-size: 16px;}

Heading 5

h5 {font-size: 14px;}

Heading 6

h6 {font-size: 13px;}

Ejemplo de texto

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.

p {font-size: 13px; line-height: 24px;}

3. Enlaces

Los enlaces sobre fondo blanco utilizan el color #2895F1; y al hacer hover cambian al color #2178BF; Ejemplo: Esto es un enlace

Los enlaces sobre fondo oscuro utilizan el color #FFFFF;/white y al hacer hover cambian al color #2178BF; Ejemplo: Esto es un enlace

4. Botones

Utilizamos los botones con bordes redondeados por defecto en Foundation, en varios tamaños.

Botones expandidos

Button default class="button radius expand">

Button success class="button radius success expand"

Button secondary class="button radius secondary expand">

Button alert class="button radius alert expand"

Botones normales

Button default class="button radius">
Button success class="button radius success"
Button secondary class="button radius secondary">
Button alert class="button radius alert"

Botones pequeños

Button default class="button radius small">
Button success class="button radius small success"
Button secondary class="button radius small secondary">
Button alert class="button radius small alert"

5. Formularios

6. Colores

7. Alertas

class="alert-bx radius success"

class="alert-bx radius info"

class="alert-bx radius alert"

class="alert-bx radius warning"

class="alert-bx radius secondary"