From a2f83e2ced8727da3d8448513be0ab689379ebbe Mon Sep 17 00:00:00 2001 From: Alberto Garcia Cabeza Date: Mon, 10 Aug 2015 20:50:29 +0200 Subject: [PATCH] Creates style guide html --- doc/style-guide.html | 484 +++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 484 insertions(+) create mode 100644 doc/style-guide.html diff --git a/doc/style-guide.html b/doc/style-guide.html new file mode 100644 index 000000000..bbc2578b8 --- /dev/null +++ b/doc/style-guide.html @@ -0,0 +1,484 @@ + + + + + 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:

+ +

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

+ +
+
+
+ + Mensaje de información para rellenar el campo + + + + + + + +
+
+ form { background: #F8F8F8; height: 48px; margin-bottom: 16px; } +
+ +

6. Colores

+
+
+ background
#EDEFF0 +
+
+ border
#DEE0E3 +
+
+ brand
#0077B9 +
+
+ check
#46DB91 +
+
+ debates
#008CCF +
+ +
+ comments-bg
#F1F1F1 +
+
+ comments-info
#A5B2B9 +
+
+ comments-text
#3F4549 +
+ +
+ header-color
#292B33 +
+ +
+ link
#2895F1 +
+ +
+ link-hover
#2178BF +
+ +
+ tags-bg
#FAFAFA +
+ +
+ tags-border
#F0F0F0 +
+ +
+ tags-color
#8F8F8F +
+ +
+ text-color
#222222 +
+ +
+ text-medium
#999999 +
+ +
+ text-light
#A3A6AD +
+ +
+ votes
#31708f +
+ +
+ votes-bg
#26AEEE +
+ +
+ votes-border
#1F94CB +
+ +
+ votes-like
#7BD2A8 +
+ +
+ votes-like-act
#5D9E7F +
+ +
+ votes-neutral
#CCCCCC +
+ +
+ votes-text
#FFFFFF +
+ +
+ votes-unlike
#EF8585 +
+ +
+ votes-unlike-act
#BD6A6A +
+
+ +

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" + +
+
+ + \ No newline at end of file