Acerca de armazon.css

armazon.css es una plantilla reutilizable de CSS3 muy simple y ligera construida usando el pre-procesador de CSS LESS que encajará con tus necesidades si consideras que cualquiera de las hojas de estilo 'reset', no son suficientes ya que requieren un laborioso trabajo de re-estilado de cada elemento HTML despues del reinicio, y piensas que los Frameworks de CSS son demasiado para tu proyecto ya que vienen con una cantidad enorme de componentes que probablemente jamas vayas a usar.

El principio básico de armazon es la sencillez, con una curva de aprendizaje mínima es facil de aprender y tambien facil de extender. Su proposito principal es proporcionar un punto de partida CSS optimizado, con una hoja de estilos de salida mejorada que te ayudará a acelerar el desarrollo y diseño de tu aplicación web adaptable y responsiva.

Las características principales de armazon.css son :

Siguiente Paso : Comienzo Rápido e Instación

Comienzo Rápido

Instalación & Como Empezar

armazon.css va a hacer mucho más facil arrancar el desarrollo de tu aplicación web adaptable (ersponsive), la forma más rápida de tenerlo activo y funcional en tu sitio es usando la versión precompilada y minificada de armazon, para ello sigue estos sencillos pasos :

  1. Incluye el archivo armazon.min.css en tu página web. Para ello tienes 3 opciones diferentes :
    • Instalarlo usando bower con el siguiente comando : $ bower install armazon.css
    • Usando una copia descargada de armazon.css, puedes obtener el archivo precompilado y minificado desde el repositorio principal alojado en GitHub : armazon.min.css @GitHub
    • O consumiendo el archivo alojado en el CDN proporcionado amablemente por rawgit.com : armazon.min.css @RawGit CDN 

    <!-- Instalado via Bower or usando una copia descargada: -->
<link rel="stylesheet" type="text/css" href="ruta/a/tu/archivo/armazon.min.css" />
<!-- Usando el archivo alojado en el CDN: -->
<link rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/alterebro/armazon.css/v0.3.1/armazon/armazon.min.css" />

  2. Establece la meta etiqueta 'viewport' en la cabecera de tu documento <head> para controlar la presentacion de tu página en dispositivos móviles : 

    <meta name="viewport" content="width=device-width, initial-scale=1" />

<!-- Puedes añadir tambien las siguientes metaetiquetas opcionales -->
<meta name="HandheldFriendly" content="True" />
<meta name="MobileOptimized" content="320" />
  3. Hecho!, eso es todo. Ahora ya puedes empezar a desarrollar, aqui tienes una plantilla HTML sencilla para que le puedas echar un vistazo y te ayude a empezar.

Para trabajar directamente con el código fuente de armazon, seguramente querrás usar los archivos de desarrollo que estan alojados en el repositorio principal del proyecto en GitHub : repositorio de armazon.css @github y probablemente tambien te gustara saber un poco más sobre como trabajar con estos archivos en la siguiente sección :

Siguiente Paso : Desarrollo con LESS

Trabajando con el archivo .less & Personalización

Trabajando con el archivo armazon.less

Si prefieres trabajar con la versión del archivo sin compilar de armazon para asi poder personalizar el resultado de tus estilos en el archivo resultante CSS, puedes seguir estos sencillos pasos que te ayudaran a conocer como hacerlo.
Basicamente necesitas tener el compilador lessc instalado en tu ordenador e incluir de algún modo el archivo armazon.less en tu flujo de trabajo. ( Puedes encontrar más información sobre como hacer funcionar LESS en tu maquina en la web oficial : lesscss.org ). Una vez tengas listo tu entorno para trabajar con LESS, ya puedes empezar a jugar con el código de armazon :

  1. Trabajando dentro del archivo armazon.less :
    Puedes crear tus estilos en el mismo archivo armazon.less incluyendo tus reglas CSS / LESS justo al final del código existente, donde las siguientes lineas se encuentran en lo más bajo del archivo : 

    // armazon.css eof
// --------------------------------------------
// --------------------------------------------
// Author's custom styles :

