Finalizando ejercicio de página de artículos

Clase 22 de 42 • Curso de Preprocesadores CSS

Resumen

Imagen del reto:

Alejandro Luján

student•

Listo, utilice las condicionales de less :P en un mixin

@modo-oscuro: true;

.DarkMode() when (@modo-oscuro = true) {
  background-color: @color-primario;

  .intro{
    background-color: @color-secundario;
  }

  .articulo--principal {
    color: @color-claro;

    h1, h2, h3 {
      color: @color-secundario;
    }
  }

  .caja__contenido {
    background-color: @color-secundario;
    color: @color-claro;

    a{
      color: @color-claro;
    }
  }
}```

Addi Alberto Salazar Espinosa

student•

Super! :D

Maricruz Pizaña Solano

student•

Excelente, gracias.

Sergio VO

student•

Existe una herramienta en el Navegador que te permite capturar el diseño de tu pagina, sitio etc. lo puedes realizar de la siguiente manera:

<code>

El reto lo hice de la siguiente manera:

Agrege esta variable al archivo globales.less

@dark-mode: true;

Cree un mixins:

.dark() when (@dark-mode = true) {
	background-color: @color-primario;
	color: @color-claro;
  
	.intro {
	  	background-color: @color-secundario;
	}
  
	.caja {
	  span {
		color: fade(@color-claro, 80%);
	  }
	}
  
	.caja__contenido {
	  background-color: @color-secundario;
	  a {
		color: fade(@color-claro, 50%);
	  }
	}
  
	.articulo--principal {
	  h2 {
		color: @color-secundario;
	  }
	}
  }

en la seccion body, agrege el mixin

body {
	margin: 0;
	font-family: @Fuente1;
	color: @color-primario;
	.Fuente(@Fuente-base);
	.dark;  //Mixin agregado 
}

Este es el resultado:

fermin martin

student•

👏👏👏 Súper bien explicado!! Enhorabuena

Eliseo Ávila

student•

Muchas gracias por compartir tu reto

Daniel Hurtado

student•

La manera más fácil y rápida de arreglar el line-height es colocar en el body line-height: 1.1em; equivale al tamaño actual de la fuente + 10%, lo mismo pero se adapta a todos los tamaños de fuentes.

Maricruz Pizaña Solano

student•

Cool, muchísimas gracias.

Tomas Salina

student•

Existe un media en css para detectar si el usuario está en darkmode, es por eso que hice el reto así...

@media (prefers-color-scheme: dark) {
  body {
    background-color: @color-primario;
    color: @color-claro;
  }
  .intro {
    background-color: @color-secundario;
  }
  .articulo--principal h2 {
    color: @color-secundario;
  }
  .caja__contenido {
    background-color: @color-secundario;
  }
}

Armando Chindoy

student•

El navegador de samsumg todavia no soporta ese media query pero en chrome funciona muy bien.

Tomas Salina

student•

Gracias por la informacion!

Almudena Pardo Alvarez

student•

Reto listo, aunque no soy capaz de subirlo:( P.D: A nadie más le está matando que no sea responsive?

Enrique Devars

teacher•

Hola, si quieres subir imágenes solo necesitas arrastrarlas en la sección de comentarios.

Maricruz Pizaña Solano

student•

Si, siento culpa :( jajajaja

Samuel Gustavo Pérez Flores

student•

1.- Crear una variable booleana para el modo oscuro.

@dark-mode: true;

2.- Crear un mixin en el que, si modo oscuro = true, se apliquen los siguientes cambios a la página.

.Dark () when (@dark-mode = true) {
	background-color: @color-primario;
	color: @color-claro;
	.intro{
		background-color: @color-secundario;
	}
	.articulo--principal{
		h2{
			color: @color-secundario;
		}
	}
	.caja__contenido{
		background-color: @color-secundario;
		color:fade(@color-claro, 70%);
		span{
			color: fade(@color-claro, 70%);
		}
		a{
			color: fade(@color-claro, 70%);
		}
	}	
}

3.- Utilizar el mixin que se creó en el body.

body {
	margin: 0;
	font-family: @Fuente1;
	color: @color-primario;
	/* line-height: @fuente-base + 10%; */
	.Dark;
}

PD: Si se cambia el valor de la variable a false la página retomará sus parámetros originales.

Leonardo Riojas

student•

Gracias, no sabía como implementarlo.

Fernando Otzoy

student•

Creas otro archivos o pones el mixin en globales ..! aiuda ..!

Daniel Sánchez

teacher•

Imagen del reto:

Addi Alberto Salazar Espinosa

student•

Muy bien! :)

Maricruz Pizaña Solano

student•

Te quedo excelente.

Platzi Team

student•

Me tocó hacer un botón para cambiar a modo oscuro.

label.switch-button
	input.switch-button__checkbox(type="checkbox", id="dark-mode" onclick="changeMode(this)")
	.switch-button__slide Mode```

