Maquetación

COURSE

¿Qué vamos a maquetar?

¿Por dónde empezamos?

  • El diseñador debe definir una escala para las fuentes

     
  • El diseñador debe definir el tamaño de los diferentes textos en cada breakpoint.

     
  • El diseñador debe definir una escala de márgenes verticales (ritmo vertical)
$spacing: (
  tiny:   vr(0.25),
  small:  vr(0.5),
  base:   vr(1),
  medium: vr(2),
  large:  vr(3),
  huge:   vr(4)
);

16px

ratio: 1.25

xs sm md lg
tiny -2 -2 -2 -2
small -1 -1 -1 -1
normal 0 0 0 0
h2 2 2 4 4
h1 3 3 5 5

¿Por dónde empezamos?

Identificamos posibles componentes

¿Por dónde empezamos?

Configuramos de typi

$typi: (
  base: (
    null: (ms(0), $line-height-base),
  ),
  tiny: (
    null: (ms(-2), $line-height-base),
  ),
  small: (
    null: (ms(-1), $line-height-base),
  ),
  normal: (
    null: (ms(0), $line-height-base),
  ),
  h2: (
    null: (ms(2), $headings-line-height),
    md: (ms(4), $headings-line-height),
  ),
  h1: (
    null: (ms(3), $headings-line-height),
    md: (ms(5), $headings-line-height),
    xl: (ms(6), $headings-line-height),
  )
);

¿Por dónde empezamos?

una vez configurado lo básico...

  1. Comenzamos a construir los primeros componentes que estén claros en la página de componentes.
     
  2. Creamos la plantilla de la página usando:
    1. Los componentes creados
    2. El grid
    3. Los estilos de utilidad

Grid de bootstrap 4

  • Basado en flexbox
  • Breakpoints: sm (576px), md (768px), lg (992px) y xl (1200)
  • Funcionamiento del container / row / col
.container {
  padding-right: 15px;
  padding-left: 15px;
}

.row {
  margin-right: -15px;
  margin-left: -15px;
}

.col {
  padding-right: 15px;
  padding-left: 15px;
}

¡¡¡A LA CARGA!!!

Made with Slides.com