// A partir de aquí puedes empezar tu código CSS / LESS ...
.regla {
    propiedad : valor;
    ...
}

  2. Trabajando fuera del archivo armazon.less :
    Tambien puedes crear tu propia hoja de estilos .less, en ese caso tendrás que incluir el archivo less armazon como sigue : 

    @import 'ruta/a/tu/archivo/armazon.less';

Personalizacion del CSS compilado. Ajustando las variables de armazon

En cualquiera de los casos descritos arriba, tendrás acceso a las variables definidas que se encuentran situadas al principio del archivo armazon.less. Puedes cambiarlas y asignarles el valor deseado que se ajuste a tus necesidades.
Este es el grupo de variables LESS disponibles :

Grupo Nombre de Variable Valor por Defecto Definición
Media Queries @armazon-mobile-breakpoint 580 Anchura para filtrar dispositivos mobiles
@armazon-desktop-breakpoint 960 Anchura que activa el diseño para ordenadores de escritorio.
Margins @armazon-margin 3rem Margen entre elementos global
@armazon-columns-margin 3.5 Cantidad de porcentaje para el margen entre columnas de la rejilla (Valor percentual %)
@armazon-columns-tablet-margin 2 Porcentaje del margen cuando el diseño responsivo salta al modo para tabletas.
Colors @armazon-color-background #fafbfc Color de Fondo Global
@armazon-color-foreground #262524 Color de primer plano y textos.
@armazon-color-primary #229def Color Primario : Botones y enlaces
@armazon-color-neutral #a0a0a0 Gris Neutral

Puedes asignar diferentes valores a las siguientes variables que se encuentran en el archivo armazon.less : 

/* --------------------------------------------
// Variables @less
// ----------------------------------------- */
@armazon-mobile-breakpoint  : 580; /* Anchura para filtrar dispositivos móviles */
@armazon-desktop-breakpoint : 960; /* Anchura para filtrar dispositivos de escritorio */

@armazon-margin                 : 3rem; /* Margen Global */
@armazon-columns-margin         : 3.5;  /* Valor percentual del margen entre las columnas de la rejilla. */
@armazon-columns-tablet-margin  : 2;    /* Valor percentual del margen entre columnas en modo tableta. */

@armazon-color-background : #fafbfc; /* Color de Fondo Global */
@armazon-color-foreground : #262524; /* Color de Primer Plano y Textos Global */
@armazon-color-primary    : #229def; /* Color Primario para botones y enlaces */
@armazon-color-neutral    : #a0a0a0; /* Gandalf el Gris Neutral */

Siguiente Paso : La Rejilla

Funcionamiento de La Rejilla

El sistema 'responsive' fluido de rejilla en armazon esta basado en un diseño de 6 columnas que cambia su tamaño y se adapta al mismo tiempo que la ventana y el navegador del dispositivo lo hace. El tamaño de los margenes entre columnas puede ser controlado dentro del archivo armazon.less asi como ha sido descrito en la seccion anterior, las variables llamadas @armazon-columns-margin y @armazon-columns-tablet-margin estableceran el porcentaje del espacio visible asignado al espacio entre columnas.

Sistema de Rejilla Adaptable

La rejilla funciona simplemente creando un elemento contenedor con una clase CSS .bloque ( por ejemplo un elemento div : <div class="bloque"></div> ) y una vez tengas este 'contenedor de bloque' en tu documento, tendras de poner dentro de el otro/s elemento/s contenedor/es ( columna(s) ) a las que les asignaras una clase CSS con la convencion de nombre usada en armazon : .columna-TAMAÑO-COLUMNA 

<!-- Dos columnas, cada una con un ancho de la mitad  -->
<div class="bloque">
	<div class="columna-una-mitad">una-mitad</div>
	<div class="columna-una-mitad">una-mitad</div>
</div>
Nombres de clases CSS disponibles
Nombre de ClaseCódigo HTML
.columna-un-sexto<div class="columna-un-sexto">...</div>
.columna-un-cuarto<div class="columna-un-cuarto">...</div>
.columna-un-tercio<div class="columna-un-tercio">...</div>
.columna-una-mitad<div class="columna-una-mitad">...</div>
.column-dos-tercios<div class="column-dos-tercios">...</div>
.column-tres-cuartos<div class="column-tres-cuartos">...</div>
.column-cinco-sextos<div class="column-cinco-sextos">...</div>

