Pedro Peláez | 10 marzo 2014 | Comentarios (0)
Bootstrap_general

Lo primero que debemos saber antes de comparar Frameworks CSS es qué es un Framework y qué es CSS…

Un Framework, traducido literalmente, es un “Marco de trabajo” o como lo define Wikipedia

En el desarrollo de software, un framework o infraestructura digital, es una estructura conceptual y tecnológica de soporte definido, normalmente con artefactos o módulos de software concretos, que puede servir de base para la organización y desarrollo de software. Típicamente, puede incluir soporte de programas, bibliotecas, y un lenguaje interpretado, entre otras herramientas, para así ayudar a desarrollar y unir los diferentes componentes de un proyecto.

Representa una arquitectura de software que modela las relaciones generales de las entidades del dominio, y provee una estructura y una especial metodología de trabajo, la cual extiende o utiliza las aplicaciones del dominio.

Resumiendo, es una caja de herramientas preparadas para empezar a trabajar inmediatamente en el contexto para el que fue desarrollado.

¿Y eso del CSS qué es?

Según la W3C, paladín oficial del estándar, es lo siguiente:

Hojas de Estilo en Cascada (Cascading Style Sheets), es un mecanismo simple que describe cómo se va a mostrar un documento en la pantalla, o cómo se va a imprimir, o incluso cómo va a ser pronunciada la información presente en ese documento a través de un dispositivo de lectura. Esta forma de descripción de estilos ofrece a los desarrolladores el control total sobre estilo y formato de sus documentos.

Decir que CSS no tiene sentido sin HTML y ambos llegan a su máximo de utilidad añadiendo Javascript, con estos tres ingredientes podemos hacer maravillas en los navegadores. Pero centrémonos en lo que nos atañe: Frameworks CSS.

Realmente siempre que creamos la interfaz de un sitio web usamos un Framework CSS, aunque lo hagamos definiendo todo en las hojas de estilos siempre hay cosas que damos por sentadas. Por ejemplo si ponemos el siguiente fragmento HTML:

<html><body/><html>

Nos aparece una página en blanco, bien pues esa página es blanca porque el navegador ha decidido que ese es el valor por defecto. Podríamos tener otro navegador que muestre esa página en gris claro, por ejemplo.

Podemos decir que cada navegador define su propio Framewok CSS, y esto nos sirve para aclarar el concepto que estamos tratando… sí, un Framework CSS no es más que un conjunto de valores por defecto (esto es muy matizable como se verá más adelante).

Esto viene al caso porque los Frameworks tratados tienen como objetivo unificar la presentación en todos los navegadores, ya que la colección de opciones es muy grande y crece a diario. En ordenadores tenemos Google Chrome, Firefox, Internet Explorer, Opera, Safari, etc… como son pocos además hay que tener en cuenta las diferencias entre las distintas versiones de estos, y como aún hay a quien esto le parece poca variedad habrá que añadir los navegadores específicos para móviles/tablets en sus distintas versiones y sistemas operativos como iOS, Android, Symbian, Blackberry, etc… vale son muchos ya, pero aún no hemos acabado de meter variantes, ahora aún habrá que añadir los distintos tamaños de pantalla para cada una de las combinaciones anteriores… para volverse locos.

Para empezar a comparar estos Frameworks CSS vamos a ver sus características principales en forma de tabla:

NombreVersión

Javascript

Dependencias en el servidor

YUI3.15.0

Blueprint1.0.1

No

No

Bootstrap3.1.1

No

Nombre

Controles avanzados

Preprocesador

Iconos

Web oficial
YUI

No

No

http://yuilibrary.com/
Blueprint

No

No

http://blueprintcss.org/
Bootstrap

http://getbootstrap.com/

Y como al fin y al cabo de lo que se trata es de dar formato, diseño, o llámenlo como quieran, y este es un tema muy personal presentare al aspecto del que partimos con cada uno de estos frameworks y que cada uno juzgue por sí mismo.

YUI

Este framework tiene un aspecto más técnicista, parece más cercano a “informáticos” como se puede apreciar en la siguiente captura

YUI_general

El ejemplo más básico que aparece en la web oficial no es que destaque por su diseño

YUI_ejemplo

Eso sí, el código necesario para este ejemplo es claro y de fácil comprensión. Los JavaScript al final no tiene nada que ver con el ejemplo, son códigos de recogida de estadísticas web (muy mal meterlos en los ejemplos)…

&amp;lt;!DOCTYPE HTML PUBLIC &amp;quot;-//W3C//DTD HTML 4.01//EN&amp;quot; &amp;quot;http://www.w3.org/TR/html4/strict.dtd&amp;quot;&amp;gt;&lt;br /&gt;<br />
&amp;lt;html&amp;gt;&lt;br /&gt;<br />
&amp;lt;head&amp;gt;&lt;br /&gt;<br />
    &amp;lt;meta http-equiv=&amp;quot;content-type&amp;quot; content=&amp;quot;text/html; charset=utf-8&amp;quot;&amp;gt;&lt;br /&gt;<br />
    &amp;lt;title&amp;gt;YUI 3.x: CSS Base Basic Example&amp;lt;/title&amp;gt;&lt;br /&gt;<br />
    &amp;lt;link rel=&amp;quot;stylesheet&amp;quot; href=&amp;quot;http://yui.yahooapis.com/3.14.1/build/cssreset/cssreset.css&amp;quot; type=&amp;quot;text/css&amp;quot;&amp;gt;&lt;br /&gt;<br />
    &amp;lt;link rel=&amp;quot;stylesheet&amp;quot; href=&amp;quot;http://yui.yahooapis.com/3.14.1/build/cssfonts/cssfonts.css&amp;quot; type=&amp;quot;text/css&amp;quot;&amp;gt;&lt;br /&gt;<br />
    &amp;lt;link rel=&amp;quot;stylesheet&amp;quot; href=&amp;quot;http://yui.yahooapis.com/3.14.1/build/cssbase/cssbase.css&amp;quot; type=&amp;quot;text/css&amp;quot;&amp;gt;&lt;br /&gt;<br />
    &amp;lt;script src=&amp;quot;http://yui.yahooapis.com/3.14.1/build/yui/yui-min.js&amp;quot;&amp;gt;&amp;lt;/script&amp;gt;&lt;br /&gt;<br />
&amp;lt;/head&amp;gt;&lt;br /&gt;<br />
&amp;lt;body&amp;gt;&lt;br /&gt;<br />
    &amp;lt;div id=&amp;quot;page&amp;quot;&amp;gt;&lt;br /&gt;<br />
     &amp;lt;h1&amp;gt;This is a H1 element.&amp;lt;/h1&amp;gt;&lt;br /&gt;<br />
     &amp;lt;h2&amp;gt;This is a H2 element.&amp;lt;/h2&amp;gt;&lt;br /&gt;<br />
     &amp;lt;h3&amp;gt;This is a H3 element.&amp;lt;/h3&amp;gt;&lt;br /&gt;<br />
     &amp;lt;h4&amp;gt;This is a H4 element.&amp;lt;/h4&amp;gt;&lt;br /&gt;<br />
     &amp;lt;h5&amp;gt;This is a H5 element.&amp;lt;/h5&amp;gt;&lt;br /&gt;<br />
     &amp;lt;h6&amp;gt;This is a H6 element.&amp;lt;/h6&amp;gt;&lt;/p&gt;<br />
&lt;p&gt;     &amp;lt;ul&amp;gt;&lt;br /&gt;<br />
      &amp;lt;li&amp;gt;This is a LI in a UL&amp;lt;/li&amp;gt;&lt;br /&gt;<br />
     &amp;lt;/ul&amp;gt;&lt;/p&gt;<br />
&lt;p&gt;     &amp;lt;ol&amp;gt;&lt;br /&gt;<br />
      &amp;lt;li&amp;gt;This is a LI in a UL&amp;lt;/li&amp;gt;&lt;br /&gt;<br />
     &amp;lt;/ol&amp;gt;&lt;/p&gt;<br />
