Twitter Bootstrap

Twitter Bootstrap

Tutorial para desarrollar con este conocido framework de CSS

Introducción | Ficheros less  | Themes

Crear un theme

Requerimientos previos

• node.js
• npm (Viene con node desde la v0.6.3)
• git (prerequisito for bower)
• Bower, gestor de paquetes para web
• Grunt, gestor de tareas de javascript]
• Conocimiento básico de less

Instalación de nodejs

• La versión de nodejs que viene en la distribución de Ubuntu 12.04 es un poco antigua y de problemas.
• Descargamos la última versión [www.nodejs.org desde la web de nodejs].
• Se descomprime y lo compilamos:

./configure
./make
sudo make install

• Comprobamos que la instalación ha ido bien:

root@juandapc:/home/juanda/Descargas# which node
/usr/local/bin/node
root@juandapc:/home/juanda/Descargas# node --version
v0.10.26

Bower

• npm es el gestor de paquetes que utiliza nodejs.
• Bower es otro gestor de paquetes para el frontend (los llaman componentes).
• ¿Por qué utilizar dos gestores de paquetes?

- El primero se utilizará solo para paquetes javascript (se guardarán como módulos y se configurarán en el fichero package.js) - Bower se utiliza también para html o css. Hablamos en este caso de componentes en vez de paquetes. El fichero de configuración es bower.json.

Instalaciones mediante npm

• Mediante npm instalaremos paquetes que necesitamos
• Los instalaremos con la opción -g (globales para todo nuestro sistema Linux):

root@juandapc:/home/juanda# npm install -g bower
root@juandapc:/home/juanda# npm install -g grunt-cli
root@juandapc:/home/juanda# npm install -g bower

• En cada instalación vemos como se consulta el registro de npm para la descarga de los ficheros.
• Los ficheros se instalan en los directorios genéricos, ver trazas de ejemplo:

npm http 200 https://registry.npmjs.org/punycode
npm http GET https://registry.npmjs.org/punycode/-/punycode-1.2.4.tgz
npm http 304 https://registry.npmjs.org/delayed-stream/0.0.5
npm http 304 https://registry.npmjs.org/sntp
npm http 200 https://registry.npmjs.org/punycode/-/punycode-1.2.4.tgz
/usr/local/bin/lessc -> /usr/local/lib/node_modules/less/bin/lessc
less@1.6.3 /usr/local/lib/node_modules/less
├── mime@1.2.11
├── mkdirp@0.3.5
├── source-map@0.1.32 (amdefine@0.1.0)
├── clean-css@2.0.8 (commander@2.0.0)
└── request@2.34.0 (json-stringify-safe@5.0.0, forever-agent@0.5.2, qs@0.6.6, aw
s-sign2@0.5.0, tunnel-agent@0.3.0, oauth-sign@0.3.0, node-uuid@1.4.1, http-signa
ture@0.10.0, form-data@0.1.2, hawk@1.0.0, tough-cookie@0.12.1)

ThemeStrap

• Vamos a utilizar ThemeStrap para hacer nuestro theme de Bootstrap
• Es muy poco intrusivo: si Bootstrap cambia, nuestro theme debería actualizarse de forma sencilla.
• Themestrap nos da dos únicos ficheros para modificar: variables.less y theme.less (en el directorio less). El fichero variables.less original no se toca.

• Vamos a clonar una copia de Themestrap para hacer nuestro tema. Yo la voy a llamar bootstrap-theme-daw

root@juandapc:/home/juanda/bootstrap# git clone https://github.com/divshot/themestrap.git bootstrap-theme-daw
Cloning into 'bootstrap-theme-daw'...
remote: Reusing existing pack: 343, done.
remote: Total 343 (delta 0), reused 0 (delta 0)
Receiving objects: 100% (343/343), 196.51 KiB | 206 KiB/s, done.
Resolving deltas: 100% (153/153), done.
root@juandapc:/home/juanda/bootstrap#

• Actualizaremos el fichero bower.json:

root@juandapc:/home/juanda/bootstrap/bootstrap-theme-daw# cat bower.json 
{
  "name": "bootstrap-theme-themestrap-sample",
  "version": "0.0.1",
  "private": true,
  "author": "Your Name",
  "main": "dist/bootstrap.css",
  "themestrap": {
    "name": "Themestrap Sample",
    "repo": "https://github.com/divshot/themestrap"
  },
  "ignore": [
    "**/.*",
    "node_modules",
    "bower_components",
    "test",
    "tests"
  ],
  "dependencies": {
    "bootstrap":"3.0.0"
  }
}
root@juandapc:/home/juanda/bootstrap/bootstrap-theme-daw#

• Los campos nombre y autor son los más importantes.
• themestrap/name y themstrap/repo solo son útiles si publicamos nuestro tema en GitHub y lo compartimos con Bower (lo veremos más adelante).

Instalación de módulos

• Ejecutamos el comando npm install.
• Se instalaran todas las librerías javascript que están en el fichero package.json.

Configuración de bower

• El fichero bower.json debe quedar similar a lo siguiente:

root@juandapc:/home/juanda/bootstrap/bootstrap-theme-daw# cat bower.json 
{
  "name": "bootstrap-theme-themestrap-sample",
  "version": "0.0.1",
  "private": true,
  "author": "Your Name",
  "main": "dist/bootstrap.css",
  "themestrap": {
    "name": "Themestrap Sample",
    "repo": "https://github.com/divshot/themestrap"
  },
  "ignore": [
    "**/.*",
    "node_modules",
    "bower_components",
    "test",
    "tests"
  ],
  "dependencies": {
    "bootstrap":"3.0.0"
  }
}

• Main es el punto donde se va a instalar nuestro paquete

juanda@juandapc:~/bootstrap/bootstrap-theme-daw$ bower install

• Una vez instalado bower, tendremos un directorio bower_components con los componentes que nuestro proyecto necesita (en principio boostrap 3.0.0).
• Comprobaremos que también está jQuery. ¿Por qué? Echa un ojo al bower.json del componente Bootstrap:

{
  "name": "bootstrap",
  "version": "3.0.0",
  "main": ["./dist/js/bootstrap.js", "./dist/css/bootstrap.css"],
  "ignore": [
      "**/.*"
  ],
  "dependencies": {
    "jquery": ">= 1.9.0"
  }
}

• ¿Se entiende la dinámica? Espero que sí :-)

Grunt

• Ya viene configurado para ejecutar ciertas tareas
• Ejecuta grunt para comprobarlo:

juanda@juandapc:~/bootstrap/bootstrap-theme-daw$ grunt
Running "copy:bootstrap" (copy) task
Copied 5 files
 
Running "less:compile" (less) task
File dist/css/bootstrap.css created.
 
Running "recess:dist" (recess) task
File "dist/css/bootstrap.css" created.
 
Running "cssmin:minify" (cssmin) task
File dist/css/bootstrap.min.css created.
 
Running "assemble:pages" (assemble) task
Assembling index.html OK
Assembling examples/kitchen-sink.html OK
>> 2 pages assembled.
 
Running "clean:0" (clean) task
Cleaning tmp...OK
 
Done, without errors.
juanda@juandapc:~/bootstrap/bootstrap-theme-daw$

Ejercicio

Actualiza la versión de Boostrap a la actual para tu proyecto (3.1.1).

Diseño con Bootstrap

• Modificaremos a partir de los ficheros less existentes.
• Crearemos themes.
• También podremos optar por descargar themes existentes (muchos de pago).

Bower

• Es un gestor de paquetes de Front End.
• Depende de nodejs y de npm (node package manager).

sudo apt-get install npm