|
|
| (6 revisiones intermedias por el mismo usuario no mostrado) |
| Línea 4: |
Línea 4: |
| | <div class="slide"> | | <div class="slide"> |
| | | | |
| − | = Crear un theme = | + | = less y Twitter Bootstrap = |
| | </div> | | </div> |
| | | | |
| | <div class="slide"> | | <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> |
| | | | |
| | <div class="slide"> | | <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. | + | *Código en less: |
| − | *Descargamos la última versión [www.nodejs.org desde la web de nodejs].
| + | <source lang="css"> |
| − | *Se descomprime y lo compilamos:
| + | @nice-blue: #5B83AD; |
| − | <source lang="bash"> | + | @light-blue: @nice-blue + #111; |
| − | ./configure
| + | #header { |
| − | make
| + | color: @light-blue; |
| − | sudo make install
| + | } |
| | </source> | | </source> |
| − | | + | *Se procesa y genera el siguiente css: |
| − | *Comprobamos que la instalación ha ido bien: | + | <source lang="css"> |
| − | <source lang="bash"> | + | #header { |
| − | root@juandapc:/home/juanda/Descargas# which node
| + | color: #6c94be; |
| − | /usr/local/bin/node
| + | } |
| − | root@juandapc:/home/juanda/Descargas# node --version
| + | |
| − | v0.10.26
| + | |
| | </source> | | </source> |
| − |
| |
| | </div> | | </div> |
| | | | |
| | <div class="slide"> | | <div class="slide"> |
| | | | |
| − | ===Bower=== | + | ===Mixins=== |
| − | *npm es el gestor de paquetes que utiliza nodejs. | + | *Podemos incluir un conjunto de propiedades de una regla css dentro de otras reglas: |
| − | *Bower es otro gestor de paquetes para el frontend (los llaman componentes).
| + | <source lang="css"> |
| − | *¿Por qué utilizar dos gestores de paquetes?
| + | .bordered { |
| − | - El primero se utilizará solo para paquetes javascript (se guardarán como módulos y se configurarán en el fichero package.js) | + | border-top: dotted 1px black; |
| − | - 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.
| + | border-bottom: solid 2px black; |
| | + | } |
| | + | #menu a { |
| | + | color: #111; |
| | + | .bordered; |
| | + | } |
| | | | |
| − | </div>
| + | .post a { |
| − | | + | color: red; |
| − | <div class="slide">
| + | .bordered; |
| − | ===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> | | </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> |
| | | | |
| | <div class="slide"> | | <div class="slide"> |
| − | | + | ===Reglas anidadas=== |
| − | ===ThemeStrap=== | + | *En css sería: |
| − | *Vamos a utilizar [https://github.com/divshot/themestrap ThemeStrap] para hacer nuestro theme de Bootstrap | + | <source lang="css"> |
| − | *Es muy poco intrusivo: si Bootstrap cambia, nuestro theme debería actualizarse de forma sencilla.
| + | #header { |
| − | *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.
| + | color: black; |
| − | | + | } |
| − | *Vamos a clonar una copia de Themestrap para hacer nuestro tema. Yo la voy a llamar bootstrap-theme-daw
| + | #header .navigation { |
| − | <source lang="bash"> | + | font-size: 12px; |
| − | root@juandapc:/home/juanda/bootstrap# git clone https://github.com/divshot/themestrap.git bootstrap-theme-daw
| + | } |
| − | Cloning into 'bootstrap-theme-daw'...
| + | #header .logo { |
| − | remote: Reusing existing pack: 343, done.
| + | width: 300px; |
| − | 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> | | </source> |
| | | | |
| − | *Actualizaremos el fichero bower.json: | + | *Mediante less puede quedar más fácil de lectura: |
| − | <source lang="bash"> | + | <source lang="css"> |
| − | root@juandapc:/home/juanda/bootstrap/bootstrap-theme-daw# cat bower.json
| + | #header { |
| − | { | + | color: black; |
| − | "name": "bootstrap-theme-themestrap-sample", | + | .navigation { |
| − | "version": "0.0.1", | + | font-size: 12px; |
| − | "private": true,
| + | } |
| − | "author": "Your Name",
| + | .logo { |
| − | "main": "dist/bootstrap.css",
| + | width: 300px; |
| − | "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> | | </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> |
| | | | |
| | <div class="slide"> | | <div class="slide"> |
| − | ===Instalación de módulos=== | + | ===Instalación de less=== |
| − | *Ejecutamos el comando npm install. | + | *Se instala mediante npm. Si no dispones del comando, lee la última parte del wiki (themes) para instalar npm. |
| − | *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"> | | <source lang="bash"> |
| − | root@juandapc:/home/juanda/bootstrap/bootstrap-theme-daw# cat bower.json
| + | npm install less -g |
| − | {
| + | |
| − | "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> | | </source> |
| − | *¿Se entiende la dinámica? Espero que sí :-)
| |
| | | | |
| | </div> | | </div> |
| | | | |
| | <div class="slide"> | | <div class="slide"> |
| − | | + | ===less y Twitter Botstrap=== |
| − | ===Grunt=== | + | *Debemos descargar la versión de Twitter Bootstrap que viene con less |
| − | *Ya viene configurado para ejecutar ciertas tareas | + | *En la carpeta less encontraremos un fichero .less por cada componente de css del framework. |
| − | *Ejecuta grunt para comprobarlo: | + | *El fichero bootstrap.less enlaza todos ellos: |
| | <source lang="bash"> | | <source lang="bash"> |
| − | juanda@juandapc:~/bootstrap/bootstrap-theme-daw$ grunt | + | juanda@dpto-01:~/Descargas/bootstrap-3.1.1/less$ cat bootstrap.less |
| − | Running "copy:bootstrap" (copy) task
| + | // Core variables and mixins |
| − | Copied 5 files
| + | @import "variables.less"; |
| | + | @import "mixins.less"; |
| | | | |
| − | Running "less:compile" (less) task
| + | // Reset |
| − | File dist/css/bootstrap.css created.
| + | @import "normalize.less"; |
| | + | @import "print.less"; |
| | | | |
| − | Running "recess:dist" (recess) task
| + | // Core CSS |
| − | File "dist/css/bootstrap.css" created.
| + | @import "scaffolding.less"; |
| | + | @import "type.less"; |
| | + | @import "code.less"; |
| | + | @import "grid.less"; |
| | + | @import "tables.less"; |
| | + | @import "forms.less"; |
| | + | @import "buttons.less"; |
| | | | |
| − | Running "cssmin:minify" (cssmin) task
| + | // Components |
| − | File dist/css/bootstrap.min.css created.
| + | @import "component-animations.less"; |
| − | | + | @import "glyphicons.less"; |
| − | Running "assemble:pages" (assemble) task
| + | @import "dropdowns.less"; |
| − | Assembling index.html OK
| + | @import "button-groups.less"; |
| − | 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> | | </source> |
| − | *grunt serve es un comando que nos permitirá ver nuestro proyecto en la url: http://localhost:8000. | + | *Comprobación instalación y versión de less: |
| − | *Como puedes ver, ejecuta internamente también un grunt watch (vamos, que está controlando posibles cambios para trabajar).
| + | |
| − | | + | |
| | <source lang="bash"> | | <source lang="bash"> |
| − | juanda@juandapc:~/bootstrap/bootstrap-theme-daw$ grunt serve | + | juanda@dpto-01:~/Descargas/bootstrap-3.1.1/less$ which lessc |
| − | Running "connect:serve" (connect) task
| + | /usr/local/bin/lessc |
| − | Started connect web server on localhost:8000.
| + | juanda@dpto-01:~/Descargas/bootstrap-3.1.1/less$ lessc -version |
| − | | + | lessc 1.6.3 (LESS Compiler) [JavaScript] |
| − | Running "watch" task
| + | </source> |
| − | Waiting...
| + | *Generación del fichero css: |
| − | | + | <source lang="bash"> |
| | + | juanda@dpto-01:~/Descargas/bootstrap-3.1.1/less$ lessc bootstrap.less bootstrap.css |
| | </source> | | </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> |
| | | | |
| | | | |
| | </div> | | </div> |
