Botones

Colores

Color principal y color de acénto. Estilo de línea o sólido.


<button>Botón</button>
<button class="button-primary">Botón primario</button>
<button class="button-primary button-solid">Botón primario sólido</button>
<button class="button-accent">Botón acénto</button>
<button class="button-accent button-solid">Botón acénto sólido</button>

Tamaños

Pequeño, normal, grande y bloque.


<button class="button-small" type="button">Botón pequeño</button>
<button type="button">Botón normal</button>
<button class="button-big" type="button">Botón grande</button>
<button class="button-block" type="button">Botón en bloque</button>

Formularios

Formulario sencillo

El estilo del formulario se basa en el color del texto en general y la variable para bordes que también utilizan los hipervínculos y los botones. Cuando se selecciona un elemento toma el color de acénto.


<form>
  <label for="f1">Label</label>
  <input id="f1" type="text" placeholder="input">
  <label for="f2">Textarea</label>
  <textarea id="f2" rows="4" cols="50"></textarea>
  <input id="f3" type="checkbox" checked="checked">
  <label for="f3" class="label-inline">Checkbox</label>
</form>

Errores

Los errores se toman con el selector :invalid de CSS y toman el color de la variable del color de acénto. Se pueden poner errores generales, que aparecen si cualquier elemento del formulario es invalido con la clase .form-error, o errores particulares de cada input con la clase .input-error.


<form>
  <span class="form-error">Mensage general. Aparece cuando el formulario es invalido.<span>
  <label for="fe1">Label *</label>
  <input id="fe1" type="text" placeholder="input" required>
  <span class="input-error">* Este campo es obligatorio.<span>
</form>

Formularios fancy

Input & Textarea

Para animar los iputs parecido al material.


<form>
  <div class="form-input-block">
    <input id="name" type="text">
    <label for="name">Nombre</label>
  </div>
  <div class="form-input-block">
    <input id="email" type="email">
    <label for="email">
      Correo
      <span class="input-error">* Debe tener formato de correo electrónico</span>
    </label>
  </div>
  <div class="form-input-block">
    <textarea id="comment" rows="4" cols="50"></textarea>
    <label for="comment">Comentarios</label>
  </div>
</form>

Checkbox & Radio


<form>
  <div class="form-input-checkbox">
    <input id="checkbox1" type="checkbox" value="checkbox1">
    <label for="checkbox1">Checkbox</label>
  </div>
  <div class="form-input-radio">
    <input id="r1" type="radio" name="radio1" value="1" checked>
    <label for="r1">Radio 1</label>
    <input id="r2" type="radio" name="radio2" value="2">
    <label for="r2">Radio 2</label>
    <input id="r3" type="radio" name="radio3" value="3">
    <label for="r3">Radio 3</label>
  </div>
</form>

Select


<form>
  <div class="form-select-block">
    <select id="select">
      <option value="1">Opción 1</option>
      <option value="2">Opción 2</option>
    </select>
    <label for="select">Selecciona una opción</label>
  </div>
</form>

File


<form>
  <div class="form-input-file">
    <input id="file" type="file" accept="image/*">
    <label for="file">Selecciona una imágen</label>
  </div>
</form>

Hipervínculos

(Hyperlink) Un hipervínculo es un elemento de un documento electrónico que hace referencia a otro recurso. Se escriben con la etiqueta <a> y puede crear un vínculo entre elementos en el mismo documento o hacia documentos externos.

Además se puede cambiar el color del vínculo por el color de acento definido en las variables de la librería.

hipervínculo
hipervínculo acento


<a href="#">hipervínculo</a>
<a href="#" class="link-accent">hipervínculo acento</a>

Y tiene unas bonitas clases para que la linea debajo se dibuje de a poco.

hipervínculo bonito
hiperivínculo bonito acento


<a href="#" class="link-fancy">hipervínculo bonito</a>
<a href="#" class="link-fancy link-accent">hiperivínculo bonito acento</a>

Listas

Listas desordenadas

Se utiliza para listas en donde no importa el órden en el que se escriban. El primer nivel de las listas desordenadas se marcan con círculos sólidos, todos los niveles consecutivos tienen círculos de línea.

UL listas desordenadas
listas
- listas
- listas
listas


<ul>
<li> UL listas desordenadas </li>
  <li> listas
    <ul>
      <li> listas </li>
      <li> listas </li>
    </ul>
  </li>
  <li> listas </li>
</ul>

Listas ordenadas

El primer nivel de las listas ordenadas se marcan con números enteros, después se agregan ceros al inicio.

UL listas ordenadas
listas
1. listas
  1. listas
  2. listas
listas


<ol>
  <li> OL listas ordenadas </li>
  <li> listas
    <ol>
      <li> listas
        <ol>
          <li> listas </li>
          <li> listas </li>
        </ol>
      </li>
    </ol>
  </li>
  <li> listas </li>
</ol>

Listas descriptivas

Listas descriptivas con términos y descropciones.

Término: Descripción
Término: Descripción


<dl>
  <dt> Término </dt>
  <dd> Descripción </dd>
  <dt> Término </dt>
  <dd> Descripción </dd>
</dl>

Tablas

Las tablas deben ir dentro de un .table-container por si el contenido exede del tamaño máximo, se pueda ver el resto del contenido haciendo scroll horizontal. Para mobile el header se oculta por completo y las filas terminan siendo un bloque de contenido separado por líneas, se puede utilizar la clase .th-mobile dentro de las celdas para poner títulos que sólo se vean en mobile.