&lt;p&gt;     &amp;lt;dl&amp;gt;&lt;br /&gt;<br />
      &amp;lt;dt&amp;gt;This is a DT in a DL&amp;lt;/dt&amp;gt;&lt;br /&gt;<br />
      &amp;lt;dd&amp;gt;This is a DD in a DL&amp;lt;/dd&amp;gt;&lt;br /&gt;<br />
     &amp;lt;/dl&amp;gt;&lt;/p&gt;<br />
&lt;p&gt;     &amp;lt;form&amp;gt;&lt;br /&gt;<br />
      &amp;lt;input type=&amp;quot;text&amp;quot; value=&amp;quot;This is an INPUT type TEXT in a FORM&amp;quot;/&amp;gt;&lt;/p&gt;<br />
&lt;p&gt;      &amp;lt;select&amp;gt;&lt;br /&gt;<br />
       &amp;lt;option&amp;gt;This is an OPTION in a SELECT&amp;lt;/option&amp;gt;&lt;br /&gt;<br />
       &amp;lt;option&amp;gt;This is an OPTION in a SELECT&amp;lt;/option&amp;gt;&lt;br /&gt;<br />
       &amp;lt;optgroup&amp;gt;&lt;br /&gt;<br />
        &amp;lt;option&amp;gt;This is an OPTION in a OPTGROUP in a SELECT&amp;lt;/option&amp;gt;&lt;br /&gt;<br />
        &amp;lt;option&amp;gt;This is an OPTION in a OPTGROUP in a SELECT&amp;lt;/option&amp;gt;&lt;br /&gt;<br />
       &amp;lt;/optgroup&amp;gt;&lt;br /&gt;<br />
       &amp;lt;option&amp;gt;This is an OPTION in a SELECT&amp;lt;/option&amp;gt;&lt;br /&gt;<br />
      &amp;lt;/select&amp;gt;&lt;/p&gt;<br />
&lt;p&gt;      &amp;lt;textarea name=&amp;quot;ta1&amp;quot;&amp;gt;This is text in a TEXTAREA in a FORM&amp;lt;/textarea&amp;gt;&lt;/p&gt;<br />
&lt;p&gt;      &amp;lt;fieldset&amp;gt;&lt;br /&gt;<br />
       &amp;lt;textarea name=&amp;quot;ta2&amp;quot;&amp;gt;This is text in a TEXTAREA in a FIELDSET in a FORM&amp;lt;/textarea&amp;gt;&lt;br /&gt;<br />
      &amp;lt;/fieldset&amp;gt;&lt;/p&gt;<br />
&lt;p&gt;      &amp;lt;button&amp;gt;This is a BUTTON&amp;lt;/button&amp;gt;&lt;/p&gt;<br />
&lt;p&gt;     &amp;lt;/form&amp;gt;&lt;/p&gt;<br />
&lt;p&gt;     &amp;lt;p&amp;gt;This paragraph contains a bunch of phrase elements. Up first in an &amp;lt;a href=&amp;quot;test&amp;quot;&amp;gt;[A]nchor&amp;lt;/a&amp;gt;, followed by an &amp;lt;abbr title=&amp;quot;test&amp;quot;&amp;gt;ABBR with a title value&amp;lt;/abbr&amp;gt;, followed by an &amp;lt;acronym title=&amp;quot;test&amp;quot;&amp;gt;ACRONYM with a title value&amp;lt;/acronym&amp;gt;, followed by an &amp;lt;address&amp;gt;ADDRESS&amp;lt;/address&amp;gt;, followed by a &amp;lt;cite&amp;gt;CITE&amp;lt;/cite&amp;gt; element, followed by a &amp;lt;code&amp;gt;CODE&amp;lt;/code&amp;gt; element, followed by a &amp;lt;del&amp;gt;DEL&amp;lt;/del&amp;gt; element, followed by a &amp;lt;em&amp;gt;EM&amp;lt;/em&amp;gt; element, followed by a &amp;lt;ins&amp;gt;INS&amp;lt;/ins&amp;gt; element, followed by a &amp;lt;kbd&amp;gt;KBD&amp;lt;/kbd&amp;gt; element, followed by a &amp;lt;q&amp;gt;Q&amp;lt;/q&amp;gt; element, followed by a &amp;lt;samp&amp;gt;SAMP&amp;lt;/samp&amp;gt; element, followed by a &amp;lt;span&amp;gt;SPAN&amp;lt;/span&amp;gt; element, followed by a &amp;lt;strong&amp;gt;STRONG&amp;lt;/strong&amp;gt; element, followed by a &amp;lt;tt&amp;gt;TT&amp;lt;/tt&amp;gt; element, followed by a &amp;lt;var&amp;gt;VAR&amp;lt;/var&amp;gt; element, all within a containing P.&amp;lt;/p&amp;gt;&lt;/p&gt;<br />
&lt;p&gt;     &amp;lt;blockquote&amp;gt;This is a BLOCKQUOTE element.&amp;lt;/blockquote&amp;gt;&lt;/p&gt;<br />
&lt;p&gt;     &amp;lt;table&amp;gt;&lt;br /&gt;<br />
      &amp;lt;caption&amp;gt;This is a CAPTION in a TABLE&amp;lt;/caption&amp;gt;&lt;br /&gt;<br />
      &amp;lt;thead&amp;gt;&lt;br /&gt;<br />
       &amp;lt;tr&amp;gt;&lt;br /&gt;<br />
        &amp;lt;th&amp;gt;This is a TH in a TR in a THEAD in a TABLE&amp;lt;/th&amp;gt;&lt;br /&gt;<br />
        &amp;lt;td&amp;gt;This is a TD in a TR in a THEAD in a TABLE&amp;lt;/td&amp;gt;&lt;br /&gt;<br />
       &amp;lt;/tr&amp;gt;&lt;br /&gt;<br />
      &amp;lt;/thead&amp;gt;&lt;br /&gt;<br />
      &amp;lt;tfoot&amp;gt;&lt;br /&gt;<br />
       &amp;lt;tr&amp;gt;&lt;br /&gt;<br />
        &amp;lt;th&amp;gt;This is a TH in a TR in a TFOOT in a TABLE&amp;lt;/th&amp;gt;&lt;br /&gt;<br />
        &amp;lt;td&amp;gt;This is a TD in a TR in a TFOOT in a TABLE&amp;lt;/td&amp;gt;&lt;br /&gt;<br />
       &amp;lt;/tr&amp;gt;&lt;br /&gt;<br />
      &amp;lt;/tfoot&amp;gt;&lt;br /&gt;<br />
      &amp;lt;tbody&amp;gt;&lt;br /&gt;<br />
       &amp;lt;tr&amp;gt;&lt;br /&gt;<br />
        &amp;lt;th&amp;gt;This is a TH in a TR in a TBODY in a TABLE&amp;lt;/th&amp;gt;&lt;br /&gt;<br />
        &amp;lt;td&amp;gt;This is a TD in a TR in a TBODY in a TABLE&amp;lt;/td&amp;gt;&lt;br /&gt;<br />
       &amp;lt;/tr&amp;gt;&lt;br /&gt;<br />
      &amp;lt;/tbody&amp;gt;&lt;br /&gt;<br />
     &amp;lt;/table&amp;gt;&lt;br /&gt;<br />
    &amp;lt;/div&amp;gt;&lt;/p&gt;<br />
&lt;p&gt;&amp;lt;/body&amp;gt;&lt;br /&gt;<br />
&amp;lt;/html&amp;gt;&lt;/p&gt;<br />
&lt;p&gt;    &amp;lt;script&amp;gt;&lt;br /&gt;<br />
    var _gaq = _gaq || [];&lt;br /&gt;<br />
    _gaq.push(['_setAccount', 'UA-29453705-2']);&lt;br /&gt;<br />
    _gaq.push(['_trackPageview']);&lt;br /&gt;<br />
    &amp;lt;/script&amp;gt;&lt;/p&gt;<br />
&lt;p&gt;    &amp;lt;script&amp;gt;&lt;br /&gt;<br />
    (function() {&lt;br /&gt;<br />
        var ga = document.createElement('script'); ga.async = true;&lt;br /&gt;<br />
        ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';&lt;br /&gt;<br />
        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);&lt;br /&gt;<br />
    }());&lt;/p&gt;<br />
