Usuario:Juanda/bootstrap/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:


 * Comprobamos que la instalación ha ido bien:

Bower
- 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.
 * 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?

Instalaciones mediante npm

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


 * 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:

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


 * Actualizaremos el fichero bower.json:


 * 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:
 * Main es el punto donde se va a instalar nuestro paquete


 * 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:
 * ¿Se entiende la dinámica? Espero que sí :-)

Grunt

 * Ya viene configurado para ejecutar ciertas tareas
 * Ejecuta grunt para comprobarlo:
 * grunt serve es un comando que nos permitirá ver nuestro proyecto en la url: http://localhost:8000.
 * Como puedes ver, ejecuta internamente también un grunt watch (vamos, que está controlando posibles cambios para trabajar).


 * Modifica algún dato de los ficheros less para ver el resultado.