Programación avanzada en internet

MaTi. Jonathan Soto

4ta unidad

1 - Less
2 - Composer
3 - Bootstrap

Introducción

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

Instalación

Existen diferentes formas de instalar LESS:

  1. Con Node.js utilizamos el comando: npm install less -g
  2. En caso de no contar con la opción anterior otra forma es usarlo en el navegador:
    • Cambiar nuestras hojas de estilo de .css a .less y llamarlas de la siguiente forma en el código:
      <link rel="stylesheet/less" type="text/css" href="styles.less" />
    • Descargar el archivo less.js del siguiente link: https://github.com/less/less.js/archive/master.zip y agregarlo a nuestro proyecto

Instalación

    • Añadir la siguiente etiqueta al head de nuestro proyecto:
      <script src="less.js" type="text/javascript"> </script >
  1. Compilando el archivo *

Variables

	@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

	@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

Mixin

	 		.estoEsUnMixin {
			  color: blue;
			}

			.estoEsOtroMixin() {
			  background: #223344;
			}
							 

			.miClase {
			  height: 10px;
			  .estoEsUnMixin();
			  .estoEsOtroMixin; 
			} 
							

Pueden recibir parámetros

Condiciones

// 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;
  }
}

							

Ciclos

.crear-grid(@columnas; @i: 1) when (@i =< @columnas) {
  .col-@{i} {
    width: (percentage(@i / @columnas));
  }
  
  .crear-grid(@columnas; (@i + 1));
}  


							

Introducción

¿Qué es Bootstrap?
Bootstrap es un framework front-end utilizado para desarrollar aplicaciones web y sitios mobile first.

Instalación

https://getbootstrap.com/docs/5.2/getting-started/download/

Introducción

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

Instalación

https://getcomposer.org/download/