&lt;p&gt;    (function() {&lt;br /&gt;<br />
        var ya = document.createElement('script'); ya.async = true;&lt;br /&gt;<br />
        ya.src = ('https:' == document.location.protocol ? 'https://s' : 'http://d') + '.yimg.com/mi/ywa.js';&lt;br /&gt;<br />
        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ya, s);&lt;/p&gt;<br />
&lt;p&gt;        window.onload = function () {&lt;br /&gt;<br />
            try {&lt;br /&gt;<br />
                var YWATracker = YWA.getTracker(&amp;quot;10001393677061&amp;quot;, &amp;quot;US&amp;quot;);&lt;br /&gt;<br />
                YWATracker.submit();&lt;br /&gt;<br />
            } catch (eYWATCUnavailable) {&lt;br /&gt;<br />
                if (window.console &amp;amp;&amp;amp; window.console.warn) {&lt;br /&gt;<br />
                    window.console.warn(eYWATCUnavailable.message || &amp;quot;Unknown error&amp;quot;);&lt;br /&gt;<br />
                }&lt;br /&gt;<br />
            }&lt;br /&gt;<br />
        };&lt;br /&gt;<br />
    }());&lt;br /&gt;<br />
    &amp;lt;/script&amp;gt;

Blueprint

En este caso parece estar enfocado a entornos “de prensa”, al más puro estilo periodístico. Como nos recuerda el ejemplo básico:

Blueprint_ejemplo

En cuanto al código es algo espeso debido a la cantidad de relleno de texto que contiene, pero sigue siendo muy simple y claro. No se aprecia JavaScript pero tampoco contiene elementos que lo necesiten.

&amp;lt;!DOCTYPE html PUBLIC &amp;quot;-//W3C//DTD HTML 4.01//EN&amp;quot;&lt;br /&gt;<br />
   &amp;quot;http://www.w3.org/TR/html4/strict.dtd&amp;quot;&amp;gt;&lt;/p&gt;<br />
&lt;p&gt;&amp;lt;html lang=&amp;quot;en&amp;quot;&amp;gt;&lt;br /&gt;<br />
  &amp;lt;head&amp;gt;&lt;br /&gt;<br />
    &amp;lt;meta http-equiv=&amp;quot;Content-Type&amp;quot; content=&amp;quot;text/html; charset=utf-8&amp;quot;&amp;gt;&lt;br /&gt;<br />
    &amp;lt;title&amp;gt;Blueprint Sample Page&amp;lt;/title&amp;gt;&lt;/p&gt;<br />
&lt;p&gt;    &amp;lt;!-- Framework CSS --&amp;gt;&lt;br /&gt;<br />
    &amp;lt;link rel=&amp;quot;stylesheet&amp;quot; href=&amp;quot;../../blueprint/screen.css&amp;quot; type=&amp;quot;text/css&amp;quot; media=&amp;quot;screen, projection&amp;quot;&amp;gt;&lt;br /&gt;<br />
    &amp;lt;link rel=&amp;quot;stylesheet&amp;quot; href=&amp;quot;../../blueprint/print.css&amp;quot; type=&amp;quot;text/css&amp;quot; media=&amp;quot;print&amp;quot;&amp;gt;&lt;br /&gt;<br />
    &amp;lt;!--[if lt IE 8]&amp;gt;&amp;lt;link rel=&amp;quot;stylesheet&amp;quot; href=&amp;quot;../../blueprint/ie.css&amp;quot; type=&amp;quot;text/css&amp;quot; media=&amp;quot;screen, projection&amp;quot;&amp;gt;&amp;lt;![endif]--&amp;gt;&lt;/p&gt;<br />
