# gobierno abierto | Guía de estilo web

# gobierno abierto Guía de estilo web

## 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

Nombre Mensaje de información para rellenar el campo Apellidos Mensaje Acepto las condiciones
`form { background: #F8F8F8; height: 48px; margin-bottom: 16px; }`

## 6. Colores

body
#E9E9E9
background
#EDEFF0
border
#DEE0E3
brand
#0077B9
text
#222222
text-medium
#999999
text-light
#CCCCCC
link
#2895F1
link-hover
#2178BF
debates
#008CCF
votes-bg
#26AEEE
votes-border
#1F94CB
votes-like
#7BD2A8
votes-like-act
#5D9E7F
votes-unlike
#EF8585
votes-unlike-act
#BD6A6A
check
#46DB91

## 7. Alertas

Lorem ipsum dolor sit amet, consectetur adipisicing elit.
`class="alert-bx radius success"`
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
`class="alert-bx radius info"`
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
`class="alert-bx radius alert"`
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
`class="alert-bx radius warning"`
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
`class="alert-bx radius secondary"`