MaTi. Jonathan Soto
1 - Less
2 - Composer
3 - Bootstrap
¿Qué es less?
LEES es un lenguaje de hojas de estilo dinámico, que dota a las hojas de estilo de CSS de otras capacidades, como por ejemplo el poder añadir variables.
Existen diferentes formas de instalar LESS:
@bgColor: green; @fontColor: #147; @fontFamily: Verdana, Geneva, sans-serif; @fontSizeBase: 14px; @paddingBase: 2px 5px; @1_texto: " probando"; // Lista de colores y de nombres para las clases @colores: #0275d8, #5cb85c, #5bc0de, #f0ad4e, #d9534f; @nombres: primary, success, info, warning, danger;
@import "estilos.css"; // Import clasico de CSS
@import "estilos.less"; // Se incluye "aqui" el contenido estilos.less
@import "estilos"; // Se incluye "aqui" el contenido estilos
@import "estilos.mass"; // Se incluye "aqui" el contenido estilos.mass
.estoEsUnMixin { color: blue; } .estoEsOtroMixin() { background: #223344; }
.miClase { height: 10px; .estoEsUnMixin(); .estoEsOtroMixin; }
Pueden recibir parámetros
// Se pueden hacer las condiciones sobre los parametros del mixin .miMixin(@ancho) when (@ancho >= 50px) {...} // Podemos usar las variables que este en el ambito del selector .miClase when (@color = red) {...} & when (@dia = lunes) { .c1{...} #i1{...} } .miMixin2() when not (@color = red) { width: @ancho; height: @alto; & when (@alto > @ancho) { width: @alto; height: @ancho; } }
.crear-grid(@columnas; @i: 1) when (@i =< @columnas) { .col-@{i} { width: (percentage(@i / @columnas)); } .crear-grid(@columnas; (@i + 1)); }
¿Qué es Bootstrap?
Bootstrap es un framework front-end utilizado para desarrollar aplicaciones web y sitios mobile first.
¿Qué es Composer?
Composer es un sistema de gestión de paquetes para programar en PHP el cual provee los formatos estándar necesarios para manejar dependencias y librerías de PHP.