&lt;p&gt;    &amp;lt;!-- Import fancy-type plugin for the sample page. --&amp;gt;&lt;br /&gt;<br />
    &amp;lt;link rel=&amp;quot;stylesheet&amp;quot; href=&amp;quot;../../blueprint/plugins/fancy-type/screen.css&amp;quot; type=&amp;quot;text/css&amp;quot; media=&amp;quot;screen, projection&amp;quot;&amp;gt;&lt;br /&gt;<br />
  &amp;lt;/head&amp;gt;&lt;br /&gt;<br />
  &amp;lt;body&amp;gt;&lt;br /&gt;<br />
    &amp;lt;div class=&amp;quot;container&amp;quot;&amp;gt;&lt;br /&gt;<br />
      &amp;lt;h1&amp;gt;A simple sample page&amp;lt;/h1&amp;gt;&lt;br /&gt;<br />
      &amp;lt;hr&amp;gt;&lt;br /&gt;<br />
      &amp;lt;h2 class=&amp;quot;alt&amp;quot;&amp;gt;This sample page demonstrates a tiny fraction of what you get with Blueprint.&amp;lt;/h2&amp;gt;&lt;br /&gt;<br />
      &amp;lt;hr&amp;gt;&lt;br /&gt;<br />
      &amp;lt;div class=&amp;quot;span-7 colborder&amp;quot;&amp;gt;&lt;br /&gt;<br />
        &amp;lt;h6&amp;gt;Here's a box&amp;lt;/h6&amp;gt;&lt;br /&gt;<br />
        &amp;lt;p&amp;gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip.&amp;lt;/p&amp;gt;&lt;br /&gt;<br />
      &amp;lt;/div&amp;gt;&lt;br /&gt;<br />
      &amp;lt;div class=&amp;quot;span-8 colborder&amp;quot;&amp;gt;&lt;br /&gt;<br />
        &amp;lt;h6&amp;gt;And another box&amp;lt;/h6&amp;gt;&lt;br /&gt;<br />
        &amp;lt;p&amp;gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat laboris nisi ut aliquip.&amp;lt;/p&amp;gt;&lt;br /&gt;<br />
      &amp;lt;/div&amp;gt;&lt;br /&gt;<br />
      &amp;lt;div class=&amp;quot;span-7 last&amp;quot;&amp;gt;&lt;br /&gt;<br />
        &amp;lt;h6&amp;gt;This box is aligned with the sidebar&amp;lt;/h6&amp;gt;&lt;br /&gt;<br />
        &amp;lt;p&amp;gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip.&amp;lt;/p&amp;gt;&lt;br /&gt;<br />
      &amp;lt;/div&amp;gt;&lt;br /&gt;<br />
      &amp;lt;hr&amp;gt;&lt;br /&gt;<br />
      &amp;lt;hr class=&amp;quot;space&amp;quot;&amp;gt;&lt;br /&gt;<br />
      &amp;lt;div class=&amp;quot;span-15 prepend-1 colborder&amp;quot;&amp;gt;&lt;br /&gt;<br />
        &amp;lt;p&amp;gt;&amp;lt;img src=&amp;quot;test.jpg&amp;quot; class=&amp;quot;top pull-1 left&amp;quot; alt=&amp;quot;test&amp;quot;&amp;gt;Lorem ipsum dolor sit amet, &amp;lt;em&amp;gt;consectetuer adipiscing elit&amp;lt;/em&amp;gt;. Nunc congue ipsum vestibulum libero. Aenean vitae justo. Nam eget tellus. Etiam convallis, est eu lobortis mattis, lectus tellus tempus felis, a ultricies erat ipsum at metus.&amp;lt;/p&amp;gt;&lt;br /&gt;<br />
        &amp;lt;p&amp;gt;Lorem ipsum dolor sit amet, consectetuer adipiscing elit. &amp;lt;a href=&amp;quot;#&amp;quot;&amp;gt;Morbi et risus&amp;lt;/a&amp;gt;. Aliquam nisl. Nulla facilisi. Cras accumsan vestibulum ante. Vestibulum sed tortor. Praesent &amp;lt;span class=&amp;quot;caps&amp;quot;&amp;gt;SMALL CAPS&amp;lt;/span&amp;gt; tempus fringilla elit. Ut elit diam, sagittis in, nonummy in, gravida non, nunc. Ut orci. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Nam egestas, orci eu imperdiet malesuada, nisl purus fringilla odio, quis commodo est orci vitae justo. Aliquam placerat odio tincidunt nulla. Cras in libero. Aenean rutrum, magna non tristique posuere, erat odio eleifend nisl, non convallis est tortor blandit ligula. Nulla id augue.&amp;lt;/p&amp;gt;&lt;br /&gt;<br />
        &amp;lt;p&amp;gt;Nullam mattis, odio ut tempus facilisis, metus nisl facilisis metus, auctor consectetuer felis ligula nec mauris. Vestibulum odio erat, fermentum at, commodo vitae, ultrices et, urna. Mauris vulputate, mi pulvinar sagittis condimentum, sem nulla aliquam velit, sed imperdiet mi purus eu magna. Nulla varius metus ut eros. Aenean aliquet magna eget orci. Class aptent taciti sociosqu ad litora.&amp;lt;/p&amp;gt;&lt;br /&gt;<br />
        &amp;lt;p&amp;gt;Vivamus euismod. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse vel nibh ut turpis dictum sagittis. Aliquam vel velit a elit auctor sollicitudin. Nam vel dui vel neque lacinia pretium. Quisque nunc erat, venenatis id, volutpat ut, scelerisque sed, diam. Mauris ante. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec mattis. Morbi dignissim sollicitudin libero. Nulla lorem.&amp;lt;/p&amp;gt;&lt;br /&gt;<br />
        &amp;lt;blockquote&amp;gt;&lt;br /&gt;<br />
          &amp;lt;p&amp;gt;Integer cursus ornare mauris. Praesent nisl arcu, imperdiet eu, ornare id, scelerisque ut, nunc. Praesent sagittis erat sed velit tempus imperdiet. Ut tristique, ante in interdum hendrerit, erat enim faucibus felis, quis rutrum mauris lorem quis sem. Vestibulum ligula nisi, mattis nec, posuere et, blandit eu, ligula. Nam suscipit placerat odio. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Pellentesque tortor libero, venenatis vitae, rhoncus eu, placerat ut, mi. Nulla nulla.&amp;lt;/p&amp;gt;&lt;br /&gt;<br />
        &amp;lt;/blockquote&amp;gt;&lt;br /&gt;<br />
        &amp;lt;p&amp;gt;Maecenas vel metus quis magna pharetra fermentum. &amp;lt;em&amp;gt;Integer sit amet tortor&amp;lt;/em&amp;gt;. Maecenas porttitor, pede sed gravida auctor, nulla augue aliquet elit, at pretium urna orci ut metus. Aliquam in dolor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed aliquam, tellus id ornare posuere, quam nunc accumsan turpis, at convallis tellus orci et nisl. Phasellus congue neque a lorem.&amp;lt;/p&amp;gt;&lt;br /&gt;<br />
        &amp;lt;hr&amp;gt;&lt;br /&gt;<br />
        &amp;lt;div class=&amp;quot;span-7 colborder&amp;quot;&amp;gt;&lt;br /&gt;<br />
          &amp;lt;h6&amp;gt;This is a nested column&amp;lt;/h6&amp;gt;&lt;br /&gt;<br />
          &amp;lt;p&amp;gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.&amp;lt;/p&amp;gt;&lt;br /&gt;<br />
        &amp;lt;/div&amp;gt;&lt;br /&gt;<br />
        &amp;lt;div class=&amp;quot;span-7 last&amp;quot;&amp;gt;&lt;br /&gt;<br />
          &amp;lt;h6&amp;gt;This is another nested column&amp;lt;/h6&amp;gt;&lt;br /&gt;<br />
          &amp;lt;p&amp;gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.&amp;lt;/p&amp;gt;&lt;br /&gt;<br />
        &amp;lt;/div&amp;gt;&lt;br /&gt;<br />
      &amp;lt;/div&amp;gt;&lt;br /&gt;<br />
      &amp;lt;div class=&amp;quot;span-7 last&amp;quot;&amp;gt;&lt;br /&gt;<br />
        &amp;lt;h3&amp;gt;A &amp;lt;span class=&amp;quot;alt&amp;quot;&amp;gt;Simple&amp;lt;/span&amp;gt; Sidebar&amp;lt;/h3&amp;gt;&lt;br /&gt;<br />
        &amp;lt;p&amp;gt;Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras ornare mattis nunc. Mauris venenatis, pede sed aliquet vehicula, lectus tellus pulvinar neque, non cursus sem nisi vel augue.&amp;lt;/p&amp;gt;&lt;br /&gt;<br />
        &amp;lt;p&amp;gt;Mauris a lectus. Aliquam erat volutpat. Phasellus ultrices mi a sapien. Nunc rutrum egestas lorem. Duis ac sem sagittis elit tincidunt gravida. Mauris a lectus. Aliquam erat volutpat. Phasellus ultrices mi a sapien. Nunc rutrum egestas lorem. Duis ac sem sagittis elit tincidunt gravida.&amp;lt;/p&amp;gt;&lt;br /&gt;<br />
        &amp;lt;p class=&amp;quot;quiet&amp;quot;&amp;gt;Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras ornare mattis nunc. Mauris venenatis, pede sed aliquet vehicula, lectus tellus pulvinar neque, non cursus sem nisi vel augue.&amp;lt;/p&amp;gt;&lt;br /&gt;<br />
        &amp;lt;h5&amp;gt;Incremental leading&amp;lt;/h5&amp;gt;&lt;br /&gt;<br />
        &amp;lt;p class=&amp;quot;incr&amp;quot;&amp;gt;Vestibulum ante ipsum primis in faucibus orci luctus vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras ornare mattis nunc. Mauris venenatis, pede sed aliquet vehicula, lectus tellus pulvinar neque, non cursus sem nisi vel augue. sed aliquet vehicula, lectus tellus.&amp;lt;/p&amp;gt;&lt;br /&gt;<br />
        &amp;lt;p class=&amp;quot;incr&amp;quot;&amp;gt;Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras ornare mattis nunc. Mauris venenatis, pede sed aliquet vehicula, lectus tellus pulvinar neque, non cursus sem nisi vel augue. sed aliquet vehicula, lectus tellus pulvinar neque, non cursus sem nisi vel augue. ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras ornare mattis nunc. Mauris venenatis, pede sed aliquet vehicula, lectus tellus pulvinar neque, non cursus sem nisi vel augue. sed aliquet vehicula, lectus tellus pulvinar neque, non cursus sem nisi vel augue.&amp;lt;/p&amp;gt;&lt;br /&gt;<br />
      &amp;lt;/div&amp;gt;&lt;br /&gt;<br />
      &amp;lt;hr&amp;gt;&lt;br /&gt;<br />
      &amp;lt;h2 class=&amp;quot;alt&amp;quot;&amp;gt;You may pick and choose amongst these and many more features, so be bold.&amp;lt;/h2&amp;gt;&lt;br /&gt;<br />
      &amp;lt;hr&amp;gt;&lt;br /&gt;<br />
      &amp;lt;p&amp;gt;&lt;br /&gt;<br />
        &amp;lt;a href=&amp;quot;http://validator.w3.org/check?uri=referer&amp;quot;&amp;gt;&lt;br /&gt;<br />
          &amp;lt;img src=&amp;quot;valid.png&amp;quot; alt=&amp;quot;Valid HTML 4.01 Strict&amp;quot; height=&amp;quot;31&amp;quot; width=&amp;quot;88&amp;quot; class=&amp;quot;top&amp;quot;&amp;gt;&lt;br /&gt;<br />
        &amp;lt;/a&amp;gt;&lt;br /&gt;<br />
      &amp;lt;/p&amp;gt;&lt;br /&gt;<br />
    &amp;lt;/div&amp;gt;&lt;br /&gt;<br />
  &amp;lt;/body&amp;gt;&lt;br /&gt;<br />
&amp;lt;/html&amp;gt;

En el caso de formularios tenemos otro ejemplo con algo más de colorido, las líneas azules de fondo son la rejilla de diseño que puede hacerse visible para facilitar el trabajo. Normalmente está oculta:

Blueprint_general

Y nuevamente nada de JavaScript, lo cual puede ser un alivio para aquellos que lo controlen menos.

