Diseño Web - Uso de Sass en la página Uso de Grid


SASS. CSS. Pre-Procesador de Estilos. Descripción en el Capitulo 11 del Libro 1 del Instructivo Programando Paso a Paso y Más.

Los scripts de estos ejemplos se encuentran en el Capítulo 9 del Libro

Los libros están a la venta en Amazon

Mi Sitio Web de dos columnas

Selectores y propiedades CSS aplicados a web responsive

Acelera tu desarrollo web con Sass y CSS Grid. Descubre cómo utilizar un preprocesador CSS para escribir código más limpio y eficiente, y cómo crear diseños complejos utilizando la estructura de cuadrícula. Combina la potencia de un preprocesador CSS con un sistema de diseño basado en cuadrícula para crear layouts personalizados y adaptables

Los scripts de estos ejemplos se encuentran en el Capítulo 11 INTRODUCCIÓN A SASS del Libro 1 del Instructivo Programando Paso a Paso y Más

Los libros están a la venta en Amazon

En este ejemplo utilizamos flex en el contenedor .container para crear una disposición de dos columnas.
flex: 1 en main y aside asegura que ambos elementos se expandan proporcionalmente.
min-width en main y aside asegura que mantengan un ancho mínimo adecuado.
El @media query cambia el diseño a una sola columna en dispositivos con un ancho máximo de 768px.
Esta division final abarca las dos columnas y se coloca en posición vertical en pantallas pequeñas