Desplazamiento

A las columnas dentro de cualquier elemento 'contenedor de bloque' pertenecientes al sistema de rejilla se les puede establecer una compensación o desplazamiento desde la izquierda cuando se les añade una clase CSS con la forma : desplaza-TAMAÑO. Por ejemplo, si queremos que una columna tenga una compensación de un tercio por la izquierda, simplemente añadiremos una clase CSS : .desplaza-un-tercio 

<!-- Una columna con un desplazamiento izq. de un tercio.  -->
<div class="bloque">
    <div class="columna-un-tercio desplaza-un-tercio">
        ...
    </div>
</div>
Clases CSS disponibles
Clase CSS Código HTML
.desplaza-un-sexto<div class="desplaza-un-sexto column-un-sexto">1/6 col desplazado 1/6</div>
.desplaza-un-cuarto<div class="desplaza-un-cuarto column-un-sexto">1/6 col desplazado 1/4</div>
.desplaza-un-tercio<div class="desplaza-un-tercio column-un-sexto">1/6 col desplazado 1/3</div>
.desplaza-una-mitad<div class="desplaza-una-mitad column-un-sexto">1/6 col desplazado 1/2</div>
.desplaza-dos-tercios<div class="desplaza-dos-tercios column-un-sexto">1/6 col desplazado 2/3</div>
.desplaza-tres-cuartos<div class="desplaza-tres-cuartos column-un-sexto">1/6 col desplazado 3/4</div>
.desplaza-cinco-sextos<div class="desplaza-cinco-sextos column-un-sexto">1/6 col desplazado 5/6</div>

Ejemplos de Código

Ejemplos de Rejilla

<!-- ejemplo de código de rejilla en armazon -->
<div class="bloque">
    <div class="columna-un-sexto">un-sexto</div>
    <div class="columna-un-sexto">un-sexto</div>
    <div class="columna-un-sexto">un-sexto</div>
    <div class="columna-un-sexto">un-sexto</div>
    <div class="columna-un-sexto">un-sexto</div>
    <div class="columna-un-sexto">un-sexto</div>
</div>
<div class="bloque">
    <div class="columna-un-tercio">un-tercio</div>
    <div class="columna-dos-tercios">dos-tercios</div>
</div>
<div class="bloque">
    <div class="columna-un-cuarto">un-cuarto</div>
    <div class="columna-tres-cuartos">tres-cuartos</div>
</div>
<div class="bloque">
    <div class="columna-un-sexto">un-sexto</div>
    <div class="columna-un-sexto">un-sexto</div>
    <div class="columna-un-sexto">un-sexto</div>
    <div class="columna-un-sexto">un-sexto</div>
    <div class="columna-un-tercio">un-tercio</div>
</div>
<div class="bloque">
    <div class="columna-cinco-sextos">cinco-sextos</div>
    <div class="columna-un-sexto">un-sexto</div>
</div>
<div class="bloque">
    <div class="columna-un-cuarto">un-cuarto</div>
    <div class="columna-un-sexto">un-sexto</div>
    <div class="columna-un-tercio">un-tercio</div>
    <div class="columna-un-cuarto">un-cuarto</div>
</div>
un-sexto
un-sexto
un-sexto
un-sexto
un-sexto
un-sexto
un-tercio
dos-tercios
un-cuarto
tres-cuartos
un-sexto
un-sexto
un-sexto
un-sexto
un-tercio
cinco-quintos
un-sexto
un-cuarto
un-sexto
un-tercio
un-cuarto

Ejemplos de Desplazamiento

