Bootstrap 3 y el marcado semntico

Probablemente ests ya hasta las narices de Bootstrap. Artculos y artculos, herramientas que lo usan o generan cdigo compatible, y lo peor de todo... muchas webs con lo que yo llamo "pestuzo Bootstrap", que no se molestan casi ni en cambiar el estilo que trae por defecto, as que son todas igualicas. Por otra parte, tambin es posible que no lo hayas usado jams e incluso que ni sepas lo que es. Acaba de salir la primera release candidate de la versin 3 de Bootstrap, una versin que imagino que puede ser polmica (igual es por eso que la han sacado un Sbado veraniego casi de Agosto), as que aprovecho la ocasin para escribir este artculo. Empezar contando qu es Bootstrap y qu tiene de bueno, sobre todo para los que no lo conozcis an (en qu cueva os habis metido?). Incidir en cosas que no me gustaron de su planteamiento general, especialmente contar cmo se puede ir ms all y mejorar la separacin entre contenido y presentacin, haciendo nuestro cdigo ms semntico. Finalmente, aprovechar que llevo varias semanas usando Bootstrap 3 para contar qu puedes esperar de esta versin y por qu tiene algunos cambios realmente interesantes para el futuro, junto a otros frustrantes para los que ya estaban usando la versin 2.

Por qu Bootstrap?
No hay nada que haga a uno sentirse ms como un perro apaleado que programar el front de una web. Desde los primeros aos de la web, se ha maltratado sistemticamente todo lo que tena que ver con su programacin, casi siempre por motivos comerciales. Primero la guerra entre Microsoft y Netscape hizo que cada uno usara el JavaScript que le daba la gana. Luego la guerra entre Microsoft y... el resto del mundo, hizo... que en general Micro$oft interpretara cualquier posible estndar de la web como le diera la gana. Programar JavaScript y CSS significaba, bsicamente, perder das y das pegndose en dura batalla con los navegadores, fundamentalmente con todas y cada una de las versiones de IE, ya que era con diferencia el navegador ms utilizado y encima ninguna versin era igual a la anterior (ni tampoco se acoga a los estndares). Perdn, estoy hablando en pasado?. Me temo que eso an no ha acabado. Internet Explorer 8, an uno de los navegadores ms usados, sigue haciendo lo que le da la gana con muchas cosas. No he probado an lo suficiente IE9 para saber si tambin es as, aunque algo de html5code.com he odo de que avanza bastante respecto a las versiones anteriores en cuanto a su estandarizacin pero todava no acaba de cuajar. Quiz IE10?. Los estndares intentan moverse, modernizarse. No es normal que despus de tanta guerra estemos casi en el mismo punto que hace 20 aos. Se crea HTML5, s... y despus de varios aos, todava es una "candidate recommendation" y cada navegador implementa las partes que quiere. CSS3... ms o menos lo mismo, con la coa de que tiene partes aprobadas y otras que an no. El precio de todo esto es enorme. Hacer una aplicacin web es muchsimo ms costoso de lo que debera, y la web avanza mucho ms lentamente de lo que sera normal.

Como ocurre a menudo, las soluciones las ha ido proporcionando la propia comunidad. No necesitamos estndares de iure, tengamos estndares de facto. As, especialmente en el campo del JavaScript fueron surgiendo libreras que encapsulaban las diferencias entre los navegadores, fundamentalmente en el acceso a DOM: MooTools, Prototype... y sobre todo la que finalmente parece que se alz como la ganadora, jQuery. Sin embargo, la revolucin real est ocurriendo ahora mismo. En cuestin de estos ltimos meses. En estos momentos, Internet Explorer ya no es el rey, y est en un declive cada vez mayor. Y ahora estn saliendo productos que crean una capa por encima de HTML-CSS-JavaScript. Productos con una pinta estupenda, y que facilitan la programacin del front. Entre ellos, seguramente el ms popular ahora mismo sea Bootstrap.

Primera impresin
La primera impresin es muy buena. Bootstrap utiliza un curioso sistema para facilitar muchsimo el diseo de la web. Lo que predica es lo siguiente: utiliza HTML5 estndar para hacer la web, y coloca estratgicamente determinados "class" en cada elemento para conseguir:

Un sencillo pero potente sistema de layout, basado en filas y columnas. Varios componentes prediseados. Algunos de ellos, con cdigo JavaScript listo para hacer que esos componentes sean dinmicos, sin que tengas que hacer nada de primeras. As tendremos botones, pestaas, mens con varios niveles, componentes de paginacin... un gran nmero de elementos que HTML no incorpora, pero que se utilizan habitualmente como interfaz de usuario en muchas webs.

