Descubre qué ha cambiado en nuestro medio

1

Todo sobre el diseño de páginas web acaba de cambiar

Conceptos que forman parte del diseño en CSS

2

La importancia de recordar las herramientas existentes

3

Flujo normal del documento: display block, inline e inline-block

4

Contextos de formato: Formato de Contexto de Bloque (BFC)

5

Posicionamiento + Dinámica: ¿Cómo se vería?

¿Flexbox o CSS Grid?

6

Diferencias entre Flexbox y CSS Grid

7

Similitudes entre Flexbox y CSS Grid

8

¿Puedo trabajar con Flexbox y CSS Grid al tiempo?

9

Dinámica: ¿Qué usarías? (Parte 1)

10

Dinámica: ¿Qué usarías? (Parte 2) + Reto

11

¿Cuándo usar Flexbox y cuándo usar CSS Grid?

Modern Layouts con CSS Grid

12

¿Qué son los Modern CSS Layouts?

13

Patrones para usar como punto de partida

14

Layouts: Super Centered, The Deconstructed Pancake, Sidebar Says, Pancake Stack, Classic Holy Grail Layout

15

Layouts: 12-Span Grid, RAM (Repeat, Auto, MinMax), Line Up, Clamping My Style, Respect for Aspect

Diseño web para desarrolladores

16

Dinámica: No puedo dejar de ver

17

Design System y detalles visuales a tener en cuenta

18

Tendencias de diseño UI/UX: Fase de inspiración y creatividad

19

Wireframes y comunicación visual simple, intuitiva y atractiva

20

Figma para devs: Auto Layout y Neumorphism (Parte 1)

21

Figma para devs: Auto Layout y Neumorphism (Parte 2)

Del diseño al código

22

Primeros pasos y estructura inicial

23

Ubicación y creación de elementos

El futuro de CSS Grid

24

Entendiendo las versiones de CSS: ¿existirá CSS4?

25

CSS Subgrid

26

Native CSS Masonry Layout

27

CSS feature queries: @supports

28

Nosotros y el futuro de la web: tips para seguir aprendiendo y mantenerse al día

Flujo normal del documento: display block, inline e inline-block

3/28
Recursos

Aportes 25

Preguntas 3

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.

Que buen dato el que Estefany dió en el minuto 03:02. Básicamente:

display: inline-flex;

En este caso, flex es el comportamiento interno del contenedor, mientras que inline es el comportamiento externo del contenedor ante todo el HTML. Lo mismo pasa con inline-grid y también con grid y flex (que en realidad son block-grid y block-flex).
.
Primer valor: Comportamiento externo de un contenedor.
Segundo valor: Comportamiento interno de un contendor.

📄 Flujo normal del documento: Display block, inline e inline-block

<h4>Ideas/conceptos claves</h4>

Display ⇒ Verbo: desplegar, colocar a la vista, exhibir, lucir, mostrar, presentar

flujo normal del documento ⇒ como se comportan los elementos HTML por defecto

<h4>Apuntes</h4>
  • Display ⇒ Definir el tipo de visualización de un elemento
  • Cuando usamos display: flex; o display: grid; Nos centramos más en los valores y no en la propiedad por si sola
<h4>Block and Inline elements</h4>
  • Block ⇒ Se extienden ocupando todo el espacio disponible para ellos
  • Inline
    • Son como palabras en una oración, una después de otra
    • Se separan por medio de un espacio en blanco entre ellos

El comportamiento de los elementos en bloque y en línea es fundamental para CSS y el hecho de que un documento HTML marcado correctamente será legible por defecto. Este diseño se conoce como “Diseño de bloque y en línea” o “Flujo normal” porque esta es la forma en que los elementos se presentan si no les hacemos nada más.