<div class="bloque"><div class="columna-cinco-sextos desplaza-un-sexto">desplaza 1/6</div></div>
<div class="bloque"><div class="columna-tres-cuartos desplaza-un-cuarto">desplaza 1/4</div></div>
<div class="bloque"><div class="columna-dos-tercios desplaza-un-tercio">desplaza 1/3</div></div>
<div class="bloque"><div class="columna-una-mitad desplaza-una-mitad">desplaza 1/2</div></div>
<div class="bloque"><div class="columna-un-tercio desplaza-dos-tercios">desplaza 2/3</div></div>
<div class="bloque"><div class="columna-un-cuarto desplaza-tres-cuartos">desplaza 3/4</div></div>
<div class="bloque"><div class="columna-un-sexto desplaza-cinco-sextos">desplaza 5/6</div></div>
desplaza 1/6
desplaza 1/4
desplaza 1/3
desplaza 1/2
desplaza 2/3
desplaza 3/4
desplaza 5/6
Siguiente Paso : Clases Auxiliares

Clases Auxiliares

Clases CSS

Aparte de las clases CSS básicas estructurales definidas en la sección anterior Funcionamiento de La Rejilla, armazon tiene tambien un pequeño grupo de clases auxiliares

Nombre de la clase CSS Definición
.botonPara estilar las etiquetas HTML de hipervinculo <a> y hacerlas parecer un elemento de boton 'input'
.ancho-completo( 100% de ancho )
.ancho-completo-max( 100% de ancho máximo )
.empuja-derechaflota el contenido a la derecha
.empuja-izquierdaflota el contenido a la izquierda
.clearfixHack para Auto-limpieza de elementos flotantes

Variables de Media Query

Variable LESS Definición
@mobile Estilos por defecto, su objetivo son los dispositivos con un ancho máximo definido en la variable @armazon-mobile-breakpoint ( 580 por defecto ).
No deberiás usar nunca esta variable en un desarrollo prioritario para movil (mobile-first).
@non-mobile Esta dirigido a dispositivos con un ancho de pantalla más grande que el tamaño definido en @armazon-mobile-breakpoint ( 580 por defecto )
@tablet Dirigido a dispositivos con un ancho de pantalla que se encuentre entre los valores definidos de @armazon-mobile-breakpoint y @armazon-desktop-breakpoint
( por defecto será en los menores que 960 y mayores que 580 ).
@desktop Para dispositivos cuyo ancho de pantalla sea más grande que el definido en la variable @armazon-desktop-breakpoint (960 píxeles por defecto)

Estas han de ser usadas junto a la regla de CSS @media. La mejor forma de emplear las media queries en un desarrollo prioritario para dispositivos móviles (mobile-first) sería la de crear estas queries junto al código relevante ( El cual deberia ser aquellos que son usados por defecto en los dispositivos móviles ). Por ejemplo, si quieres cambiar los estilos de los botones en pantallas grandes, pega la query de non-mobile en la sección de los botones y crea tus estilos allí : 

.button {
    // Reglas comunes para todos los @media
    color: #c00;
    height: 30px;
    font-size: 14px;

    @media @non-mobile {
        // Especificas para dispositivos no móviles (non-mobile)
        height: 40px;
        font-size: 18px;
    }
}

Las media queries de LESS estan situadas al principio del archivo armazon.less. Puedes modificarlas y extenderlas como desees. 

@mobile     : ~"all and (max-width: @{armazon-mobile-breakpoint}px)";   // Valor por defecto
@non-mobile : ~"all and (min-width: @{armazon-mobile-breakpoint}px)";   // Coincide con ambas @tablet y @desktop
@tablet     : ~"all and (min-width: @{armazon-mobile-breakpoint}px) and (max-width: @{armazon-desktop-breakpoint}px)";
@desktop    : ~"all and (min-width: @{armazon-desktop-breakpoint}px)";
Siguiente Paso : Elementos HTML

Elementos HTML : Tipografía & Elementos de Texto

No tienes que seguir ningun patrón específico cuando uses elementos de texto semánticos. armazon.css sobrescribe los estilos por defecto establecidos en los elementos HTML.

Titulares