Este es un ejemplo de cdigo HTML (de Bootstrap 2). Obsrvense los distintos class que tiene: ? 1 <div class="container"> <!-- Main hero unit for a primary marketing message or call to action --> 2 <div class="hero-unit"> 3 <h1>Hello, world!</h1> 4 <p>This is a template for a simple marketing or informational website. It 5 includes a large callout called the hero unit and three supporting pieces of 6 content. Use it as a starting point to create something more unique.</p> <p><a href="#" class="btn btn-primary btn-large">Learn more </a></p> 7 </div> 8 9 <!-- Example row of columns --> 10 <div class="row"> <div class="span4"> 11 <h2>Heading</h2> 12 <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac 13 cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet 14risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p> 15 <p><a class="btn" href="#">View details </a></p> 16 </div> <div class="span4"> 17 <h2>Heading</h2> 18 <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac 19 cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet 20risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p> 21 <p><a class="btn" href="#">View details </a></p> </div> 22 <div class="span4"> 23 <h2>Heading</h2> 24 <p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget 25quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac 26cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet

27risus.</p>

<p><a class="btn" href="#">View details </a></p> </div> </div> </div> <!-- /container -->

Hacer una web con este sistema es realmente fcil, y aunque no toques apenas nada la web ya te quedar con una pinta bastante decente. La distribucin "normal" de Bootstrap trae un fichero .js y un fichero .css. Para personalizar los estilos, se supone que hay que aadir ms reglas CSS, o al menos eso es a lo que parece que te invita. Sin embargo, aunque esta es la forma de programar que propone Bootstrap, lo cierto es que no nos deberamos conformar con eso. Eso s, me gustara recalcar que es una forma muy interesante y rpida por ejemplo para crear prototipos de una web. Pero si estamos haciendo algo serio podemos exigir ms.

Personalizando con LESS

Modificar directamente el CSS tiene un problema, y es que estamos perdiendo una de las ventajas ms importantes que realmente tiene Bootstrap, y es que est hecho en LESS. De hecho, Bootstrap se puede considerar una librera de LESS unida a otra de JavaScript. LESS es un lenguaje que se construye sobre CSS, aadiendo caractersticas muy cmodas, fundamentalmente:

Anidamiento de reglas, que mejora mucho la legibilidad y te facilita el que haya un orden dentro del fichero (los ficheros CSS tienden naturalmente al caos ms absoluto) Variables: puedes meter valores comunes como colores, tamaos de padding, etc. en variables, y utilizarlas luego en otras reglas Funciones y operaciones: tambin puedes crear valores que resulten de aplicar una operacin sobre otro valor, como por ejemplo poner un color que sea un 20% ms oscuro que otro (el cual puede estar, por ejemplo, en una variable). Mixins: esto es lo ms importante que aporta LESS. Los mixins son conjuntos de reglas que puedes usar en distintos sitios. Es decir, permite crear componentes reutilizables de CSS.

La librera LESS de Bootstrap est en general bien diseada. Hay un fichero "variables.less" que tiene un montn de variables con las que se pueden controlar y personalizar muchsimos aspectos de la presentacin por defecto: colores, fuentes, espaciados de mrgenes y paddings... Otro fichero, "mixins.less" contiene un montn de mixins muy tiles de propsito general. El resto de ficheros .less estn dedicados a componentes o partes especficas: botones, tablas, barras de navegacin, etc. En ellos se encuentran los estilos por defecto para todos estos tipos de elementos, junto a opciones de presentacin de cada uno segn sus clases. Imagino que Bootstrap no incluye los ficheros LESS en la distribucin normal porque intenta facilitar al mximo el

que cualquiera pueda usarlo. Es decir, trata a los usuarios como idiotas. En mi opinin esta es un arma de doble filo, porque lo que est consiguiendo con ello es que mucha gente personalice muy poco lo que viene por defecto, consiguiendo as el efecto "pestuzo Bootstrap" que hay en tantas y tantas webs, y que comentaba al principio del artculo. Creme, trabaja directamente utilizando los ficheros .less, y creando otros less propios que redefinan las variables y pongan tus estilos. Es mucho ms cmodo y a la vez mucho ms potente (salvo que seas un idiota, claro).

Marcado semntico en Bootstrap

