Documentación tipografía
Encabezados
Todas los encabezados en HTML desde el, <h1> hasta el <h6> están disponibles.
h1. Heading 1
h2. Heading 2
h3. Heading 3
h4. Heading 4
h5. Heading 5
h6. Heading 6
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi non accumsan tellus. Vivamus varius, quam ut consectetur pellentesque, libero est porta orci, nec semper enim neque a risus. Vivamus molestie rutrum augue ut varius. Nam ipsum neque, pretium ut risus mattis, interdum sagittis diam. Maecenas luctus faucibus mi, elementum vestibulum diam laoreet eu. Quisque luctus turpis finibus libero consectetur efficitur. Nulla eleifend lacus id sem vestibulum iaculis.
Énfasis
Para enfatizar un fragmento de texto con cursiva usamos <em>
El siguiente fragmento de texto se representa como texto en cursiva.
Contenido
El tamaño de fuente font-size global de la web es 16px, con una altura de línea line-height de 1.42em. Esto se aplica a <body> y todos los párrafos. Además, <p> reciben un margen inferior de 9px por defecto.
En cuanto a la tipografia usamos el Framework de Boostrap para mejorar la visualización de los contenidos. El tipo de fuente para el contenido es Roboto y los encabezados es Roboto Condensed
Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.
Negrita
El siguiente fragmento de texto es traducido como texto en negrita .
El siguiente fragmento de texto se muestra como texto en negrita.
Pequeño
Para enfatizar una línea o bloque de texto, use el tag small.
Esta línea de texto está destinada a ser tratada como letra pequeña
Estilos informativos
Use el tag <p> con la clase success, warning, info o danger.
Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Citas en bloque
Para citar bloques de contenido de otra fuente dentro de su documento. Use el tag <blockquote>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Opciones del bloque
Puede cambiar el color del borde, La etiqueta es border-color. Ejemplo: border-amber.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Puede alinearlo, con la etiqueta pull-right
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Listados
No ordenadas
Esto mostrará una lista de elementos en los que el pedido no tiene importancia explícita.
- Lorem ipsum dolor sit amet
- Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat at
- Faucibus porta lacus fringilla vel
- Eget porttitor lorem
Ordenadas
Esto mostrará una lista de elementos en los que el orden es de forma explícita (lista numerada).
- Lorem ipsum dolor sit amet
- Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat at
- Faucibus porta lacus fringilla vel
- Eget porttitor lorem
Unstyled
Esto mostrará una lista de elementos sin estilo o viñeta. La clase a aplicar es list-unstyled
- Lorem ipsum dolor sit amet
- Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat at
- Faucibus porta lacus fringilla vel
- Eget porttitor lorem
Tablas
Diseño de una tabla.
| # | First Name | Last Name | Username |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry | the Bird |
Estilos opcionales. Se pueden agregar algunas clases para mejorar la visualización.
- table-striped Agrega rayas de cebra a cualquier fila de la tabla dentro de la tabla. (no disponible en IE7-IE8).
- table-bordered Añade bordes y esquinas redondeadas a la tabla.
- table-hover Habilitar un estado hover en las filas de la tabla dentro de la tabla
- table-condensed HAce que las celdas sean más compactas
| # | First Name | Last Name | Username |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry the Bird | ||
Utilice las clases contextuales para colorear las filas de la tabla.
| Clase | Descripción |
|---|---|
.success |
Indica una acción completa o positiva. |
.danger |
Indica una acción peligrosa o potencialmente negativa. |
.warning |
Indica una advertencia que podría necesitar atención. |
.info |
Se utiliza como una alternativa a los estilos predeterminados. |
Formularios
Botones
Tener en cuenta
La etiqueta para los botones de colores es btn-color Ejemplo: color-purple
Iconos
Font Awesome es un lenguaje pictográfico de acciones relacionadas con la web que ofrece más de 300 iconos. Puede ver toda la libreria en su página oficial.
Para agregar un icono solo es cuestión de añadir la clase fa fa-nombre-icon. Ejemplo: fa fa-rocket
Paleta de Colores
COLOR PRIMARY
#C84F3B, #A23E2D
AMBER
#B23600, #8E2B00
PURPLE
#6A006F, #550059
RED
#A62935, #85212a
YELLOW
#FFCC0A, #D4A800
LIME
#B8C91A, #93A115
Otros Colores
BLUE
#1F4788, #19396D
LIGHT GRAY
#F5F7FA, #E6E9ED
MEDIUM GRAY
#CCD1D9, #AAB2BD
DARK GRAY
#656D78, #434A54