Twitter Bootstrap

Twitter Bootstrap

Tutorial para desarrollar con este conocido framework de CSS

Introducción | Ficheros less  | Themes

less y Twitter Bootstrap

Conceptos generales

• Twitter Bootstrap permite trabajar con less o con sass
• Nosotros trabajaremos con less que viene "desde siempre" en Twitter Bootstrap.
• Permite manejar variables, mixins, reglas anidadas...
• Lo más práctico es mirar la parte de características del lenguaje less dentro de su web.

Variables

• Código en less:

@nice-blue: #5B83AD;
@light-blue: @nice-blue + #111;
#header {
  color: @light-blue;
}

• Se procesa y genera el siguiente css:

#header {
  color: #6c94be;
}

Mixins

• Podemos incluir un conjunto de propiedades de una regla css dentro de otras reglas:

.bordered {
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}
#menu a {
  color: #111;
  .bordered;
}
 
.post a {
  color: red;
  .bordered;
}

Reglas anidadas

• En css sería:

#header {
  color: black;
}
#header .navigation {
  font-size: 12px;
}
#header .logo {
  width: 300px;
}

• Mediante less puede quedar más fácil de lectura:

#header {
  color: black;
  .navigation {
    font-size: 12px;
  }
  .logo {
    width: 300px;
  }
}

Instalación de less

• Se instala mediante npm. Si no dispones del comando, lee la última parte del wiki (themes) para instalar npm.

npm install less -g

less y Twitter Botstrap

• Debemos descargar la versión de Twitter Bootstrap que viene con less
• En la carpeta less encontraremos un fichero .less por cada componente de css del framework.
• El fichero bootstrap.less enlaza todos ellos:

juanda@dpto-01:~/Descargas/bootstrap-3.1.1/less$ cat bootstrap.less 
// Core variables and mixins
@import "variables.less";
@import "mixins.less";
 
// Reset
@import "normalize.less";
@import "print.less";
 
// Core CSS
@import "scaffolding.less";
@import "type.less";
@import "code.less";
@import "grid.less";
@import "tables.less";
@import "forms.less";
@import "buttons.less";
 
// Components
@import "component-animations.less";
@import "glyphicons.less";
@import "dropdowns.less";
@import "button-groups.less";
....

• Comprobación instalación y versión de less:

juanda@dpto-01:~/Descargas/bootstrap-3.1.1/less$ which lessc
/usr/local/bin/lessc
juanda@dpto-01:~/Descargas/bootstrap-3.1.1/less$ lessc -version
lessc 1.6.3 (LESS Compiler) [JavaScript]

• Generación del fichero css:

juanda@dpto-01:~/Descargas/bootstrap-3.1.1/less$ lessc bootstrap.less bootstrap.css