&amp;lt;!DOCTYPE html PUBLIC &amp;quot;-//W3C//DTD HTML 4.01//EN&amp;quot;&lt;br /&gt;<br />
&amp;quot;http://www.w3.org/TR/html4/strict.dtd&amp;quot;&amp;gt;&lt;/p&gt;<br />
&lt;p&gt;&amp;lt;html lang=&amp;quot;en&amp;quot;&amp;gt;&lt;br /&gt;<br />
  &amp;lt;head&amp;gt;&lt;br /&gt;<br />
    &amp;lt;meta http-equiv=&amp;quot;Content-Type&amp;quot; content=&amp;quot;text/html; charset=utf-8&amp;quot;&amp;gt;&lt;br /&gt;<br />
    &amp;lt;title&amp;gt;Blueprint Forms Tests&amp;lt;/title&amp;gt;&lt;/p&gt;<br />
&lt;p&gt;    &amp;lt;!-- Framework CSS --&amp;gt;&lt;br /&gt;<br />
    &amp;lt;link rel=&amp;quot;stylesheet&amp;quot; href=&amp;quot;../../blueprint/screen.css&amp;quot; type=&amp;quot;text/css&amp;quot; media=&amp;quot;screen, projection&amp;quot;&amp;gt;&lt;br /&gt;<br />
    &amp;lt;link rel=&amp;quot;stylesheet&amp;quot; href=&amp;quot;../../blueprint/print.css&amp;quot; type=&amp;quot;text/css&amp;quot; media=&amp;quot;print&amp;quot;&amp;gt;&lt;br /&gt;<br />
    &amp;lt;!--[if lt IE 8]&amp;gt;&amp;lt;link rel=&amp;quot;stylesheet&amp;quot; href=&amp;quot;../../blueprint/ie.css&amp;quot; type=&amp;quot;text/css&amp;quot; media=&amp;quot;screen, projection&amp;quot;&amp;gt;&amp;lt;![endif]--&amp;gt;&lt;br /&gt;<br />
  &amp;lt;/head&amp;gt;&lt;br /&gt;<br />
  &amp;lt;body&amp;gt;&lt;br /&gt;<br />
    &amp;lt;div class=&amp;quot;container showgrid&amp;quot;&amp;gt;&lt;br /&gt;<br />
      &amp;lt;h1&amp;gt;Forms&amp;lt;/h1&amp;gt;&lt;br /&gt;<br />
      &amp;lt;hr&amp;gt;&lt;/p&gt;<br />
&lt;p&gt;      &amp;lt;div class=&amp;quot;span-12&amp;quot;&amp;gt;&lt;/p&gt;<br />
&lt;p&gt;        &amp;lt;form id=&amp;quot;dummy&amp;quot; action=&amp;quot;&amp;quot; method=&amp;quot;post&amp;quot;&amp;gt;&lt;/p&gt;<br />
&lt;p&gt;          &amp;lt;fieldset&amp;gt;&lt;br /&gt;<br />
            &amp;lt;legend&amp;gt;Simple sample form&amp;lt;/legend&amp;gt;&lt;br /&gt;<br />
            &amp;lt;p&amp;gt;&lt;br /&gt;<br />
              &amp;lt;label for=&amp;quot;dummy0&amp;quot;&amp;gt;Text input (title)&amp;lt;/label&amp;gt;&amp;lt;br&amp;gt;&lt;br /&gt;<br />
              &amp;lt;input type=&amp;quot;text&amp;quot; class=&amp;quot;title&amp;quot; name=&amp;quot;dummy0&amp;quot; id=&amp;quot;dummy0&amp;quot; value=&amp;quot;Field with class .title&amp;quot;&amp;gt;&lt;br /&gt;<br />
            &amp;lt;/p&amp;gt;&lt;/p&gt;<br />
&lt;p&gt;            &amp;lt;p&amp;gt;&lt;br /&gt;<br />
              &amp;lt;label for=&amp;quot;dummy1&amp;quot;&amp;gt;Another field&amp;lt;/label&amp;gt;&amp;lt;br&amp;gt;&lt;br /&gt;<br />
              &amp;lt;input type=&amp;quot;text&amp;quot; class=&amp;quot;text&amp;quot; id=&amp;quot;dummy1&amp;quot; name=&amp;quot;dummy1&amp;quot; value=&amp;quot;Field with class .text&amp;quot;&amp;gt;&lt;br /&gt;<br />
            &amp;lt;/p&amp;gt;&lt;/p&gt;<br />
&lt;p&gt;            &amp;lt;p&amp;gt;&lt;br /&gt;<br />
              &amp;lt;label for=&amp;quot;dummy2&amp;quot;&amp;gt;Textarea&amp;lt;/label&amp;gt;&amp;lt;br&amp;gt;&lt;br /&gt;<br />
              &amp;lt;textarea name=&amp;quot;dummy2&amp;quot; id=&amp;quot;dummy2&amp;quot; rows=&amp;quot;5&amp;quot; cols=&amp;quot;20&amp;quot;&amp;gt;&amp;lt;/textarea&amp;gt;&lt;br /&gt;<br />
            &amp;lt;/p&amp;gt;&lt;/p&gt;<br />
&lt;p&gt;            &amp;lt;p&amp;gt;&lt;br /&gt;<br />
              &amp;lt;label for=&amp;quot;dummy3&amp;quot;&amp;gt;A password field&amp;lt;/label&amp;gt;&amp;lt;br&amp;gt;&lt;br /&gt;<br />
              &amp;lt;input type=&amp;quot;password&amp;quot; class=&amp;quot;text&amp;quot; id=&amp;quot;dummy3&amp;quot; name=&amp;quot;dummy3&amp;quot; value=&amp;quot;Password field with class .text&amp;quot;&amp;gt;&lt;br /&gt;<br />
            &amp;lt;/p&amp;gt;&lt;/p&gt;<br />
&lt;p&gt;            &amp;lt;p&amp;gt;&lt;br /&gt;<br />
              &amp;lt;input type=&amp;quot;submit&amp;quot; value=&amp;quot;Submit&amp;quot;&amp;gt;&lt;br /&gt;<br />
              &amp;lt;input type=&amp;quot;reset&amp;quot; value=&amp;quot;Reset&amp;quot;&amp;gt;&lt;br /&gt;<br />
            &amp;lt;/p&amp;gt;&lt;/p&gt;<br />
&lt;p&gt;          &amp;lt;/fieldset&amp;gt;&lt;br /&gt;<br />
        &amp;lt;/form&amp;gt;&lt;/p&gt;<br />
&lt;p&gt;      &amp;lt;/div&amp;gt;&lt;br /&gt;<br />
      &amp;lt;div class=&amp;quot;span-12 last&amp;quot;&amp;gt;&lt;/p&gt;<br />
&lt;p&gt;        &amp;lt;div class=&amp;quot;error&amp;quot;&amp;gt;&lt;br /&gt;<br />
          This is a &amp;amp;lt;div&amp;amp;gt; with the class &amp;lt;strong&amp;gt;.error&amp;lt;/strong&amp;gt;. &amp;lt;a href=&amp;quot;#&amp;quot;&amp;gt;Link&amp;lt;/a&amp;gt;.&lt;br /&gt;<br />
        &amp;lt;/div&amp;gt;&lt;br /&gt;<br />
        &amp;lt;div class=&amp;quot;notice&amp;quot;&amp;gt;&lt;br /&gt;<br />
          This is a &amp;amp;lt;div&amp;amp;gt; with the class &amp;lt;strong&amp;gt;.notice&amp;lt;/strong&amp;gt;. &amp;lt;a href=&amp;quot;#&amp;quot;&amp;gt;Link&amp;lt;/a&amp;gt;.&lt;br /&gt;<br />
        &amp;lt;/div&amp;gt;&lt;br /&gt;<br />
        &amp;lt;div class=&amp;quot;info&amp;quot;&amp;gt;&lt;br /&gt;<br />
          This is a &amp;amp;lt;div&amp;amp;gt; with the class &amp;lt;strong&amp;gt;.info&amp;lt;/strong&amp;gt;. &amp;lt;a href=&amp;quot;#&amp;quot;&amp;gt;Link&amp;lt;/a&amp;gt;.&lt;br /&gt;<br />
        &amp;lt;/div&amp;gt;&lt;br /&gt;<br />
        &amp;lt;div class=&amp;quot;success&amp;quot;&amp;gt;&lt;br /&gt;<br />
          This is a &amp;amp;lt;div&amp;amp;gt; with the class &amp;lt;strong&amp;gt;.success&amp;lt;/strong&amp;gt;. &amp;lt;a href=&amp;quot;#&amp;quot;&amp;gt;Link&amp;lt;/a&amp;gt;.&lt;br /&gt;<br />
        &amp;lt;/div&amp;gt;&lt;/p&gt;<br />