Títulos del thead	Títulos del thead	Títulos del thead
tfoot contenido
Títluos mobile `.th-mobile` contenido	Títluos mobile contenido	Títluos mobile contenido


<div class="table-container">
  <table>
    <thead>
      <tr>
        <th>Títulos del thead</th>
        <th>Títulos del thead</th>
        <th>Títulos del thead</th>
      </tr>
    </thead>
    <tfoot>
      <tr>
        <td colspan="3">tfoot contenido</td>
      </tr>
    </tfoot>
    <tbody>
      <tr>
        <td>
          <span class="th-mobile">Títluos mobile</span>
          contenido
        </td>
        <td>
          <span class="th-mobile">Títluos mobile</span>
          contenido
        </td>
        <td>
          <span class="th-mobile">Títluos mobile</span>
          contenido
        </td>
      </tr>
    </tbody>
  </table>
</div>

Títulos

Acá se pueden ver los ejemplos de los margenes y tamaños de los títulos como normalmente se utilizan. Además existe la clase .lead que se puede agregar al título principal para hacerla aún más grande y con mucho más margen.

Título lead


<h1 class="lead">Título lead</h1>

H1 Título

H2 Título

H3 Título

H4 Título

H5 Título

H6 Título


<h1>H1 Título</h1>
<h2>H2 Título</h2>
<h3>H3 Título</h3>
<h4>H4 Título</h4>
<h5>H5 Título</h5>
<h6>H6 Título</h6>

Esta sección va pensada para el posicionamiento en buscadores. Si se utilizan títulos consecutivos seguidos, se borra el margen entre ellos para que parezcan título y subtítulo.

H1 Título

H2 Subtítulo

H1 Título

H3 Subtítulo

H2 Título

H3 Subtítulo

H2 Título

H4 Subtítulo

H3 Título

H4 Subtítulo

H3 Título

H5 Subtítulo

H4 Título

H5 Subtítulo

H4 Título

H6 Subtítulo

H5 Título

H6 Subtítulo


<h1>H1 Título</h1>
<h2>H2 Título</h2>

<h1>H1 Título</h1>
<h3>H3 Título</h3>

<h2>H2 Título</h2>
<h3>H3 Título</h3>

<h2>H2 Título</h2>
<h4>H4 Título</h4>

<h3>H3 Título</h3>
<h4>H4 Título</h4>

<h3>H3 Título</h3>
<h5>H5 Título</h5>

<h4>H4 Título</h4>
<h5>H5 Título</h5>

<h4>H4 Título</h4>
<h6>H6 Título</h6>

<h5>H5 Título</h5>
<h6>H6 Título</h6>

También esta la común y más usada manera de poner subtítulos al estilo bootstrap, con un <small> dentro de un título.

H1 Títulosmall Subtítulo

H2 Títulosmall Subtítulo

H3 Títulosmall Subtítulo

H4 Títulosmall Subtítulo

H5 Títulosmall Subtítulo

H6 Títulosmall Subtítulo


<h1>H1 Título <small>small Subtítulo</small></h1>
<h2>H2 Título <small>small Subtítulo</small></h2>
<h3>H3 Título <small>small Subtítulo</small></h3>
<h4>H4 Título <small>small Subtítulo</small></h4>
<h5>H5 Título <small>small Subtítulo</small></h5>
<h6>H6 Título <small>small Subtítulo</small></h6>

Texto en linea

Abreviaciones

Etiqueta utilizada para una abreviacón o un acrónimo.

abbr


<abbr title="Abreviación"> abbr </abbr>

Texto eliminado

Define un fragmento de texto que fué removido del documento.

~~Deleted text~~


<del cite="URL" datetime="YYYY-MM-DDThh:mm:ssTZD"> Deleted text </del>

Enfasis

Se utiliza para resaltar un fragmento de texto.

Emphasis


<em> Emphasis </em>

Nuevo texto

Define un fragmento de texto que se incertó en un documento ya existente.

Inserted text


<ins cite="URL" datetime="YYYY-MM-DDThh:mm:ssTZD"> Inserted text </ins>

Entrada de teclado

Define la entrada de teclado.

Keyboard input


<kbd> Keyboard input </kbd>

Texto marcado

Se utiliza para resaltar partes del texto.

Marked text


<mark> Marked text </mark>

Texto pequeño

Para hacer mas pequeño un fragmento de texto.

Small


<small> Small </small>

Salida de un programa

Ejemplo de salida de un programa.

Sample output


<samp> Sample output </samp>

Texto resaltado

Para los fragmentos de texto importantes!

Strong


<strong> Strong </strong>

Superíndice

Texto pequeño que se ubica sobre la mitad superior del alto del texto.

^{Superscript text}


<sup> Superscript text </sup>

Subíndice

Texto pequeño que se ubica sobre la mitad inferior del alto del texto.

_{Subscript text}


<sub> Subscript text </sub>

Variable

Define una variable.

Variable


<var> Variable </var>

Código

Define fragmento de código.

Code


<code> Code </code>

Citas

Para citas pequeñas se utiliza la etiqueta <q> que se mantiene dentro de la línea de texto. Dentro del atributo cite se escribe la dirección de donde se tomó la cita.

Lorem ipsum dolor sit amet.


Lorem ipsum <q cite="http://es.lipsum.com/">dolor</q> sit amet.

El blockquote (cita en bloque) representa una sección que cita información de otra fuente.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc non arcu nec massa iaculis varius at in purus.
cite


<blockquote cite="http://es.lipsum.com/">
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    Nunc non arcu nec massa iaculis varius at in purus.
  </p>
  <cite>cite</cite>
</blockquote>