Guía 05: CSS - Diseño

Guía 05: CSS - Diseño#

Actividades previas#

Ambiente de desarrollo#

  1. Acceda a su proyecto curriculum en Codespaces o en su máquina local.

  2. Cree y utilice la(s) rama(s) de desarrollo.

  3. Haga clic en el ícono de Live Preview en la barra de estado de VSCode para iniciar el servidor local.

Actividades en clases#

Flex#

  1. Utilice un cliente de IAG para generar las reglas CSS en el documento stylesheets/style.css:

    1. Con el selector para la etiqueta hija <ul> dentro de la etiqueta <nav>, utilice la propiedad display con el valor flex para activar el modelo de diseño flexbox.

    2. Para el selector anterior, distribuya el espacio equitativamente entre los elementos de la lista.

    3. Para el selector anterior, establece que los elementos hijos de un contenedor flexible se organicen en una fila horizontal, de izquierda a derecha, siguiendo la dirección principal del eje horizontal.

    4. Para el selector anterior, establece que los elementos hijos de un contenedor flexible se alineen verticalmente en el centro del eje transversal, ubicándolos equidistantes respecto a los bordes superior e inferior del contenedor.

    5. Para el selector anterior, establece un espacio uniforme de 1 unidad relativa al tamaño de la fuente raíz (1rem) entre cada par de elementos hijos.

    Ver la solución
    section { ... }

nav > ul {

    /* Activa el modelo de diseño Flexbox*/
    display: flex;

    /* Distribuye los elementos con espacio igual entre ellos */
    justify-content: space-between;

    /* Organiza los elementos en una fila horizontal de izquierda a derecha */
    flex-direction: row;

    /* Centra verticalmente los elementos dentro del contenedor */
    align-items: center;

    /* Establece un espacio uniforme de 1rem entre cada elemento */
    gap: 1rem;

}

  2. Compruebe la vista previa del resultado en el navegador.

    Nota

    Revisa los conceptos básicos de flexbox en Basic concepts of flexbox y la guía de CSS flexbox en CSS Flexbox Layout Guide.

Grid#

  1. Compruebe en el archivo index.html:

    1. Todos los controles del formulario deben estar al mismo nivel, es decir, no deben estar anidados dentro de etiquetas <div> o <span>.

    Controles del formulario sin etiquetas contenedoras.#
     1<form>
 2     <label> ... </label>
 3     <input ... >
 4
 5     <label> ... </label>
 6     <select ... > ... </select>
 7
 8     <fieldset> ... <fieldset>
 9
10     <button> ... </button>
11</form>

  2. Utilice un cliente de IAG para generar las reglas CSS en el documento stylesheets/style.css:

    1. Con el selector para la etiqueta hija <form> dentro de la etiqueta <section>, utilice la propiedad display con el valor grid para activar el modelo de diseño grid.

    2. Para el selector anterior, define una estructura de una sola columna en un contenedor con diseño de cuadrícula (grid), asignándole una fracción proporcional del espacio disponible, de modo que ocupe todo el ancho del área del contenedor.

    3. Para el selector anterior, establece un espacio uniforme de 1 unidad relativa al tamaño de la fuente raíz (1rem) entre cada par de elementos hijos por fila y por columna, por separado.

    Ver la solución
    nav > ul { ... }

section > form {

    /* Activa el modelo de diseño basado en cuadrícula */
    display: grid;

    /* Define una sola columna que ocupa todo el ancho disponible del contenedor */
    grid-template-columns: 1fr;

    /* Establece un espacio vertical uniforme de 1rem entre filas */
    row-gap: 1rem;

    /* Establece un espacio horizontal uniforme de 1rem entre columnas */
    column-gap: 1rem;

}

  3. Compruebe la vista previa del resultado en el navegador.

    Nota

    Revisa los conceptos básicos de grid en Basic concepts of grid layout y la guía de CSS grid en CSS Grid Layout Guide.

Flex vs Grid#

  1. Compruebe en el archivo index.html:

    1. En la sección de referencias, organice los elementos de la siguiente manera:

      1. El subtítulo es una etiqueta <h2>.

      2. Las tres artículos son etiquetas <article>, y se encuentran al mismo nivel que el subtítulo.

    Estructura de la sección referencias.#
    1<section>
2    <h2>Referencias</h2>
3    <article> ... </article>
4    <article> ... </article>
5    <article> ... </article>
6</section>

  2. Utilice un cliente de IAG para generar las reglas CSS en el documento stylesheets/style.css:

    1. Para organizar la sección referencias para Grid y Flex, independientemente. El subtitulo ocupa todo el ancho y los tres artículos ocupen el espacio equitativamente. El espacio de separación entre filas y columnas es 1rem. No agregue otras etiquetas, ni atributos.

    Ver la solución
    section > form { ... }

#referencias {

     /* Activa el modelo Flexbox */
     display: flex;

     /* Permite que los hijos pasen a la siguiente línea si no caben */
     flex-wrap: wrap;

     /* Espaciado uniforme entre filas y columnas */
     gap: 1rem;

}

#referencias > h2 {

     /* Hace que el subtítulo ocupe el 100% del ancho del contenedor */
     flex: 0 0 100%;

}

#referencias > article {

     /* Distribuye equitativamente los artículos en tres columnas */
     flex: 1 1 calc(33.333% - 1rem);

}

    section > form { ... }

#referencias {

     /* Activa el modelo Grid */
     display: grid;

     /* Define tres columnas iguales */
     grid-template-columns: repeat(3, 1fr);

     /* Espacio entre filas y columnas */
     row-gap: 1rem;
     column-gap: 1rem;

}

#referencias > h2 {

     /* El subtítulo ocupa las tres columnas */
     grid-column: 1 / -1;

}

  3. Compruebe la vista previa del resultado en el navegador.

Versionamiento#

  1. Versione local y remotamente la(s) rama(s) de desarrollo en el repositorio curriculum.

  2. Genere la(s) solicitud(es) de cambios (pull request) para la rama principal y apruebe los cambios.

  3. Compruebe el resultado en el navegador.

Conclusiones#

Actividades autónomas#

Recursos extras#

En redes:

Flexbox vs Grid mediante juegos interactivos.
Contenido