Hace muchos, muchos aos, en una galaxia muy, muy lejana, el layout de las pginas se defina directamente dentro del propio HTML usando tablas. Entonces surgi la creacin de layouts con CSS, la que se ha venido usando desde entonces. Lo cierto es que esta forma de crear los layouts era un coazo integral porque cada versin de Internet Explorer interpretaba (y sigue interpretando) las propiedades CSS, y especialmente las que permiten formar layouts, como le daba la gana. A pesar de esto acab triunfando, y una de las grandes ventajas que defenda el layout por CSS es que gracias a l se poda separar el contenido, la informacin que queremos mostrar, de la presentacin de ese contenido. Se trataba de hacer marcado semntico, dentro de lo posible.

de coding.smashingmagazine.com Cul es el problema de la forma de hacer layouts que propone Bootstrap?. Pues precisamente esto, que volvemos a mezclar dentro del HTML el layout de la pgina con el contenido, aunque sea en forma de .class. Pues para eso volvemos a las tablas, no?... Es prcticamente imposible que el contenido de tu pgina sea semntico puro y no piense un poco en el layout. Ah estn los div, que sobre todo sirven para agrupar cosas que imaginas que pondrs luego juntas en el layout. Pero s pienso que es bueno intentar separarlo lo mximo posible. En mi caso es fundamental esta separacin. Trabajo en un producto reutilizable, que se instala en varios clientes y que en cada uno puede cambiar la presentacin. Tengo que intentar evitar al mximo el que tenga que modificar el HTML cuando lo nico que necesite sea cambiar aspectos de presentacin. Aparte de eso, aunque tu producto no sea reutilizable, pienso que en general es una buena prctica.

Entonces?. Pasamos de Bootstrap?. No es necesario. Como ya he comentado antes, BS est basado en LESS. Y esa precisamente va a ser la solucin. Al principio descargu la ltima versin oficial de BS, la 2.3.2. Algunos de los class de Bootstrap se pueden considerar realmente semnticos: este div va a ser una barra de men, o un elemento de paginacin... Pero otros son claramente de presentacin, como por ejemplo si un botn va a ser grande o pequeo, o si una barra de botones se va a poner alineada a la izquierda o a la derecha. En seguida me di cuenta de que para la mayor parte de los casos, no era realmente necesario poner los class dentro del HTML, aprovechando las capacidades de LESS. As, por ejemplo, si quiero que los botones de un formulario sean pequeos, no necesito poner el HTML as: ? 1<form class="form-login"> 2 (...) <button type="button" class="btn btn-small">Ver cambios</button> 3 </form> 4 sino que puedo hacer esto otro: ? 1<form class="form-login"> 2 (...) <button type="button" class="btn">Ver cambios</button> 3 </form> 4 y luego en el .less: ? 1.form-login { 2 .btn { .btn-small; 3 } 4 5} Alegra, saltos, fiesta... pero espera... esto no ocurre para todos los casos. O mejor dicho, haba un caso fundamental en el que esto no funcionaba: precisamente, el sistema de grid para el layout. Escondidos entre los .less de Bootstrap encontr unos mixins que me podan ayudar: makeRow y makeColumn. Sin embargo, no funcionaban bien. No era lo mismo poner los class que usar estos mixins. Mi gozo en un pozo. Cuando estaba pensando alternativas, encontr que estaba en desarrollo una versin 3. Miro los cambios y bingo!, han cambiado enterito el sistema de grid. Ahora el sistema de grid es mobile-first, y no diferencia entre "filas fluid y no fluid", todas son fluidas. Tambin han cambiado el nombre de los class. Vuelvo a hacer la prueba y, esta vez s, compruebo que funciona. Esto es un ejemplo de un grid en Bootstrap hecho con marcado semntico: ? 1
<div class="wrapper"> <div class="content-main">...</div>

2 <div class="content-secondary">...</div> 3</div> 4 Y su LESS: ? 1 2 .wrapper { .make-row(); 3 } 4 .content-main { 5 .make-column(8); } 6 7 .content-secondary { .make-column(3); 8 .make-column-offset(1); 9 } 10 De hecho, aunque hasta hace poco no estaba y yo tuve que llegar a ello a base de hacer arqueologa en el cdigo, estos mixins y la forma de usarlos ya aparecen dentro de la propia documentacin del sistema de grid (bueno, a mi me ha servido para copiar el ejemplo...). No slo esto, sino que la librera LESS est realmente mejor diseada. No es slo el sistema de grids, en general todos los componentes estn mucho ms basados en mixins, es mucho ms fcil hacer marcado semntico ahora que en la versin 2. As que s, querido lector, te lo puedo decir: se puede hacer marcado semntico con Bootstrap.

Bootstrap 3: qu ms me voy a encontrar