<!-- Titulares -->
<h1>Titular de Nivel 1 <strong>Negrita</strong></h1>
<!-- Cabecera de 2do nivel : H2 -->
<h2>Titular de Nivel 2. <strong>Texto Negrita</strong></h2>
<!-- Cabecera de 3er nivel : H3 -->
<h3>Titular de Nivel 3 — <strong>Nivel 3</strong></h3>
<!-- Cabecera de 4to nivel : H4 -->
<h4>Titular de Nivel 4 : <strong>Titular Nivel 4</strong></h4>
<!-- Cabecera de 5to nivel : H5 -->
<h5>Titular de Nivel 5 — <strong>Titular de Nivel 5</strong></h5>
<!-- Cabecera de 6to nivel : H6 -->
<h6>Titular de Nivel 6 / <strong>Lorem ipsum dolor</strong></h6>

Titular de Nivel 1 Negrita

Titular de Nivel 2. Texto en Negrita

Titular de Nivel 3 — Nivel 3

Titular de Nivel 4 : Titular Nivel 4

Titular de Nivel 5 — Titular de Nivel 5
Titular de Nivel 6 / Lorem ipsum dolor

Elementos semánticos de texto en linea.

<p>
    Lorem ipsum dolor sit amet, Using mark tag to <mark>highlight text</mark>. Deleted text <del>sample here</del> consectetur
    adipiscing elit <dfn id="def-lorem">definition tag with an id target</dfn>. <a href="http://git.io/armazon">this is a link :
    consectetur adipiscing elit</a>. Duis rhoncus <strong>strong text : nulla ac lacus scelerisque</strong>, at ultrices quam
    convallis. <abbr title="abbr tag with title">Abbr element, praesent sollicitudin with a title</abbr> libero augue,
    <acronym title="acronym tag with title">acronym used fusce feugiat</acronym> vulputate <ins>accumsan pellentesque</ins> neque.
    Etiam quis <em>consequat nisl</em>. Donec <s>ed est fermentum</s>, <a href="#def-lorem">consequat elit at</a>, sodales ante.
</p>
<p>
    Inline <code>code</code>, <kbd>kbd</kbd> tag elements and <samp>samp</samp> text.
    Maecenas <u>mattis</u>. <small>Small text Ut dictum nisl mollis</small>, ut vulputate convallis <sup>sup : pretium lacus</sup>.
    Aenean erat nibh <sub>sub : tellus</sub> mattis eu accumsan eget <code>$_q = (!empty($_GET['q']));</code> diam at cursus.
</p>
<p>
    <abbr title="Too Long; Didn't Read">TLDR</abbr> : consectetur<sub>2</sub> adipiscing elit<sup>3</sup> nisl in,
    <b>vestibulum turpis</b>. Ut <dfn>habitasse</dfn> platea. <mark>Duis vel ipsum scelerisque</mark>, venenatis magna.
    <small>Small text : Donec eget.</small> consequat ligula <strong>Sed dapibus orci</strong>.
    Sed consequat <a href="about://" target="_blank">Aliquam quis velit</a>.
</p>

Lorem ipsum dolor sit amet, Using mark tag to highlight text. Deleted text sample here consectetur adipiscing elit definition tag with an id target. this is a link : consectetur adipiscing elit. Duis rhoncus strong text : nulla ac lacus scelerisque, at ultrices quam convallis. Abbr element, praesent sollicitudin with a title libero augue, acronym used fusce feugiat vulputate accumsan pellentesque neque. Etiam quis consequat nisl. Donec ed est fermentum, consequat elit at, sodales ante.

Inline code, kbd tag elements and samp text. Maecenas mattis. Small text Ut dictum nisl mollis, ut vulputate convallis sup : pretium lacus. Aenean erat nibh sub : tellus mattis eu accumsan eget $_q = (!empty($_GET['q'])); diam at cursus.

TLDR : consectetur2 adipiscing elit3 nisl in, vestibulum turpis. Ut habitasse platea. Duis vel ipsum scelerisque, venenatis magna. Small text : Donec eget. consequat ligula Sed dapibus orci. Sed consequat Aliquam quis velit.

Bloques de Cita

<blockquote>
    <p>The Earth provides enough to satisfy every man's need but not for every man's greed.</p>
    <footer> — <cite><a href="https://en.wikipedia.org/wiki/Mahatma_Gandhi">Mahatma Gandhi</a></cite></footer>