<h4>Inner y Outer</h4>
  • Block e Inline definen:
    • Valor externo de visualización
    • Valor interno de visualización
  • Lo que significa es que cuando usamos display: grid; estamos diciendo display: block-grid;
  • Un elemento que tenga los atributos de bloque puede establecer:
    • Ancho
    • Alto
    • Padding
    • Margin
    • Estirarse en todo el espacio
  • Pero los hijos de un contenedor display: grid; se les ha dado un valor interno de grid
  • Esta forma de pensar es util porque cuando usamos display: inline-flex;
    • Pensaremos que el primer valor es el comportamiento externo y el segundo valor es el interno del contenedor
  • Siempre volveremos al flujo normal del documento
    • Si trabajamos de esta forma obtendremos:
      • Flujo más agradable y legible
      • CSS mucho más fácil
      • Menos probable de tener problemas de accesibilidad (ya que está trabajando con el orden de los documentos que es exactamente lo que está haciendo un lector de pantalla o una persona que revisa el documento)

RESUMEN: El flujo normal del documento sera la forma en que se mostraran los elementos si no modificamos nada, se basan en block e inline ambas propiedades se usan a lo largo del desarrollo como cuando usamos display: grid; o display: inline-grid; estarás marcando de alguna forma si el comportamiento externo es de bloque o en línea además que en la segunda propiedad indicas que comportamiento interno tendrá.

Aquí hay algunos conceptos fundamentales de entender que aprendimos en el Curso de CSS Grid Layout 👀.
.
Aquí se empieza a trabajar de una forma diferente con las propiedades CSS, ya no los llamamos “vertical”, “horizontal”, “derecha”, “izquierda”. sino que, ahora teniendo en cuenta los diferentes modos de escritura, empezamos a pensar de una forma diferente, ahora tenemos elementos tipo inline o block y tenemos start y end.
.

  1. Elementos inline: Son los elementos que comúnmente conocemos como horizontales, aunque realmente este concepto puede cambiar si cambiamos el modo de escritura
  2. Elementos block: Son los elementos que comúnmente conocemos como verticales, aunque realmente este concepto puede cambiar si cambiamos el modo de escritura

.
Esto es muy importante tenerlo en cuenta al momento de hablar de Flexbox y CSS Grid porque es la nueva forma de como tenemos que empezar a ver a CSS 👀.

De manera predeterminada, el contenido de un elemento de nivel de bloque es el 100% del ancho de su elemento padre y su altura viene determinada por su contenido. Los elementos en línea tienen su altura y anchura determinados por su contenido. No puedes establecer el ancho o la altura de los elementos en línea, simplemente se ubican dentro del contenido de los elementos de nivel de bloque. Si deseas controlar el tamaño de un elemento en línea de esta manera, debes configurarlo para que se comporte como un elemento de nivel de bloque con display: block; (o incluso, display: inline-block;, que combina características de ambos).
.
EJEMPLO
.

<h1>Flujo de los documentos básicos</h1>

<p>Soy un elemento básico de nivel de bloque. Mis elementos de nivel de bloque adyacentes se encuentran en líneas nuevas debajo de mí.</p>

<p>Cubrimos por defecto el 100% del ancho de nuestro elemento principal, y somos tan altos como nuestro contenido secundario. Nuestro ancho y alto total es nuestro contenido + área de relleno + ancho/alto del borde.</p>

<p>Estamos separados por nuestros márgenes. Debido al colapso del margen, estamos separados por el ancho de uno de nuestros márgenes, no por ambos.</p>

<p>Los elementos en línea <span>como este</span> y <span>este otro</span> se ubican en la misma y la de los nodos de texto adyacentes, mientras hay espacio en la misma línea. Si un elemento en línea desborda, <span>sigue por la línea siguiente, si es posible (como la que contiene este texto)</span>, o simplemente pasa a una línea nueva, como hace esta imagen: <img src="https://s2.qwant.com/thumbr/0x380/f/a/a1d574eae9a53f2a03977244442557544cd0074c90697b391e1e2d09255b3a/Dragon-Ball-Z-Kakarot_Goku.png?u=https%3A%2F%2Fassets.rpgsite.net%2Fimages%2Fimages%2F000%2F083%2F181%2Foriginal%2FDragon-Ball-Z-Kakarot_Goku.png&q=0&b=1&p=0&a=1"></p>

body {
  width: 500px;
  margin: 0 auto;
}

p {
  background: rgba(255,84,104,0.3);
  border: 2px solid rgb(255,84,104);
  padding: 10px;
  margin: 10px;
}