Néstor Raúl Guzmán Díaz

student•

yo también estoy intentando hacerlo con un switch, yo use una variable que la llame @darkmode y que dependiendo si esta true o false muestre el modo nocturno, ¿sabes como puedo hacer desde JS cambiar el estado de esta variable?

Addi Alberto Salazar Espinosa

student•

Super! :O

Armando Rivera

student•

Creé una nueva variable llamada @darkMode dependiendo si está en true o false cambia la pagina.

// Modo oscuro
@darkMode: false;
@background-dark: #333;

body {
	background-color:if((@darkMode), @background-dark);
}

h2 {
	color: if((@darkMode), @color-secundario);
}

.caja {
	color: if((@darkMode), @color-claro);
	&amp;__contenido {
		background-color: if((@darkMode), @color-secundario, @color-claro);
	}

	span {
		color: if((@darkMode), @color-claro, @color-secundario);
	}

	a {
		color: if((@darkMode), @color-claro);
	}
}

.articulo--principal {
	color: if((@darkMode), @color-claro);
}

Armando Chindoy

student•

Como se haria para modificar los estilos con javascript, como en el reto de hacer un boton con un evento 'click' para cambiar los estilos entre modo oscuro y normal se haria de la misma forma como en vanilla js o hay otra forma donde se utilize los preprocesadores?

Rodrigo Reyes

student•

Igual y te funciona ver el curso de responsive Design que da Leonidas. Lo acabo de terminar y en la ultima sección viene eso.

Jhon Manuel Angulo Moncada

student•

les comparto mi solución con estas variables, lógicamente deben re nombrarlas en su código para que funcione y agregar: background-color: @color-fondo;

