Usuario:Juanda/bootstrap/less - Historial de revisiones

Juanda: /* less y Twitter Botstrap */

2014-03-12T12:06:22Z

‎less y Twitter Botstrap

Juanda: /* Instalación de less */

2014-03-12T12:02:51Z

‎Instalación de less

Juanda en 12:02 12 mar 2014

2014-03-12T12:02:19Z

Juanda en 11:55 12 mar 2014

2014-03-12T11:55:06Z

Juanda en 10:48 12 mar 2014

2014-03-12T10:48:35Z

Juanda en 09:04 12 mar 2014

2014-03-12T09:04:24Z

Mostrar los cambios

Juanda en 08:56 12 mar 2014

2014-03-12T08:56:36Z

Juanda: Página creada con '{{Usuario:juanda/bootstrap/nav }} {{#widget:Slides}} {{MiTitulo| Twitter Bootstrap}}

= Crear un theme …'

2014-02-26T10:36:36Z

Página creada con '{{Usuario:juanda/bootstrap/nav }} {{#widget:Slides}} {{MiTitulo| Twitter Bootstrap}} <div class="slides layout-regular template-default"> <div class="slide"> = Crear un theme …'

Página nueva

{{Usuario:juanda/bootstrap/nav }}
{{#widget:Slides}} {{MiTitulo| Twitter Bootstrap}}
<div class="slides layout-regular template-default">
<div class="slide">

= Crear un theme =
</div>

<div class="slide">
=== Requerimientos previos ===
*node.js
*npm (Viene con node desde la v0.6.3)
*git (prerequisito for bower)
*[http://bower.io/ Bower], gestor de paquetes para web
*[http://gruntjs.com/ Grunt], gestor de tareas de javascript]
*Conocimiento básico de [http://lesscss.org/ less]
</div>

<div class="slide">
=== 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:
<source lang="bash">
./configure
make
sudo make install
</source>

*Comprobamos que la instalación ha ido bien:
<source lang="bash">
root@juandapc:/home/juanda/Descargas# which node
/usr/local/bin/node
root@juandapc:/home/juanda/Descargas# node --version
v0.10.26
</source>

</div>

<div class="slide">

===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.

</div>

<div class="slide">
===Instalaciones mediante npm===
*Mediante npm instalaremos paquetes que necesitamos
*Los instalaremos con la opción -g (globales para todo nuestro sistema Linux):
<source lang="bash">
root@juandapc:/home/juanda# npm install -g bower
root@juandapc:/home/juanda# npm install -g grunt-cli
root@juandapc:/home/juanda# npm install -g less
</source>

*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:
<source lang="bash">
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)
</source>
</div>

<div class="slide">

===ThemeStrap===
*Vamos a utilizar [https://github.com/divshot/themestrap 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
<source lang="bash">
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#
</source>

*Actualizaremos el fichero bower.json:
<source lang="bash">
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#

</source>

*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).
</div>

<div class="slide">
===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.
</div>

<div class="slide">
===Configuración de bower===
*El fichero bower.json debe quedar similar a lo siguiente:
<source lang="bash">
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"
}
}

</source>
*Main es el punto donde se va a instalar nuestro paquete
<source lang="bash">
juanda@juandapc:~/bootstrap/bootstrap-theme-daw$ bower install
</source>

*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:
<source lang="bash">
{
"name": "bootstrap",
"version": "3.0.0",
"main": ["./dist/js/bootstrap.js", "./dist/css/bootstrap.css"],
"ignore": [
"**/.*"
],
"dependencies": {
"jquery": ">= 1.9.0"
}
}
</source>
*¿Se entiende la dinámica? Espero que sí :-)

</div>

<div class="slide">

===Grunt===
*Ya viene configurado para ejecutar ciertas tareas
*Ejecuta grunt para comprobarlo:
<source lang="bash">
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$

</source>
*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).

<source lang="bash">
juanda@juandapc:~/bootstrap/bootstrap-theme-daw$ grunt serve
Running "connect:serve" (connect) task
Started connect web server on localhost:8000.

Running "watch" task
Waiting...

</source>

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

{{DGA tarea|
Title=Ejercicio|
Actualiza la versión de Boostrap a la actual para tu proyecto (3.1.1).
}}
</div>

</div>

@@ Línea 87: / Línea 87: @@
 ===Instalación de less===
 *Se instala mediante npm. Si no dispones del comando, lee la última parte del wiki (themes) para instalar npm.
-<source lang="bash"
+<source lang="bash">
 npm install less -g
 </source>

@@ Línea 1: / Línea 1: @@
 {{Usuario:juanda/bootstrap/nav }}
 {{#widget:Slides}} {{MiTitulo| Twitter Bootstrap}}
@@ Línea 86: / Línea 85: @@
 <div class="slide">
-===Más sobre less===
+===Instalación de less===
-*Mira en su página web.
+*Se instala mediante npm. Si no dispones del comando, lee la última parte del wiki (themes) para instalar npm.
 </div>
@@ Línea 93: / Línea 95: @@
 <div class="slide">
 ===less y Twitter Botstrap===
 </div>
 </div>

← Revisión anterior		Revisión de 11:55 12 mar 2014
Línea 1:		Línea 1:
		+
	{{Usuario:juanda/bootstrap/nav }}		{{Usuario:juanda/bootstrap/nav }}
	{{#widget:Slides}} {{MiTitulo\| Twitter Bootstrap}}		{{#widget:Slides}} {{MiTitulo\| Twitter Bootstrap}}

@@ Línea 4: / Línea 4: @@
 <div class="slide">
-= Crear un theme =
+= less y Twitter Bootstrap =
 </div>

@@ Línea 8: / Línea 8: @@
 <div class="slide">
-=== Requerimientos previos ===
+=== Conceptos generales ===
-*node.js
+*Twitter Bootstrap permite trabajar con [http://lesscss.org/ less] o con [http://sass-lang.com/ sass]
-*npm (Viene con node desde la v0.6.3)
+*Nosotros trabajaremos con less que viene "desde siempre" en Twitter Bootstrap.
-*git (prerequisito for bower)
+*Permite manejar variables, mixins, reglas anidadas...
-*[http://bower.io/ Bower], gestor de paquetes para web
+*Lo más práctico es mirar la parte de [http://lesscss.org/features/ características del lenguaje less] dentro de su web.
-*[http://gruntjs.com/ Grunt], gestor de tareas de javascript]
-*Conocimiento básico de [http://lesscss.org/ less]
 </div>
 <div class="slide">
-=== Instalación de nodejs ===
+=== Variables ===
 *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:
-<source lang="bash">
+<source lang="css">
-./configure
+@nice-blue: #5B83AD;
-make
+@light-blue: @nice-blue + #111;
-sudo make install
 </source>