Si ya eras usuario de Bootstrap 2, tengo una noticia realmente mala para ti: no es slo que tu cdigo anterior no sea compatible. Es que ha cambiado un montn, muchas veces en cosas muy pequeas. Lo primero que te vas a encontrar es que ha cambiado el aspecto por defecto. El diseo actual pretende ser ms "asptico", menos intrusivo. Los botones y otros elementos no tienen detalles como gradientes, es un diseo ms plano, ms "metro". Esto es fcil de ver, basta conque vayas a la pgina principal de Bootstrap, porque lo que se est mostrando ah ya es la versin 3. Lo segundo que te vas a encontrar es que han cambiado el nombre de un montn de clases y variables. La intencin es hacer los nombres ms homogneos, y en verdad lo han conseguido. Pero olvdate de que tu cdigo funcione con ellos, claro. Los ms obvios son los del sistema de layout, cuando antes se ponan las columnas con elementos como "span3" y las filas muchas veces con "row-fluid", ahora hay que utilizar cosas como "col-3" o "collg-3", y las filas van siempre con "row". Pero hay que decir que no se han cortado nada, han cambiado muchsimos nombres. En cuanto a los formularios, ahora los componentes ocupan por defecto el 100% del ancho disponible, y han cambiado por completo la forma de agrupar campos.

de soyouwanna.com

Los iconos tambin se han rediseado por completo, ahora se dibujan con una fuente (es decir, son glyphicons). Bueno, y han cambiado los nombres de los class, claro. Han desaparecido muchas opciones de presentacin de los distintos elementos, muchos "-inverse" por ejemplo, y muchas formas de agrupar tipos de elementos. Tambin han desaparecido elementos enteritos, como los thumbnails. A cambio, aparecen otros nuevos como los panels y los list groups.

Si adems pretendes que tu cdigo sea compatible con IE7 o Firefox 3.6, ni intentes actualizarte: BS3 ha dejado de ser compatible con ellos. Pero bueno, lo mejor es que chequees t mismo la gran lista oficial de cambios realizados para la versin 3. Habr que ver a partir de ahora qu harn todas esas webs que generan cdigo Bootstrap de forma grfica, o que venden temas ya prediseados, y que al fin y al cabo pueden considerarse una de las ventajas de usar Bootstrap: su popularidad. Se actualizarn?, no se actualizarn?, se mantendrn compatibles con las dos versiones? (posiblemente la mejor opcin). Algunas de ellas son estas:

StyleBootstrap.info: generador de temas BootSwatch: temas prediseados gratuitos WrapBootstrap: temas prediseados de pago Jetstrap: un diseador WYSIWYG Easel.io: otro diseador WYSIWYG Y muchos otros... tantos y tantos...

En definitiva, si eras usuario de Bootstrap 2, actualizar tu HTML a BS3 no ser nada sencillo. A pesar de eso, opino que los cambios en general son para mejor, la librera est mejor organizada, es mucho ms fcil hacer HTML ms semntico, los nombres son ms homogneos, y se han eliminado muchas opciones que eran quiz demasiado intrusivas. Aunque bah! la verdad es que todo eso me importa un pimiento. Como no llegu a usar nunca la versin 2, lo nico que realmente quera es que me dejara hacer marcado semntico, y ahora... se puede!.

SunTzu13 de enero de 2014, 8:00 Hola Andrs. Yo tambin ando pelendome con Bootstrap y el marcado semntico. Si bien Less soluciona muchas cosas, veo algunas ocasiones en las que no alcanza. Por ejemplo, con .btngroup. Para poder usar esto, has de usar las clases .btn-group y .btn en el html. No alcanza con heredar esas clases en Less, ya que en el framework est escrito tal que as: .btn-group .btn {...} Entonces para que funcione, has de tener esas clases en el HTML s o s.

La solucin que yo encuentro para usar estas clases sin tocar el HTML, es asignarselas desde jQuery. A ti se te ocurre algo? Responder Respuestas 1. Andrs Viedma13 de enero de 2014, 13:05 Hola, SunTzu. S, puedes probar a usar :extend, una caracterstica de LESS que est desde su versin 1.4 y que con "all" s crea una herencia completa no slo de los estilos de un elemento sino tambin de sus derivados. Yo la uso para casos de ese estilo, y hasta ahora me ha funcionado para todos los casos que he probado. Ms informacin: http://lesscss.org/#-extend

2. SunTzu13 de enero de 2014, 15:35 Es una solucin muy buena. Mejora mucho el marcado semntico. Pero al menos en mi caso, lo mejora, siguiendo con el ejemplo, al no tener que usar .btn-group. Aunque s que hay que darles la clase .btn a los elementos de dentro. Muchas gracias por la info :)