</blockquote>

The Earth provides enough to satisfy every man's need but not for every man's greed.

Bloques de Código

<pre><code>Esta es una cadena de código dentro de un elemento {pre}
$_ROOT = realpath(dirname(__FILE__)) . '/';
$_QUERY = trim( $_QUERY, '/' );</code></pre>
<pre>Bloque de codigo PRE con texto plano dentro de el.</pre>
Esta es una cadena de código dentro de un elemento {pre}
$_ROOT = realpath(dirname(__FILE__)) . '/';
$_QUERY = trim( $_QUERY, '/' );
Bloque de codigo PRE con texto plano dentro de el.

Listas

Lista de Definición

<!-- Ejemplo de Lista de Definición HTML -->
<dl>
    <dt>Término def. 01</dt>
    <dd>dd - Definición 01 - a</dd>
    <dd>dd - Definición 01 - b</dd>

    <dt>Término def. 02</dt>
    <dd>dd - Definición 02</dd>

    <dt>Término def. 03</dt>
    <dd>dd - Definición 03</dd>
</dl>
Término def. 01
dd - Definición 01 - a
dd - Definición 01 - b
Término def. 02
dd - Definición 02
Término def. 03
dd - Definición 03

Lista Desordenada

<!-- Ejemplo de Lista Desordenada HTML -->
<ul>
    <li>Elemento de Lista 01</li>
    <li>Elemento de Lista 02</li>
    <li>Elemento de Lista 03
        <ul>
            <li>Elem. de Lista anidado 01</li>
            <li>Elem. de Lista anidado 02</li>
            <li>Elem. de Lista anidado 03</li>
        </ul>
    </li>
</ul>
  • Elemento de Lista 01
  • Elemento de Lista 02
  • Elemento de Lista 03
    • Elem. de Lista anidado 01
    • Elem. de Lista anidado 02
    • Elem. de Lista anidado 03

Lista Ordenada

<!-- Ejemplo de Lista Ordenada HTML -->
<ol>
    <li>Elemento de Lista 01</li>
    <li>Elemento de Lista 02
        <ol>
            <li>Elem. de Lista anidado 01</li>
            <li>Elem. de Lista anidado 02</li>
        </ol>
    </li>
    <li>Elemento de Lista 03</li>
    <li>Elemento de Lista 04</li>
</ol>
  1. Elemento de Lista 01
  2. Elemento de Lista 02
    1. Elem. de Lista anidado 01
    2. Elem. de Lista anidado 02
  3. Elemento de Lista 03
  4. Elemento de Lista 04

Tablas

<table>
    <thead><tr><th>Titular de Tabla #01</th><th>Titular de Tabla #02</th></tr></thead>
    <tbody>
        <tr>
            <td>Texto de ejemplo ... Donec eget dictum nisl</td>
            <td>Texto de ejemplo ... Etiam pharetra lorem a lobortis dapibus</td>
        </tr>
        <tr>
            <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
            <td>Ut eget massa commodo, venenatis nisl in, vestibulum turpis.</td>
        </tr>
        <tr>
            <td>Donec eget dictum nisl</td>
            <td>Etiam pharetra lorem a lobortis dapibus</td>
        </tr>
        <tr>
            <td>Etiam pharetra lorem a lobortis dapibus</td>
            <td>Donec eget dictum nisl</td>
        </tr>
    </tbody>
    <tfoot><tr><td colspan="2">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td></tr></tfoot>
</table>
Titular de Tabla #01 Titular de Tabla #02
Texto de ejemplo ... Donec eget dictum nisl Texto de ejemplo ... Etiam pharetra lorem a lobortis dapibus
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eget massa commodo, venenatis nisl in, vestibulum turpis.
Donec eget dictum nisl Etiam pharetra lorem a lobortis dapibus
Etiam pharetra lorem a lobortis dapibus Donec eget dictum nisl
Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Elementos de Formulario

Botones