&lt;p&gt;        &amp;lt;fieldset&amp;gt;&lt;br /&gt;<br />
          &amp;lt;legend&amp;gt;Select, checkboxes, lists&amp;lt;/legend&amp;gt;&lt;/p&gt;<br />
&lt;p&gt;          &amp;lt;p&amp;gt;&lt;br /&gt;<br />
            &amp;lt;label for=&amp;quot;dummy3&amp;quot;&amp;gt;Select field&amp;lt;/label&amp;gt;&amp;lt;br&amp;gt;&lt;br /&gt;<br />
            &amp;lt;select id=&amp;quot;dummy3&amp;quot; name=&amp;quot;dummy3&amp;quot;&amp;gt;&lt;br /&gt;<br />
              &amp;lt;option value=&amp;quot;1&amp;quot;&amp;gt;Ottawa&amp;lt;/option&amp;gt;&lt;br /&gt;<br />
              &amp;lt;option value=&amp;quot;2&amp;quot;&amp;gt;Calgary&amp;lt;/option&amp;gt;&lt;br /&gt;<br />
              &amp;lt;option value=&amp;quot;3&amp;quot;&amp;gt;Moosejaw&amp;lt;/option&amp;gt;&lt;br /&gt;<br />
            &amp;lt;/select&amp;gt;&lt;br /&gt;<br />
          &amp;lt;/p&amp;gt;&lt;/p&gt;<br />
&lt;p&gt;          &amp;lt;p&amp;gt;&lt;br /&gt;<br />
            &amp;lt;label for=&amp;quot;dummy4&amp;quot;&amp;gt;Select with groups&amp;lt;/label&amp;gt;&amp;lt;br&amp;gt;&lt;br /&gt;<br />
            &amp;lt;select id=&amp;quot;dummy4&amp;quot; name=&amp;quot;dummy4&amp;quot;&amp;gt;&lt;br /&gt;<br />
              &amp;lt;option&amp;gt;Favorite pet&amp;lt;/option&amp;gt;&lt;br /&gt;<br />
              &amp;lt;optgroup label=&amp;quot;mammals&amp;quot;&amp;gt;&lt;br /&gt;<br />
                &amp;lt;option&amp;gt;dog&amp;lt;/option&amp;gt;&lt;br /&gt;<br />
                &amp;lt;option&amp;gt;cat&amp;lt;/option&amp;gt;&lt;br /&gt;<br />
                &amp;lt;option&amp;gt;rabbit&amp;lt;/option&amp;gt;&lt;br /&gt;<br />
                &amp;lt;option&amp;gt;horse&amp;lt;/option&amp;gt;&lt;br /&gt;<br />
              &amp;lt;/optgroup&amp;gt;&lt;br /&gt;<br />
              &amp;lt;optgroup label=&amp;quot;reptiles&amp;quot;&amp;gt;&lt;br /&gt;<br />
                &amp;lt;option&amp;gt;iguana&amp;lt;/option&amp;gt;&lt;br /&gt;<br />
                &amp;lt;option&amp;gt;snake&amp;lt;/option&amp;gt;&lt;br /&gt;<br />
              &amp;lt;/optgroup&amp;gt;&lt;br /&gt;<br />
            &amp;lt;/select&amp;gt;&lt;br /&gt;<br />
          &amp;lt;/p&amp;gt;&lt;/p&gt;<br />
&lt;p&gt;          &amp;lt;p&amp;gt;&amp;lt;label&amp;gt;Radio buttons&amp;lt;/label&amp;gt;&amp;lt;br&amp;gt;&lt;br /&gt;<br />
            &amp;lt;input type=&amp;quot;radio&amp;quot; name=&amp;quot;example&amp;quot;&amp;gt; Radio one&amp;lt;br&amp;gt;&lt;br /&gt;<br />
            &amp;lt;input type=&amp;quot;radio&amp;quot; name=&amp;quot;example&amp;quot;&amp;gt; Radio two&amp;lt;br&amp;gt;&lt;br /&gt;<br />
            &amp;lt;input type=&amp;quot;radio&amp;quot; name=&amp;quot;example&amp;quot;&amp;gt; Radio three&amp;lt;br&amp;gt;&lt;br /&gt;<br />
          &amp;lt;/p&amp;gt;&lt;/p&gt;<br />
&lt;p&gt;          &amp;lt;p&amp;gt;&amp;lt;label&amp;gt;Checkboxes&amp;lt;/label&amp;gt;&amp;lt;br&amp;gt;&lt;br /&gt;<br />
            &amp;lt;input type=&amp;quot;checkbox&amp;quot;&amp;gt; Check one&amp;lt;br&amp;gt;&lt;br /&gt;<br />
            &amp;lt;input type=&amp;quot;checkbox&amp;quot;&amp;gt; Check two&amp;lt;br&amp;gt;&lt;br /&gt;<br />
            &amp;lt;input type=&amp;quot;checkbox&amp;quot;&amp;gt; Check three&amp;lt;br&amp;gt;&lt;br /&gt;<br />
          &amp;lt;/p&amp;gt;&lt;/p&gt;<br />
&lt;p&gt;        &amp;lt;/fieldset&amp;gt;&lt;/p&gt;<br />
&lt;p&gt;      &amp;lt;/div&amp;gt;&lt;/p&gt;<br />
&lt;p&gt;      &amp;lt;div class=&amp;quot;span-24 last&amp;quot;&amp;gt;&lt;/p&gt;<br />
&lt;p&gt;        &amp;lt;fieldset&amp;gt;&lt;br /&gt;<br />
          &amp;lt;legend&amp;gt;Alignment&amp;lt;/legend&amp;gt;&lt;/p&gt;<br />
&lt;p&gt;          &amp;lt;p&amp;gt;&lt;br /&gt;<br />
            &amp;lt;label for=&amp;quot;dummy5&amp;quot;&amp;gt;Select field&amp;lt;/label&amp;gt;&lt;br /&gt;<br />
            &amp;lt;select id=&amp;quot;dummy5&amp;quot; name=&amp;quot;dummy5&amp;quot;&amp;gt;&lt;br /&gt;<br />
              &amp;lt;option value=&amp;quot;1&amp;quot;&amp;gt;Ottawa&amp;lt;/option&amp;gt;&lt;br /&gt;<br />
              &amp;lt;option value=&amp;quot;2&amp;quot;&amp;gt;Calgary&amp;lt;/option&amp;gt;&lt;br /&gt;<br />
              &amp;lt;option value=&amp;quot;3&amp;quot;&amp;gt;Moosejaw&amp;lt;/option&amp;gt;&lt;br /&gt;<br />
            &amp;lt;/select&amp;gt;&lt;br /&gt;<br />
          &amp;lt;/p&amp;gt;&lt;/p&gt;<br />
&lt;p&gt;          &amp;lt;p&amp;gt;&lt;br /&gt;<br />
            &amp;lt;label for=&amp;quot;dummy6&amp;quot;&amp;gt;Text input (title)&amp;lt;/label&amp;gt;&lt;br /&gt;<br />
            &amp;lt;input type=&amp;quot;text&amp;quot; class=&amp;quot;title&amp;quot; name=&amp;quot;dummy6&amp;quot; id=&amp;quot;dummy6&amp;quot; value=&amp;quot;Field with class .title&amp;quot;&amp;gt;&lt;br /&gt;<br />
          &amp;lt;/p&amp;gt;&lt;/p&gt;<br />
