Guía de estilos

Patrón de estilos para el centro juvenil de Burlada

Colores Corporativos

Base Color Hexadecimal

Secundario Color Hexadecimal

 

Colores de Alertas

Éxito Color Fondo

Éxito Color Texto

Info Color Fondo

Info Color Texto

Error Color Fondo

Error Color Texto

Warning Color Fondo

Warning Color Texto

 

Encabezados

tipografía: ‘BebasNeueRegular’,sans-serif;

  • Heading 1 – H1 (44px)

  • Heading 2 – H2 (36px)

  • Heading 3 – H3 (28px)

  • Heading 4 – H4 (20px)

  • Heading 5 – H5 (16px)
  • Heading 6 – H6 (13.6px)

 

Párrafos

tipografía: ‘OPEN Sans’,sans-serif;

Los párrafos son cadenas aisladas de texto, pueden tener elementos inline. Los elementos inline son los textos formateados que van dentro de un párrafo:

  • Strong: de utiliza para dar importancia.
  • Énfasis : es para resaltar palabras o frases.
  • B: se utiliza para resaltar visualmente texto, sin importancia semántica
  • I: Usado para destacar del texto normal.
  • U: Subrayado renderizado sin importancia textual.
  • Texto eliminado y texto insertado.
  • Texto tachado.

Listas

Lista desordenada

  • Item 1
  • Item 2
  • Item 3

Lista ordenada

  1. Item 1
  2. Item 2
  3. Item 3

 

Cajas de alerta:

Para más estilos: Bootstrap alerts, Bootstrap alerts LESS on Github

Info Mensaje para informar.
Éxito Así se ve una caja con un mensaje de una operación realizada con éxito.
Error Mensaje para indicar que algo ha salido mal.
Cuidado Un mensaje que indica cautela.

 

Badges

Son usados para mostrar una información corta, por ejemplo si un producto tiene oferta, si está agotado, etc… Más estilos en: Bootstrap forms, Bootstrap badges LESS on Github

Nombre Ejemplo
Por defecto: Mensaje
Success Mensaje
Warning Mensaje
Error Mensaje
Info Mensaje
Inverse Mensaje

 

Citas

Change content hereChange author here

 

Botones en Formulario

Más estilos de botones: Bootstrap buttons, Bootstrap buttons LESS on Github

Tipo mini small normal large
Default Button Button Button Button
Primary Button Button Button Button
Info Button Button Button Button
Success Button Button Button Button
Warning Button Button Button Button
Inverse Button Button Button Button
Danger Button Button Button Button

 

Botones en grupo:

 

Servicios




Empleo

Lorem ipsum dolor sit amet, consectetur adipisicing elit, tempor incididunt.

 

Pestañas

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.

 

Columnas:

12 columnas de una celda
Text1
Text2
Text3
Text4
Text5
Text6
Text7
Text8
Text9
Text10
Text11
Text12
6 columnas de dos celdas
Text 1
Text 2
Text 3
Text 4
Text 5
Text 6
4 columnas de tres celdas
Text 1
Text 2
Text 3
Text 4
3 columnas de cuatro celdas
Text 1
Text 2
Text 3
2 columnas una de cuatro celdas y la otra de ocho celdas
Text 1
Text 2
2 columnas de seis celdas
Text 1
Text 2
1 columnas de doce celdas
Text 1

Barra de progreso

my skill

Formularios

Más estilos de formularios en: Bootstrap forms, Bootstrap forms LESS on Github

Formulario estándar

 

Imágenes

Imágenes de fondo (1600 x 1400 px)

Imágenes de porfolio y de menú (195px x 195px)

Imágenes de anuncios

Imágenes de cursos y actividades (195px x 195px)

Imágenes galeria de fotos (1110px x 740px)

Imágenes en páginas (390px x 260px)

Imágenes cursos interiores (570px x 380px)

Tablas

Tipo mini small normal large
Warning Warning Warning Warning Warning
Warning Warning Warning Warning Warning
Warning Warning Warning Warning Warning
Warning Warning Warning Warning Warning
Warning Warning Warning Warning Warning
Warning Warning Warning Warning Warning