Bootstrap es un popular framework de desarrollo frontend, también podemos clasificarlo como un framework CSS con algunos valiosos elementos adicionales, que definen patrones de código HTML (snippet) que van más allá del CSS. Podemos usar estos Snippet HMTL para incluir controles en la interfaz web, por ejemplo: Barras de navegación, Botones, Elementos de Navegación, entre otros.
El código fuente de Bootstrap está programado en LESS y Javascript, LESS es un lenguaje de preproceso de CSS, facilitando muchísimo la creación de hojas de estilo.
Pero... ¿Cual es la forma de usar Twitter Boostrap?, eso lo veremos en este artículo.
Usando Bootstrap
Twitter Bootstrap, facilita el maquetado de páginas web HTML5 y está conformado por varios archivos, y a la hora de usarlo Bootstrap en el HTML sólo debemos hacer las llamadas sólo a tres (3) archivos para su funcionamiento:
- bootstrap.css: Una hoja de estilo (CSS3), con los recursos css del framework.
- bootstrap.js: Un archivo Javascript que le da vida a los distintos widget o patrones de código HTML que define Bootstrap, como se ha mencionado en la introducción del artículo.
- jquery.js : Esta es la librería base que requiere el archivo bootstrap.js, para lograr los comportamientos interactivos que estarán disponibles a la hora de diseñar una página web usando este framework.
Adicionamente, si deseamos tener la opción de crear un diseño web Responsive Design en Bootstrap, entonces incluiremos el archivo bootstrap-responsive.css.
La estructura del HTML de una página web genérica usando Twitter Bootstrap será similar a:
<!DOCTYPE html>
<html lang="es">
<head>
...
<link rel="stylesheet" href="assets/css/bootstrap.css"
media="screen" />
...
<head>
<body>
...
<script src="assets/js/jquery.js"></script>
<script src="assets/js/bootstrap.js"></script>
...
</body>
</html>
Al igual que otros framework CSS, Bootstrap también dispone de una grilla de 12 unidades (es configurable), muy simple de usar. Por ejemplo, si debemos configurar dos contenedores, uno de 4 unidades y otro de 8 undidades, simplemente escribimos en el HTML:
<div class="row">
<div class="span4">
...
</div>
<div class="span8">
...
</div>
</div>
Cómo personalizar Bootstrap
Bootstrap es un proyecto en constante desarrollo, debido a esta característica, se recomienda hacer la personalización mediante una sobreescritura del CSS3, definiendo esa personalización en una nueva hoja de estilos.
Por ejemplo, para nuestra propia personalización se crea una nueva hoja de estilos llamada 'mi-estilo.css'. Así, sólo se debe alterar la zona del 'head' del HTML de la página web, incluyendo la nueva hoja de estilos CSS:
<head>
...
<link rel="stylesheet" href="assets/css/bootstrap.css"/>
<link rel="stylesheet" href="mi-estilo.css"/>
Como actualizar a nuevas versiones de Boostrap
Del modo presentado anteriormente, si deseamos hacer una actualización a una nueva versión de Boostrap, sólo bastará con cargar los nuevos archivos del framework, sin alterar una sóla línea de código del HTML de las páginas web de nuestro proyecto, que usan este framework.
Optimizar Boostrap
Los archivos base de estilo de Bootstrap, están escritos usando el lenguaje LESS, situación que hace muy simple la modificación del CSS. Todos los archivos base de estilo del frameworks finalmente se reducen a un sólo archivo, el 'bootstrap.css', pues este es contruido de una compilación del archivo 'bootstrap.less' en donde participan los archivos LESS base del framework.
Si lo abrimos en un editor de textos observaremos la siguiente estructura:
bootstrap.less:
@import "variables.less";
@import "mixins.less";
...
@import "navbar.less";
@import "breadcrumbs.less";
...
@import "utilities.less";
La modificación de Bootstrap es en extremo simple. Por ejemplo, si no usaremos los estilos de las 'barras de navegación' y tampoco los estilos de 'breadcrumbs', entonces sólo debemos comentar las líneas en el archivo 'bootstrap.less'. Es decir, el código LESS del archivo bootstrap quedaría del siguiente:
@import "variables.less";
@import "mixins.less";
...
//@import "navbar.less";
//@import "breadcrumbs.less";
...
@import "utilities.less";
En consecuencia, es muy fácil de personalizar el código CSS generado por Bootstrap.
En Windows disponemos de la opción de usar SimpLESS, para compilar el archivo 'bootstrap.less' y generar el archivos base 'bootstrap.css' que usaremos en las páginas web.
También existe la forma alternativa de crear la personalización desde la propia página de Bootstrap: http://getbootstrap.com/2.3.2/customize.html.Las optimizaciones del tamaño (minimización) del archivo CSS de bootstrap, están disponibles tanto el la página de Bootstrap como en el programa SimpLESS.
¿Que se entiende por personalización de Bootstrap?
Debe entenderse la palabra personalización en este contexto, como la forma de incluir o no incluir ciertas porciones del framework, no una cuestión de estilos estéticos propiamente tal.
Aunque al efectuar la personalización del framework desde la propia página de Bootstrap, es posible modificar algunos aspectos estéticos. En general, no es recomendable esta práctica, porque requerirá esa misma personalización en sucesivos updates. Una responsabilidad que en Bootstrap la podemos delegar de otra manera, como veremos más adelante en la conclusión de este artículo.
Si deseamos descargar todo el proyecto Bootstrap y disponer de las fuentes LESS entonces la página web es: https://github.com/twbs/bootstrap/tree/master
Conclusión
Aunque Bootstrap nos recomienda seguir unas simples reglas para hacer fácilmente actualizable nuestras páginas web a nuevas versiones del framework, esto aún presenta el inconveniente de llamar a dos archivos CSS desde el HTML, es decir:
<link rel="stylesheet" href="assets/css/bootstrap.css"/>
<!--Personalización de Bootstrap-->
<link rel="stylesheet" href="mi-estilo.css"/>
Lo cual puede ser un factor económicamente no despreciable en proyectos web de alto tráfico. En consecuencia, buscaremos una opción de hacerlo con un sólo archivo CSS.
Personalización interna de Bootstrap
Una alternativa es, crear nuestra personalización CSS en la propia compilación LESS. Para tal efecto, debemos simplemente cambiar la extensión de la hoja de estilo 'mi-estilo.css' a 'mi-estilo.less', e incluir en la carpeta fuente de Bootstrap, que se encuentra en el directorio LESS. Luego, modificar el archivo 'bootstrap.less' incluyendo en su última línea, una llamada a nuestro archivo de personalización, por ejemplo:
@import "variables.less";
...
...
@import "utilities.less";
@import "mi-estilo.less"; //incluye la personalización
Es de notar, que la sobreescritura de estilos en la compilación de LESS es más eficiente, a la sobreescritura tradicional del estilo CSS.
Así, después de compilarlo sólo necesitamos llamar a un sólo archivo de estilo en el HTML:
<link rel="stylesheet" href="assets/css/bootstrap.css"/>
¿Cual es la mejor forma de personalizar Bootstrap?
En este artículo hemos mostrado varias maneras de hacerlo, la decisión final dependerá de hacer un balance entre la facilidad del procedimiento vs la optimización del rendimiento del proyecto.
Sólo cabe agregar, que si bien es cierto algunos navegadores soportan la inclusión directa de código LESS, no es en lo absoluto recomendable, sobre todo considerando las limitaciones de hardware que tienen los smarphones.
En la página de LESS, se incluye el intérprete en Javascript, su uso es sólo recomendable para depuración.
Esperamos haber presentado con claridad la forma de usar Twitter Bootstrap en un proyecto web, y hacerlo facilmente mantenible en el tiempo.