@dark: true; 
@color-claro: if((@dark), #8841da, #FFFFFF);
@color-texto: #FFFFFF;
@color-texto-secundario: if((@dark), #8841da, #333333);
@color-primario: if((@dark), #FFFFFF, #333333);
@color-secundario: #8841da;
@color-variacion: if((@dark), #FFFFFF, #012179);
@color-fondo: if((@dark), #333333, #FFF);
@color-sombra: #333333;

Maricruz Pizaña Solano

student•

Muchas gracias. :D

Jesus Federico David Herrera

student•

Agregue un boton para que elijas el modo, de oscuro a normal

Felix Castro

student•

Para el reto del modo dark:

cree el archivo modedark.less

@import "global.less";
@import "intros.less";
@import "articulos.less";
@import "cajas.less";
@import "modedark.less";

código del archivo modedark.less el modo dark se activa siguiendo la preferencia del sistema

@media (prefers-color-scheme: dark) {
  body {
    background: @color-primario;
    color: @color-claro;
  }
  h2 {
    color: @color-secundario;
  }

  .intro {
    background: @color-secundario;
  }

  .caja {
    background: @color-secundario;
  }

  .caja span {
    color: @color-claro;
  }
}

RESULTADO:

Mario Johar Gonzalez Pedraza

student•

Reto terminado:

Addi Alberto Salazar Espinosa

student•

Perfecto! :D

Maricruz Pizaña Solano

student•

Cool :D

Rosmer Sandoval

student•

AYUDA, luego de media hora de analizar el cambio de tema, logre hacer bien el mixin en conjunto con una condicional para activar el modo oscuro, pero hay un problema... ALGUNOS DE MIS ESTILOS NO SE SOBREESCRIBEN POR EL TEMA DE HERENCIA, alguien me dice como hacerlo? lo agradeceria muchisimo

PD: me di cuenta porque fui al navegador y revise todo desde la consola.

.dark-mode() when (@modo-oscuro = true) {
	body {
		background-color: @color-primario;
	}

	.intro {
		background-color: @color-secundario;
	}

	.articulo--principal p,
	.articulo--principal h2
	{
		color: @color-claro;
	}

	.caja__contenido {
		background-color: @color-secundario;
		span {
			color: @color-primario;
		}

		h3, p, a {
			color: @color-claro;
		}
	}
}

Héctor Eduardo López Carballo

student•

Hola!

Lo más probable es que sea por especificidad, podrías compartir tu repositorio o el código para que podamos ver con más detalle lo que está pasando?

Brandon Cortes Rivera

student•

Alguien sabe por qué si pone 10% el valor que arroja es de 10 ?

Kevin Parra Lopez

student•

Como se aplicaria el responsive en less?

Luis Felipe Medina Rodriguez

student•

pregunto lo mismo

Edison Naranjo

student•

Hice el reto, aunque aun me parece avanzado entender lo del botón de modo oscuro aquí esta mi aporte, cree una nueva variable para las sombras de las cajas y un mixin para el Dark-mode.

<@color-primrario: #333333;
@color-masoscuro: #1a1818;
@color-claro: #FFFFFF;
@color-secundario:#8841da;
@color-variacion:#012179;
@fuente1:'lato', sans-serif;
@fuente2:'Oswald', sans-serif;
@fuente-base: 18px;

.sombra-caja {
    box-shadow: 0px 5px 15px 0px fade(@color-masoscuro, 75%);
}
.Oswald {
    font-family: @fuente2;
    text-transform: uppercase;
    font-weight: 700;
}

.fuente(@font-size) {
    font-size: @font-size;
    line-height: @font-size + 10%;
}

.Dark-mode {
    background-color: @color-primrario;
}

*{
    box-sizing: border-box;
}
body{
    margin: 0;
    font-family: @fuente1;
    color: @color-claro;
    .fuente(@fuente-base);
    .Dark-mode();
}

h1, h2, h3 {
    margin: 0;
    .Oswald
}>

Gonzalo Pimentel

student•

En el min 4:26 el profe agrega el mixin .fuente() a el h2 de articulos.less pero no elimina el font-size: 50px… los repite 2 veces en font-size(linea 9) y en el mixin .fuente(50px), se podría eliminar la linea 9 y no habría redundancia.

Vania Cárdenas Andrade

student•

cuando yo agrege el mixin saque el font size de la linea 9 y no hubo problemas.

Sneider Sanchez

student•

Reto completado!

@modo-oscuro: true;

.DarkMode() when (@modo-oscuro = true) {
  background-color: @color-primario;

  .intro{
    background-color: @color-secundario;
  }

  .articulo--principal {
    color: @color-claro;

    h1, h2, h3 {
      color: @color-secundario;
    }
  }

  .caja__contenido {
    background-color: @color-secundario;
    color: @color-claro;

    a{
      color: @color-claro;
    }
  }
}```

.dark() when (@dark-mode = true) {
	background-color: @color-primario;
	color: @color-claro;
  
	.intro {
	  	background-color: @color-secundario;
	}
  
	.caja {
	  span {
		color: fade(@color-claro, 80%);
	  }
	}
  
	.caja__contenido {
	  background-color: @color-secundario;
	  a {
		color: fade(@color-claro, 50%);
	  }
	}
  
	.articulo--principal {
	  h2 {
		color: @color-secundario;
	  }
	}
  }

@media (prefers-color-scheme: dark) {
  body {
    background-color: @color-primario;
    color: @color-claro;
  }
  .intro {
    background-color: @color-secundario;
  }
  .articulo--principal h2 {
    color: @color-secundario;
  }
  .caja__contenido {
    background-color: @color-secundario;
  }
}

.Dark () when (@dark-mode = true) {
	background-color: @color-primario;
	color: @color-claro;
	.intro{
		background-color: @color-secundario;
	}
	.articulo--principal{
		h2{
			color: @color-secundario;
		}
	}
	.caja__contenido{
		background-color: @color-secundario;
		color:fade(@color-claro, 70%);
		span{
			color: fade(@color-claro, 70%);
		}
		a{
			color: fade(@color-claro, 70%);
		}
	}	
}

// Modo oscuro
@darkMode: false;
@background-dark: #333;

body {
	background-color:if((@darkMode), @background-dark);
}

h2 {
	color: if((@darkMode), @color-secundario);
}

.caja {
	color: if((@darkMode), @color-claro);
	&amp;__contenido {
		background-color: if((@darkMode), @color-secundario, @color-claro);
	}

	span {
		color: if((@darkMode), @color-claro, @color-secundario);
	}

	a {
		color: if((@darkMode), @color-claro);
	}
}

.articulo--principal {
	color: if((@darkMode), @color-claro);
}

@dark: true; 
@color-claro: if((@dark), #8841da, #FFFFFF);
@color-texto: #FFFFFF;
@color-texto-secundario: if((@dark), #8841da, #333333);
@color-primario: if((@dark), #FFFFFF, #333333);
@color-secundario: #8841da;
@color-variacion: if((@dark), #FFFFFF, #012179);
@color-fondo: if((@dark), #333333, #FFF);
@color-sombra: #333333;

@media (prefers-color-scheme: dark) {
  body {
    background: @color-primario;
    color: @color-claro;
  }
  h2 {
    color: @color-secundario;
  }

  .intro {
    background: @color-secundario;
  }

  .caja {
    background: @color-secundario;
  }

  .caja span {
    color: @color-claro;
  }
}

.dark-mode() when (@modo-oscuro = true) {
	body {
		background-color: @color-primario;
	}

	.intro {
		background-color: @color-secundario;
	}

	.articulo--principal p,
	.articulo--principal h2
	{
		color: @color-claro;
	}

	.caja__contenido {
		background-color: @color-secundario;
		span {
			color: @color-primario;
		}

		h3, p, a {
			color: @color-claro;
		}
	}
}

<@color-primrario: #333333;
@color-masoscuro: #1a1818;
@color-claro: #FFFFFF;
@color-secundario:#8841da;
@color-variacion:#012179;
@fuente1:'lato', sans-serif;
@fuente2:'Oswald', sans-serif;
@fuente-base: 18px;

.sombra-caja {
    box-shadow: 0px 5px 15px 0px fade(@color-masoscuro, 75%);
}
.Oswald {
    font-family: @fuente2;
    text-transform: uppercase;
    font-weight: 700;
}

.fuente(@font-size) {
    font-size: @font-size;
    line-height: @font-size + 10%;
}

.Dark-mode {
    background-color: @color-primrario;
}

*{
    box-sizing: border-box;
}
body{
    margin: 0;
    font-family: @fuente1;
    color: @color-claro;
    .fuente(@fuente-base);
    .Dark-mode();
}

h1, h2, h3 {
    margin: 0;
    .Oswald
}> 

Finalizando ejercicio de página de artículos

Introducción

Qué aprenderás sobre preprocesadores

Conceptos básicos de CSS

Selectores de CSS

Evolución de las Tecnologías de Front-End

Introducción a los Preprocesadores

Metodologías para estructurar código

Introducción a BEM

Guías para creación y mantenimiento de código

Instalación de herramientas de compilación

Preprocesadores para HTML

Introducción a Pug

Sintaxis

Interpolación

Variables

Condicionales y Loops

Mixins

Includes y Extends

Finalizando ejercicio de Landing Page

Less

Introducción a Less

Anidamiento e imports

Variables

Funciones

Mixins