&lt;p&gt;          &amp;lt;p&amp;gt;&lt;br /&gt;<br />
            &amp;lt;label for=&amp;quot;dummy7&amp;quot;&amp;gt;Select field&amp;lt;/label&amp;gt;&lt;br /&gt;<br />
            &amp;lt;select id=&amp;quot;dummy7&amp;quot; name=&amp;quot;dummy7&amp;quot;&amp;gt;&lt;br /&gt;<br />
              &amp;lt;option value=&amp;quot;1&amp;quot;&amp;gt;Ottawa&amp;lt;/option&amp;gt;&lt;br /&gt;<br />
              &amp;lt;option value=&amp;quot;2&amp;quot;&amp;gt;Calgary&amp;lt;/option&amp;gt;&lt;br /&gt;<br />
              &amp;lt;option value=&amp;quot;3&amp;quot;&amp;gt;Moosejaw&amp;lt;/option&amp;gt;&lt;br /&gt;<br />
            &amp;lt;/select&amp;gt;&lt;br /&gt;<br />
            &amp;lt;label for=&amp;quot;dummy8&amp;quot;&amp;gt;Another field&amp;lt;/label&amp;gt;&lt;br /&gt;<br />
            &amp;lt;input type=&amp;quot;text&amp;quot; class=&amp;quot;text&amp;quot; id=&amp;quot;dummy8&amp;quot; name=&amp;quot;dummy8&amp;quot; value=&amp;quot;Field with class .text&amp;quot;&amp;gt;&lt;br /&gt;<br />
          &amp;lt;/p&amp;gt;&lt;/p&gt;<br />
&lt;p&gt;        &amp;lt;/fieldset&amp;gt;&lt;/p&gt;<br />
&lt;p&gt;      &amp;lt;/div&amp;gt;&lt;/p&gt;<br />
&lt;p&gt;      &amp;lt;div class=&amp;quot;span-24 last&amp;quot;&amp;gt;&lt;br /&gt;<br />
        &amp;lt;form action=&amp;quot;&amp;quot; method=&amp;quot;post&amp;quot; class=&amp;quot;inline&amp;quot;&amp;gt;&lt;br /&gt;<br />
          &amp;lt;fieldset&amp;gt;&lt;br /&gt;<br />
            &amp;lt;legend&amp;gt;A form with class &amp;quot;inline&amp;quot;&amp;lt;/legend&amp;gt;&lt;br /&gt;<br />
            &amp;lt;div class=&amp;quot;span-3&amp;quot;&amp;gt;&lt;br /&gt;<br />
              &amp;lt;label for=&amp;quot;a&amp;quot;&amp;gt;Label A:&amp;lt;/label&amp;gt;&lt;br /&gt;<br />
              &amp;lt;select id=&amp;quot;a&amp;quot; name=&amp;quot;a&amp;quot; &amp;gt;&lt;br /&gt;<br />
                &amp;lt;option value=&amp;quot;0&amp;quot;&amp;gt;All&amp;lt;/option&amp;gt;&lt;br /&gt;<br />
              &amp;lt;/select&amp;gt;&lt;br /&gt;<br />
            &amp;lt;/div&amp;gt;&lt;br /&gt;<br />
            &amp;lt;div class=&amp;quot;span-2&amp;quot;&amp;gt;&lt;br /&gt;<br />
              some text&lt;br /&gt;<br />
            &amp;lt;/div&amp;gt;&lt;br /&gt;<br />
            &amp;lt;div class=&amp;quot;span-3&amp;quot;&amp;gt;&lt;br /&gt;<br />
              &amp;lt;input type=&amp;quot;checkbox&amp;quot; id=&amp;quot;o&amp;quot; name=&amp;quot;o&amp;quot; value=&amp;quot;true&amp;quot; checked=&amp;quot;checked&amp;quot; class=&amp;quot;checkbox&amp;quot;&amp;gt;checkbox one&lt;br /&gt;<br />
            &amp;lt;/div&amp;gt;&lt;br /&gt;<br />
            &amp;lt;div class=&amp;quot;span-3&amp;quot;&amp;gt;&lt;br /&gt;<br />
              &amp;lt;label for=&amp;quot;b&amp;quot;&amp;gt;Label B:&amp;lt;/label&amp;gt;&lt;br /&gt;<br />
              &amp;lt;select id=&amp;quot;b&amp;quot; name=&amp;quot;b&amp;quot; &amp;gt;&lt;br /&gt;<br />
                &amp;lt;option value=&amp;quot;0&amp;quot;&amp;gt;All&amp;lt;/option&amp;gt;&lt;br /&gt;<br />
              &amp;lt;/select&amp;gt;&lt;br /&gt;<br />
            &amp;lt;/div&amp;gt;&lt;br /&gt;<br />
            &amp;lt;div class=&amp;quot;span-2&amp;quot;&amp;gt;&lt;br /&gt;<br />
              &amp;lt;a href=&amp;quot;&amp;quot;&amp;gt;A Hyperlink&amp;lt;/a&amp;gt;&lt;br /&gt;<br />
            &amp;lt;/div&amp;gt;&lt;br /&gt;<br />
            &amp;lt;div class=&amp;quot;span-8&amp;quot;&amp;gt;&lt;br /&gt;<br />
              &amp;lt;input type=&amp;quot;text&amp;quot; class=&amp;quot;text&amp;quot; id=&amp;quot;q&amp;quot; name=&amp;quot;q&amp;quot; value=&amp;quot;Field with class .text&amp;quot;&amp;gt;&lt;br /&gt;<br />
            &amp;lt;/div&amp;gt;&lt;br /&gt;<br />
            &amp;lt;div class=&amp;quot;span-2 last&amp;quot;&amp;gt;&lt;br /&gt;<br />
              &amp;lt;input type=&amp;quot;submit&amp;quot; value=&amp;quot;submit&amp;quot; class=&amp;quot;button&amp;quot;&amp;gt;&lt;br /&gt;<br />
            &amp;lt;/div&amp;gt;&lt;br /&gt;<br />
          &amp;lt;/fieldset&amp;gt;&lt;/p&gt;<br />
&lt;p&gt;        &amp;lt;/form&amp;gt;&lt;/p&gt;<br />
&lt;p&gt;      &amp;lt;/div&amp;gt;&lt;/p&gt;<br />
&lt;p&gt;      &amp;lt;hr&amp;gt;&lt;/p&gt;<br />
&lt;p&gt;      &amp;lt;p&amp;gt;&lt;br /&gt;<br />
        &amp;lt;a href=&amp;quot;http://validator.w3.org/check?uri=referer&amp;quot;&amp;gt;&lt;br /&gt;<br />
        &amp;lt;img src=&amp;quot;valid.png&amp;quot; alt=&amp;quot;Valid HTML 4.01 Strict&amp;quot; height=&amp;quot;31&amp;quot; width=&amp;quot;88&amp;quot; class=&amp;quot;top&amp;quot;&amp;gt;&amp;lt;/a&amp;gt;&lt;br /&gt;<br />
      &amp;lt;/p&amp;gt;&lt;/p&gt;<br />
&lt;p&gt;    &amp;lt;/div&amp;gt;&lt;br /&gt;<br />
  &amp;lt;/body&amp;gt;&lt;br /&gt;<br />
&amp;lt;/html&amp;gt;

Bootstrap

A mi entender es el más llamativo visualmente y muy cómodo a la hora de leer el contenido desplegado con él, cosa que agradecerán nuestros visitantes.

Bootstrap_general

El ejemplo más básico es eso mismo, muy básico y limpio como se aprecia en la imagen

Bootstrap_ejemplo

Y como debería

ser en todos los ejemplos el código es especialmente claro y conciso pese a incorporar las librerías Javascript del framework.

&amp;lt;!DOCTYPE html&amp;gt;&lt;br /&gt;<br />
&amp;lt;html lang=&amp;quot;en&amp;quot;&amp;gt;&lt;br /&gt;<br />
  &amp;lt;head&amp;gt;&lt;br /&gt;<br />
    &amp;lt;meta charset=&amp;quot;utf-8&amp;quot;&amp;gt;&lt;br /&gt;<br />
    &amp;lt;meta http-equiv=&amp;quot;X-UA-Compatible&amp;quot; content=&amp;quot;IE=edge&amp;quot;&amp;gt;&lt;br /&gt;<br />
    &amp;lt;meta name=&amp;quot;viewport&amp;quot; content=&amp;quot;width=device-width, initial-scale=1&amp;quot;&amp;gt;&lt;br /&gt;<br />
    &amp;lt;meta name=&amp;quot;description&amp;quot; content=&amp;quot;&amp;quot;&amp;gt;&lt;br /&gt;<br />
    &amp;lt;meta name=&amp;quot;author&amp;quot; content=&amp;quot;&amp;quot;&amp;gt;&lt;br /&gt;<br />
    &amp;lt;link rel=&amp;quot;shortcut icon&amp;quot; href=&amp;quot;../../assets/ico/favicon.ico&amp;quot;&amp;gt;&lt;/p&gt;<br />
