Diferencia entre revisiones de «Usuario:Juanda/bootstrap/less»

De WikiEducator
Saltar a: navegación, buscar
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 86: Línea 85:
  
 
<div class="slide">
 
<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.
 +
<source lang="bash"
 +
npm install less -g
 +
</source>
  
 
</div>
 
</div>
Línea 93: Línea 95:
 
<div class="slide">
 
<div class="slide">
 
===less y Twitter Botstrap===
 
===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:
 +
<source lang="bash">
 +
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";
 +
....
 +
 +
</source>
 
</div>
 
</div>
  
  
 
</div>
 
</div>

Revisión de 01:02 13 mar 2014


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. 
</div>
 
<div class="slide">
===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:
<source lang="bash">
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";
....


Obtenido de «https://es.wikieducator.org/index.php?title=Usuario:Juanda/bootstrap/less&oldid=14536»