<button>Esto es un Botón</button>
<input type="button" value="input:type:button" />
<input type="reset" value="input:type:reset" />
<input type="submit" value="input:type:submit" />
<p><a href="#" class="button">Enlace con clase .boton</a></p>
<fieldset>
    <legend>Dentro de un Fieldset</legend>
    <div>
        <button disabled="disabled">Botón deshabilitado</button>
        <input type="button" disabled="disabled" value="input:button:disable" />
        <input type="submit" disabled="disabled" value="input:submit:disable" />
    </div>
</fieldset>

Enlace con clase .boton

Dentro de un Fieldset

Elementos de Entrada

<input type="text" placeholder="input:type:text" />
<input type="date" placeholder="input:date" />
<input type="time" placeholder="input:time" />
<input type="email" placeholder="input:email" />
<input type="number" placeholder="input:number" />
<input type="search" placeholder="input:search" />
<input type="text" placeholder="input:text" />
<input type="tel" placeholder="input:tel" />
<input type="url" placeholder="input:url" />
<input type="password" placeholder="input:password" />

Más Elementos

<label><input type="checkbox" />   Esto es una etiqueta checkbox</label>
<fieldset>
    <legend>Ejemplo de Legend</legend>
    <label><input type="radio" name="radio-input" />   Una etiqueta de input radio</label>
    <label><input type="radio" name="radio-input" />   Otra etiqueta de radio input</label>
    <label><input type="radio" name="radio-input" />   Etiqueta adicional de input radio</label>
</fieldset>

<label for="select-input">Elemento Select</label>
<select id="select-input">
    <optgroup label="Group select : optgroup">
        <option>Select : Opción</option>
        <option>Opción 1.1</option>
    </optgroup>
    <optgroup label="Group 2">
        <option>Opción 2.1</option>
        <option>Opción 2.2</option>
    </optgroup>
    <optgroup label="Group 3" disabled>
        <option>Opción 3.1</option>
        <option>Opción 3.2</option>
        <option>Opción 3.3</option>
    </optgroup>
</select>

<label for="textarea-input">Textarea + Label</label>
<textarea id="textarea-input" placeholder="textarea texto marcador de posición"></textarea>
Ejemplo de Legend

Formulario de Ejemplo

<form class="bloque" action="index.html#forms" method="post">
    <fieldset>
        <legend>Ejemplo de Legend</legend>
        <h4>Título del Formulario de Ejemplo</h4>

        <div class="columna-un-tercio">
            <label for="form-name">Tu Nombre</label>
            <input type="text" id="form-name" placeholder="Tu Nombre {marcador}" />

            <label for="form-email">Tu E-mail</label>
            <input type="email" id="form-email" placeholder="Tu E-mail {marcador}" />

            <label for="form-pass">Contraseña</label>
            <input type="password" id="form-pass" placeholder="Contraseña {marcador}" />
        </div>
        <div class="columna-un-tercio">
            <label for="form-select">Selecciona Género</label>
            <select id="form-select">
                <option>Masculino</option>
                <option>Femenino</option>
            </select>

            <label for="form-comments">Escribe tus comentarios</label>
            <textarea id="form-comments" class="full-width max-full-width" rows="8" cols="40" placeholder="Tus comentarios {marcador}"></textarea>
        </div>
        <div class="columna-un-tercio">
            <p>
                <label><input type="checkbox" />   Marca esta casilla.</label>
            </p>
            <p>
                <label><input type="radio" name="radio-input" />   Esta es una opción</label>
                <label><input type="radio" name="radio-input" />   Otra Opción</label>
                <label><input type="radio" name="radio-input" />   Opción Extra</label>
                <label><input type="radio" name="radio-input" />   Otra Opción Diferente</label>
            </p>
            <p>
                <input type="submit" name="form-submit" value="Enviar Formulario" class="ancho-completo ancho-completo-max" />
            </p>
        </div>
    </fieldset>
</form>
Ejemplo de Legend

Título del Formulario de Ejemplo

Imagen & Subtítulo

<figure>
    <img src="http://placehold.it/400x200/229def/ffffff?text=armazon.css" />
    <figcation>
        Etiqueta figcaption e imagen placeholder con subtítulo
    </figcation>
</figure>
Etiqueta figcaption e imagen placeholder con subtítulo