Tipografía y Estilos

Encabezados y textos principales

Label	Font	Examples
<h1>	'Helvetica Neue' 26px Light'	<h1> h1. Encabezado flexygo </h1>
<h2>	'Helvetica Neue' 22px Light'	<h2> h2. Encabezado flexygo </h2>
<h3>	'Helvetica Neue' 20px Light'	<h3> h3. Encabezado flexygo </h3>
<h4>	'Helvetica Neue' 18px Light'	<h4> h4. Encabezado flexygo </h4>
<h5>	'Helvetica Neue' 17px Light'	<h5> h5. Encabezado flexygo </h5>
<h6>	'Helvetica Neue' 15px Bold'	<h6> h6. Encabezado flexygo </h6>

Opciones de color de texto y fondo

Texto	Fondo	Botones
.txt-outstanding	.bg-outstanding	.btn .btn-outstanding
.txt-success	.bg-success	.btn .btn-success
.txt-warning	.bg-warning	.btn .btn-warning
.txt-primary	.bg-primary	.btn .btn-primary
.txt-danger	.bg-danger	.btn .btn-danger
.txt-notify	.bg-notify	.btn .btn-notify
.txt-tools	.bg-tools	.btn .btn-tools
.txt-info	.bg-info	.btn .btn-info

Alineación y tamaños de texto

Texto alineado a la izquierda.

Texto alineado al centro.

Texto alineado a la derecha.

HTML

<p class="text-left">Texto alineado a la izquierda.</p>
<p class="text-center">Texto alineado al centro.</p>
<p class="text-right">Texto alineado a la derecha.</p>

Tamaño de fuente

Toma el control total sobre la fuente ajustando el tamaño con las siguientes clases CSS.

.size-l .size-m .size-s .size-xs

HTML

<p class="size-l">.size-l</p>
<p class="size-m">.size-m</p>
<p class="size-s">.size-s</p>
<p class="size-xs">.size-xs</p>

Atenuar texto

Para atenuar texto se usa txt-muted, mostrando el texto en un color gris que hace que parezca deshabilitado.

Texto atenuado

HTML

<p class = "txt-muted">Texto atenuado</p>

Texto tachado

Decoración de texto con la clase .strike

Clase Strike

HTML

<p class = "strike">Clase Strike</p>

Acrónimos

La etiqueta <abbr> define una abreviatura o acrónimo.

Hago HTML

HTML

<p> Hago  <abbr title = "Hypertext Markup Language"> HTML </p>

Text secundario

Texto secundario del encabezado con la etiqueta <small>.

h4. Encabezado flexygo Texto secundario

HTML

<h4> h5. Encabezado flexygo <small> Texto secundario </small></h4>

Lista de Descripción

Alinear términos y descripciones horizontalmente usando las clases predefinidas del sistema de cuadrícula

Mi lista de Descripción

Mi descripcion

Mi descripcion lista 2

Mi descripcion 2

HTML

<dl>
    <dt>Mi lista de Descripción</dt>
    <dd>Mi descripcion</dd>
    <dt>Mi descripcion lista 2</dt>
    <dd>Mi descripcion 2</dd>
</dl>

Horizontal

Puedese usar la clase dl-horizontal para hacer dt i dd alineado con su pareja una al lado de la otra.

Mi lista de Descripción

Mi descripcion

Mi descripcion lista 2

Mi descripcion 2

HTML

<dl class="dl-horizontal">
    <dt>Mi lista de Descripción</dt>
    <dd>Mi descripcion</dd>
    <dt>Mi descripcion lista 2</dt>
    <dd>Mi descripcion 2</dd>
</dl>

Listas

Hay multiples tipos de listas a hacer facil usando directamente HTML sin pasar por CSS.

No ordenada

Esto añadirá el espaciado de la lista y añadirá un punto junto a cada elemento de la lista.

• Lechuga
• Tomates
• Arroz

HTML

<ul>
    <li>Lechuga</li>
    <li>Tomates</li>
    <li>Arroz</li>
</ul>

Ordenada

Esto añadirá el espaciado de la lista y añadirá a cada elemento su número correspondiente.

1. Cocine las verduras
2. Añada el arroz y el agua
3. Cuando se haya absorbido el agua, sirva y disfrute de su comida

HTML

<ol>
  <li>Cocine las verduras</li>
  <li>Añada el arroz y el agua</li>
  <li>Cuando se haya absorbido el agua, sirva y disfrute de su comida</li>
</ol>

En una línea

Crea una lista en una sola línea.

• The legend of Zelda
• The last of us
• Halo