&lt;p&gt;    &amp;lt;title&amp;gt;Starter Template for Bootstrap&amp;lt;/title&amp;gt;&lt;/p&gt;<br />
&lt;p&gt;    &amp;lt;!-- Bootstrap core CSS --&amp;gt;&lt;br /&gt;<br />
    &amp;lt;link href=&amp;quot;../../dist/css/bootstrap.min.css&amp;quot; rel=&amp;quot;stylesheet&amp;quot;&amp;gt;&lt;/p&gt;<br />
&lt;p&gt;    &amp;lt;!-- Custom styles for this template --&amp;gt;&lt;br /&gt;<br />
    &amp;lt;link href=&amp;quot;starter-template.css&amp;quot; rel=&amp;quot;stylesheet&amp;quot;&amp;gt;&lt;/p&gt;<br />
&lt;p&gt;    &amp;lt;!-- Just for debugging purposes. Don't actually copy this line! --&amp;gt;&lt;br /&gt;<br />
    &amp;lt;!--[if lt IE 9]&amp;gt;&amp;lt;script src=&amp;quot;../../assets/js/ie8-responsive-file-warning.js&amp;quot;&amp;gt;&amp;lt;/script&amp;gt;&amp;lt;![endif]--&amp;gt;&lt;/p&gt;<br />
&lt;p&gt;    &amp;lt;!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries --&amp;gt;&lt;br /&gt;<br />
    &amp;lt;!--[if lt IE 9]&amp;gt;&lt;br /&gt;<br />
      &amp;lt;script src=&amp;quot;https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js&amp;quot;&amp;gt;&amp;lt;/script&amp;gt;&lt;br /&gt;<br />
      &amp;lt;script src=&amp;quot;https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js&amp;quot;&amp;gt;&amp;lt;/script&amp;gt;&lt;br /&gt;<br />
    &amp;lt;![endif]--&amp;gt;&lt;br /&gt;<br />
  &amp;lt;/head&amp;gt;&lt;/p&gt;<br />
&lt;p&gt;  &amp;lt;body&amp;gt;&lt;/p&gt;<br />
&lt;p&gt;    &amp;lt;div class=&amp;quot;navbar navbar-inverse navbar-fixed-top&amp;quot; role=&amp;quot;navigation&amp;quot;&amp;gt;&lt;br /&gt;<br />
      &amp;lt;div class=&amp;quot;container&amp;quot;&amp;gt;&lt;br /&gt;<br />
        &amp;lt;div class=&amp;quot;navbar-header&amp;quot;&amp;gt;&lt;br /&gt;<br />
          &amp;lt;button type=&amp;quot;button&amp;quot; class=&amp;quot;navbar-toggle&amp;quot; data-toggle=&amp;quot;collapse&amp;quot; data-target=&amp;quot;.navbar-collapse&amp;quot;&amp;gt;&lt;br /&gt;<br />
            &amp;lt;span class=&amp;quot;sr-only&amp;quot;&amp;gt;Toggle navigation&amp;lt;/span&amp;gt;&lt;br /&gt;<br />
            &amp;lt;span class=&amp;quot;icon-bar&amp;quot;&amp;gt;&amp;lt;/span&amp;gt;&lt;br /&gt;<br />
            &amp;lt;span class=&amp;quot;icon-bar&amp;quot;&amp;gt;&amp;lt;/span&amp;gt;&lt;br /&gt;<br />
            &amp;lt;span class=&amp;quot;icon-bar&amp;quot;&amp;gt;&amp;lt;/span&amp;gt;&lt;br /&gt;<br />
          &amp;lt;/button&amp;gt;&lt;br /&gt;<br />
          &amp;lt;a class=&amp;quot;navbar-brand&amp;quot; href=&amp;quot;#&amp;quot;&amp;gt;Project name&amp;lt;/a&amp;gt;&lt;br /&gt;<br />
        &amp;lt;/div&amp;gt;&lt;br /&gt;<br />
        &amp;lt;div class=&amp;quot;collapse navbar-collapse&amp;quot;&amp;gt;&lt;br /&gt;<br />
          &amp;lt;ul class=&amp;quot;nav navbar-nav&amp;quot;&amp;gt;&lt;br /&gt;<br />
            &amp;lt;li class=&amp;quot;active&amp;quot;&amp;gt;&amp;lt;a href=&amp;quot;#&amp;quot;&amp;gt;Home&amp;lt;/a&amp;gt;&amp;lt;/li&amp;gt;&lt;br /&gt;<br />
            &amp;lt;li&amp;gt;&amp;lt;a href=&amp;quot;#about&amp;quot;&amp;gt;About&amp;lt;/a&amp;gt;&amp;lt;/li&amp;gt;&lt;br /&gt;<br />
            &amp;lt;li&amp;gt;&amp;lt;a href=&amp;quot;#contact&amp;quot;&amp;gt;Contact&amp;lt;/a&amp;gt;&amp;lt;/li&amp;gt;&lt;br /&gt;<br />
          &amp;lt;/ul&amp;gt;&lt;br /&gt;<br />
        &amp;lt;/div&amp;gt;&amp;lt;!--/.nav-collapse --&amp;gt;&lt;br /&gt;<br />
      &amp;lt;/div&amp;gt;&lt;br /&gt;<br />
    &amp;lt;/div&amp;gt;&lt;/p&gt;<br />
&lt;p&gt;    &amp;lt;div class=&amp;quot;container&amp;quot;&amp;gt;&lt;/p&gt;<br />
&lt;p&gt;      &amp;lt;div class=&amp;quot;starter-template&amp;quot;&amp;gt;&lt;br /&gt;<br />
        &amp;lt;h1&amp;gt;Bootstrap starter template&amp;lt;/h1&amp;gt;&lt;br /&gt;<br />
        &amp;lt;p class=&amp;quot;lead&amp;quot;&amp;gt;Use this document as a way to quickly start any new project.&amp;lt;br&amp;gt; All you get is this text and a mostly barebones HTML document.&amp;lt;/p&amp;gt;&lt;br /&gt;<br />
      &amp;lt;/div&amp;gt;&lt;/p&gt;<br />
&lt;p&gt;    &amp;lt;/div&amp;gt;&amp;lt;!-- /.container --&amp;gt;&lt;/p&gt;<br />
&lt;p&gt;    &amp;lt;!-- Bootstrap core JavaScript&lt;br /&gt;<br />
    ================================================== --&amp;gt;&lt;br /&gt;<br />
    &amp;lt;!-- Placed at the end of the document so the pages load faster --&amp;gt;&lt;br /&gt;<br />
    &amp;lt;script src=&amp;quot;https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js&amp;quot;&amp;gt;&amp;lt;/script&amp;gt;&lt;br /&gt;<br />
    &amp;lt;script src=&amp;quot;../../dist/js/bootstrap.min.js&amp;quot;&amp;gt;&amp;lt;/script&amp;gt;&lt;br /&gt;<br />
  &amp;lt;/body&amp;gt;&lt;br /&gt;<br />
&amp;lt;/html&amp;gt;

En este artículo he pretendido dar una idea de lo importante en cualquiera de estas herramientas, y reflejar una primera impresión sobre ellas.

He trabajado mucho Blueprint y bastante de Bootstrap y me he quedado impresionado de la baja curva de aprendizaje de este último, algo muy a tener en cuenta a la hora de elegir. De hecho no he usado YUI porque cuando he podido decidir lo he considerado pesado y cuando han decidido otros ni lo han nombrado, por algo será.

En cualquier caso, que cada cual decida y luego…
que haga un comentario en esta web jeje

Saludos…

Etiquetas []

Comments are closed.

Uso de cookies

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies, pinche el enlace para mayor información.plugin cookies

ACEPTAR