span {
  background: white;
  border: 1px solid black;
}```

**EL VILLANO **

Amo utilizar inline-block por que me permite posicionar elementos en linea, sin necidad de usar el fastidioso float (al que luego toca hacerle un clear), y a la vez puedo definirle al elemento ancho, alto y margen. Con estos cursos de Teff estoy aprendiendo que con flex y grid se puede lograr lo mismo y mucho más… Pero los confieso, soy #teamVillanoInlineBlock 😈

  • La propiedad display tiene dos valores:
  1. El primer valor representa el comportamiento externo del contenedor:
display: flex;  y display: grid;

se comportaran como elementos block es como si tuvieramos :

display: block-flex;  y display: block-grid; 

Con respecto a los otros elementos padres se ubicaran uno debajo sin importar el ancho que pueda utilizar dicho elemento.

Mientras que los elementos con propiedad:

display: inline-flex;  y display: inline-grid;

Se posicionaran uno después del otro en forma lineal:

  1. El segundo valor representa el comportamiento interno del contenedor:
display: grid;

Por defecto los contenedores hijos valor grid se comportaran de esta manera:

  • Mientras que con flex como segundo valor tenemos lo siguiente:
display: flex;

Independientemente que tenga inline o block su valor interno dependera del segundo valor. (recordemos que si no le colocamos el primer valor a el display se tomara como valor block.

quedé 🤯 solo con esta clase
FrontEnd dev + 1 level up !

Display:

  • Diccionario: Desplegar, Color a la vista, exhibir,
  • CSS: Define el tipo de visualizacion del elemente

Nos centramos mas en los valores y no en la propiedad

  • Bloque: Se extienden ocupando todo el espacio disponible entre ellos
  • Inline: Son como palabras en una oracion: Se separan por medio de un espacio blanco entre ellos

Estos definen el valor externo de visualizacion y el valor interno de visualizacion.

Display:Grid realmente es un Display:Block Grid

Los bloques tienen ancho,alto, padding margin y estirarse en todo el espacio.

A los elementos internos del contenedor gird se les ha dado un valor interno de grid.

Ahora sabemos que el display:Flex es realmente un display:inline-flex

Siempre volveremos al flujo normal del documento, esto es como se comportan los elementos de HTML por defecto.

BENEFICIOS DE TRABAJR CON EL FLUJO NORMAL:

  • Flujo mas agradable y legible
  • CSS mucho mas facil
  • Menos problemas de accesibilidad

👌

Para quienes quieren leer más al respecto.

MDN display

Entonces Block y Inline es el diseño prediseñado basado en las propiedades de las etiquetas de html.

Vi este termino Inline-block de manera autodidacta hace unos meses, pero ahora lo comprenderé mejor ya teniendo como basea CSS Grid y flexbox.

block-grid = grid
block-flex = flex
inline-grid y el inline-flex ambos se comportaron de manera externa en inline, e internamente grid y flex respectivamente

Comparto este articulo bien interesante donde hicieron una encuesta sobre cómo organizar las propiedades de CSS: https://webdesign.tutsplus.com/articles/outside-in-ordering-css-properties-by-importance--cms-21685

Definición de display: desplegar, colocar a la vista, exhibir, lucir, mostrar, presentar.

  • block elements: Se extienden ocupando todo el espacio disponible para ellos.
  • inline: Son como palabras en una oración: se separan por medio de un espacio en blanco entre ellos.

El flujo normal del documento usa block e inline.

Estefa muchas gracias, no conocia las propiedades inline-flex, inline-grid, excelente dato

espero que les ayude a comprer mejor estos conceptos
DISPLAY : FLEX

DISPLAY : GRID

los inline simpre toman el ancho y alto de su contenido

Realmente teffcode si nos cambia la forma en que vemos CSS, ya no los vemos como un lenguaje de trucos para dar estilos, sino mas bien ya como un lenguage de estilos mejor estructurado y estable.

Notas de la clase

Si trabajamos de esta forma obtendremos:
Flujo más agradable y legible
CSS mucho más fácil
Menos probable de tener problemas de accesibilidad (ya que está trabajando con el orden de los documentos que es exactamente lo que está haciendo un lector de pantalla o una persona que revisa el documento)

No me acordaba de estos segnificados, estoy muy emocionado al ver este curso

Siempre está lo malo y lo bueno y debemos saber liderar con el villano que es inline-block