HTML

<ul class="list-inline text-center">
  <li>The legend of Zelda</li>
  <li>The last of us</li>
  <li>Halo</li>
</ul>

En una línea con barras verticales

Crea una lista en una sola línea, pero separada mediante barras verticales.

• The legend of Zelda
• The last of us
• Halo

HTML

<ul class="list-piped">
  <li>The legend of Zelda</li>
  <li>The last of us</li>
  <li>Halo</li>
</ul>

Dirección

Presenta la información de contacto. Conserva el formato terminando todas las líneas con <br>.

Ahora Freeware.
Polígono Industrial Camí del Mar,
C/Ceramistes, 19, 46120 Alboraia,
Valencia
P: (+34) 963 021 000

HTML

<address>
  <strong>Ahora Freeware.</strong><br>
  <i class="flx-icon icon-house"/> Polígono Industrial Camí del Mar,<br>
  <i class="flx-icon icon-house-1"/> C/Ceramistes, 19, 46120 Alboraia,<br>
  Valencia <br>
  <abbr title="Phone">P:</abbr> (+34) 963 021 000
</address>

Citas

Para citar bloques de contenido de otra fuente dentro de tu documento. Envuelve <blockquote> alrededor de cualquier HTML como cita.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Alguien famoso en Título de la fuente

HTML

<blockquote>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  <small>Alguien famoso en 
    <cite title="Título de la fuente">Título de la fuente</cite>
  </small>
</blockquote>

Clases de flexygo aplicables a los elementos HTML

Clase	Descripción	Imagen
.right	Mueve el elemento a la derecha	Ejemplo
.left	Mueve el elemento a la posición izquierda.	Ejemplo
.clear-both, .clear	El cuadro sobre el que se aplica baja hasta que su borde superior esté debajo del borde inferior de cualquier elemento flotante a la izquierda o derecha.	Ejemplo
.docs-section	Aplica un margen inferior de 60px al elemento.	Ejemplo
.nopadding	Elimina los márgenes del elemento tanto hacia el exterior como hacia el interior.	Ejemplo
.padding-0 .padding-xs .padding-s .padding-m .padding-l .padding-left-0/xs/s/m/l .padding-right-0/xs/s/m/l .padding-top-0/xs/s/m/l .padding-bottom-0/xs/s/m/l	Las clases "padding-x" aplican un espacio en los cuatro lados del elemento. "Padding-0" aplica 0px y "Padding-l" aplica 15px. Las clases "padding-left-x" aplican un espacio y tamaño según el lado indicado. "Padding-left-0" aplica 0 píxeles de espacio a la izquierda y "Padding-top-l" aplica 15 píxeles de espacio en la parte superior.	Ejemplo
.margin-0 .margin-xs .margin-s .margin-m .margin-l .margin-left-0/xs/s/m/l .margin-right-0/xs/s/m/l .margin-top-0/xs/s/m/l .margin-bottom-0/xs/s/m/l	Las clases "margin-x" aplican un espacio en los cuatro lados del elemento. "Margin-0" aplica 0px y "margin-l" aplica 15px. Las clases "margin-left-x" aplican un espacio y tamaño según el lado indicado. "Margin-left-0" aplica 0 píxeles de espacio a la izquierda y "margin-top-l" aplica 15 píxeles de espacio en la parte superior.	Ejemplo
.last-module-margin	Añade un margen de 100 píxeles debajo del módulo al que se aplique esta clase.	Ejemplo
.inline	Hace que un elemento genere uno o más cuadros en línea.	Ejemplo
.block	Transforma un elemento en un bloque, por lo que siempre comienza en una nueva línea y ocupa todo el espacio disponible, incluso si su contenido no ocupa todo el espacio de la línea.	Ejemplo
.inline-block	Hace que un elemento se comporte como un elemento en línea, pero permite que tenga un ancho y una altura.	Ejemplo
.hidden .hidden-s .hidden-m .hidden-l	Se utiliza comúnmente para ocultar y mostrar elementos sin eliminarlos ni recrearlos. Un elemento con la clase "hidden" no ocupa espacio. La clase "hidden-s" ocultará el elemento cuando el tamaño de la pantalla sea menor a 728 píxeles. Con las otras dos clases, es lo mismo dependiendo del tamaño de la pantalla (m o l).	Ejemplo
.show .show-s .show-m .show-l	Se utiliza comúnmente para mostrar y ocultar elementos sin eliminarlos ni recrearlos. Un elemento con la clase "show" siempre es visible. La clase "show-s" hará que el elemento se muestre cuando el tamaño de la pantalla sea mayor o igual a 728 píxeles. Con las otras dos clases, es lo mismo dependiendo del tamaño de la pantalla (m o l).	-
.hidden-only-s .hidden-only-m .hidden-only-l .hidden-only-xl .show-only-s .show-only-m .show-only-l .show-only-xl	Estas clases son útiles si deseas ocultar o mostrar algo solo para tamaños específicos de pantalla. La clase "hide-only-s" ocultará el elemento solo si el tamaño de la pantalla está en el rango "s". Con el resto de clases, funciona igual pero para los rangos correspondientes (m, l o xl).	-
.nolist	No muestra los elementos de una lista ordenada o desordenada.	Ejemplo
.clickable	Cuando el puntero está sobre el elemento, se añade un icono de cursor.	Ejemplo
.roundBorders	Cuando se aplica a módulos, sus bordes se redondearán.	Ejemplo
.fullscreen	El elemento ocupa el 100% del espacio de la ventana.	Ejemplo
.show-empty-column	Añádelo a un elemento con clase bootstrap .col para obtener una columna vacía y evitar el movimiento de las otras columnas.	Ejemplo
.hover-underline	El elemento se subraya cuando el puntero pasa sobre él.	-
.hover-bold	El elemento se pone en negrita cuando el puntero pasa sobre él.	-
.hover-outstanding .hover-primary .hover-success .hover-info .hover-warning .hover-danger .hover-notify .hover-tools	El elemento cambia de color cuando el puntero pasa sobre él.	-
.grid-column-separator	Muestra un separador de columnas en el control de edición de la cuadrícula.	Ejemplo

