Skip to content

T3. CSS (parte 2)

Herramientas: Emmet

Emmet es un plugin diseñado para editores de texto que ayuda en gran manera tu flujo de trabajo y te ahorra tiempo.

Flex

Introducción por ManzDev

Guía a seguir

Herramientas:

Juegos

Contenedor

Ver guía

Dirección

Ver guía

Mover elementos

Ver guía

Alineación

Ver guía

Tamaño

Ver guía

Validación CSS

Más CSS

Variables

Ver mdn

Unidades

Relativas a viewport

Capas @layer

Nos permite redefinir y ordenar la aplicación de las reglas:

/* Orden de aplicación:
   1. reset
   2. base
   3. tema
   Si no se define el orden, entonces se aplica de arriba a abajo.
*/
@layer reset, base, tema;

@layer base {
  body { background: pink; }
}

@layer tema {
  body { background: lightblue; }
}

@layer reset {
  body { background: white; }
}

¿Qué ocurre si añadimos @layer { body { background: red; } } al final del documento? ¿Y en medio? ¿Y después de la línea 1? ¿Y antes?

Medios

Ver mdn

@import

[!IMPORTANT] Los @import deben aparecer al principio del documento, si no, serán ignorados.

@import 'custom.css';
@import "common.css" screen;
@import url("fineprint.css") print;
@import url('landscape.css') screen and (orientation:landscape);
@import url("./700.css") only screen and (max-width: 700px);
@import (responsive.css) screen and (min-width: 320px) and (max-width: 480px);

Y combinado con @layer:

@import "theme.css" layer(utilities);
@import "otro.css" layer(); /* capa anónima */

Fuente: mdn

clamp()

width: clamp(min, prefer, max);
font-size: clamp(min, prefer, max);

Animaciones

Ver manz.dev

Prefijos

Ver mdn

Posicionamiento

Con los módulos CSS actuales Flex y Grid, el posicionamiento de elementos ha quedado superado por lo que NO lo utilizaremos en este curso.

Pese a ello, puede ser de interés para el alumnado la lectura del siguiete enlace.

Grid Layout

  1. Las propiedades del contenedor y de los elementos

  2. El salto a GRID

  3. Grid Template Areas

  4. Centrando el contenido [Flex-vs-Grid]
  5. Aligning and justifying Grid Items y Aligning and Justifying the Grid
  6. Autofill y autofit
  7. Las ayudas: Playground y Grid generator

¿Por donde empiezo? Introducción por ManzDev

Juegos

Ejercicio global

CSS + FLEX

Entrega en moodle (consultar fecha) de la práctica maquetado en CSS con el módulo FLEX.

La práctica debe incluir:

  • Head + Main + Footer
  • En el Main al menos 3 bloques: publicidad + sección 1 + sección 2
  • Las secciones 1 y 2 deberán aparecer artículos de la sección (4 o 5 mínimo)

CSS + GRID

Entrega en moodle (consultar fecha) de la práctica maquetado en CSS con el módulo GRID.

Podéis y debéis anidar FLEX y GRID.

Rúbrica

Concepto Bien Regular Mal
CSS Base Correcto y bonito (2p) Errores^(1)^ menores y/o simple (1p) 3 o mas errores (0p)
Flex 2 o más contenedores se recolocan correctamente (3p) 1 contenedor … (1p) Ninguno … (0p)
Grid Bien con dimensiones fr^(2)^ (3p) Bien con otras dimensiones (1p) Alguno mal (0p)
Cambio a 800 px Correcto de flex sólo a grid+flex (1p) - Sin cambio (0p)
Limpieza (de atributos) Codigo organizado (1p) - Dificil de seguir (0p)

^(1)^ Se considera error el uso de atributos innecesarios.

^(2)^ Al menos 1 de las columnas o filas debe ser de tipo fracción. No es necesario que todas lo sean.

Notas al pie:

[^1]: “lorem ipsum” es el texto que se usa habitualmente en diseño gráfico en demostraciones de tipografías o de borradores de diseño para probar el diseño visual antes de insertar el texto final. Podemos utilizar el generador cuando lo necesitemos.