Colores contextuales

Flexygo tiene un conjunto predefinido de clases para colorear texto, fondos y cajas. Cada uno de estos conjuntos de colores está definido bajo una serie de nombres con sus respectivos prefijos para texto, fondo o caja.

Destacado

.txt-outstanding

.bg-outstanding

.box-outstanding

Primario

.txt-primary

.bg-primary

.box-primary

Éxito

.txt-success

.bg-success

.box-success

Información

.txt-info

.bg-info

.box-info

Advertencia

.txt-warning

.bg-warning

.box-warning

Peligro

.txt-danger

.bg-danger

.box-danger

Notificación

.txt-notify

.bg-notify

.box-notify

Herramientas

.txt-tools

.bg-tools

.box-tools

Agregar ícono y botón de cierre

x i ¡Información!Pulsa el botón de cierre.

HTML

<div class="alert box-info">
  <button class="close" data-dismiss="alert">x</button>
  <i class="flx-icon icon-information-2 icon-lg"></i>
  <span><strong>Info!</strong>Press close button. </span>
</div>

Colores de estado

Flexygo tiene un conjunto predefinido de clases para colorear los controles en los formularios. Cada uno de estos conjuntos de colores está definido bajo una serie de nombres y puede ser utilizado en cualquier componente web de flx-control.

.has-warning

.has-error

.has-success

.has-info

.has-outstanding

.has-tools

.has-notify

.has-primary

Fijo

Encabezado fijo

El encabezado de la lista ahora puede configurarse como fijo en los módulos.

Para hacerlo, solo tienes que agregar la clase "sticky-header" al módulo como se muestra en la imagen.

Barra de herramientas fija

La barra de herramientas ahora puede configurarse como fija en los módulos.

Para hacerlo, solo tienes que agregar la clase "sticky-toolbar" al módulo como se muestra en la imagen.

Colores de Flipcard

Flexygo tiene un conjunto predefinido de clases para definir los fondos y textos de los flipcards. Cada uno de estos conjuntos de colores está definido bajo una serie de nombres con sus respectivos prefijos para el frente y el reverso.

HTML

<div class="card card-outstanding">
    <div class="flip-card" onclick="jQuery(this).toggleClass('flip-card-reverse');">
        <div class="flip-card-flipper">
        <div class="flip-card-front ">
            <div class="admin"><h3>Outstanding</h3><span class="main-icon"> <i class="flx-icon flx-icon icon-pin icon-5x"></i></span></div>
            <div class="more-info"><i class="flx-icon icon-arrow-head-2 "></i>More info</div>
        </div>
        <div class="flip-card-back">
            <div class="admin reverse">
            <div class="child-nodes admin-back"><ul><li><span>Your items</span></li></ul></div>
            <div class="back"><i class="flx-icon icon-arrow-head-2 icon-rotate-180"></i>&nbsp;</div>
            </div>
        </div>
        </div>
    </div>
</div>