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

No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

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

14/28
Recursos

Aportes 22

Preguntas 2

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

Todos los dise帽os mostrados en los ejemplos los pueden encontrar en la siguiente web explicados a detalle:
https://web.dev/one-line-layouts/

La 煤nica manera de que todo esto sea tan f谩cil como parece es practicando.

Deconstructed pancake usa la propiedad flex y sus valores son grow, shrink y basis.

Flex-grow ocupa equitativamente en cada elemento el espacio sobrante.

Flex-basis establece un ancho alto de cada item, va a ser alto o ancho dependiendo la direcci贸n en que este.

Flex-shrink especifica el valor de contracci贸n de un elemento, cuanto va a reducir.

Super Centered

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Super centered</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="parent">
        <div class="child">:)</div>
    </div>
</body>
</html>

CSS

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

html {
    font-size: 62.5%;
}

.parent {
    height: 100vh;
    width: 100vw;
    display: grid;
    place-items: center;
    background-color: aqua;
}

.child {
    height: 50px;
    width: 20px;
    display: grid;
    place-items: center;
    background-color: blueviolet;
    font-size: 1.2rem;
    font-weight: bold;
}

Aqu铆 encuentran la demostracion de la clase en c贸digo
Link

Sidebar Says
HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sidebar Says</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="parent">
        <div class="sidebar">min: 150 / max: 25%</div>
        <div class="element">Takes the second grid position</div>
    </div>
</body>
</html>

CSS

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

html {
    font-size: 62.5%;
}

.parent {
    height: 100vh;
    width: 100vw;
    display: grid;
    grid-template-columns: minmax(150px, 25%) 1fr;
}

.sidebar, .element {
    display: grid;
    place-items: center;
    font-size: 1.2rem;
    font-weight: bold;
}

.sidebar {
    background-color: yellow;
}

.element {
    background-color: palevioletred;
}

The Deconstructed Pancake

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Deconstructed pancake</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="parent">
        <div class="child">1</div>
        <div class="child">2</div>
        <div class="child">3</div>
    </div>
</body>
</html>

CSS

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

html {
    font-size: 62.5%;
}

.parent {
    height: 100vh;
    width: 100vw;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.child {
    flex: 0 1 300px;
    display: grid;
    place-items: center;
    margin: 15px;
    background-color: aqua;
    font-size: 1.2rem;
    font-weight: bold;
}

Holy Grail Layout

HTML

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<link rel="stylesheet" href="./style.css" />
		<title>Holy Grail Layout</title>
	</head>
	<body>
		<header class="header">Header</header>
		<aside class="leftSidebar">Left Sidebar</aside>
		<main class="main">Main Content</main>
		<aside class="rightSidebar">Right Sidebar</aside>
		<footer class="footer">Footer</footer>
	</body>
</html>

CSS

* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

html {
	font-size: 62.5%;
}

body {
	height: 100vh;
	font-size: 1.6rem;
	display: grid;
	grid-template: auto 1fr auto / auto 1fr auto;
}

.header,
.footer {
	grid-column: 1/6;
	padding: 2rem;
	text-align: center;
	font-size: 2rem;
	font-weight: bold;
	background-color: blueviolet;
	color: white;
}

.leftSidebar {
	grid-column: 1/2;
	text-align: center;
	font-size: 2rem;
	font-weight: bold;
	padding: 2rem;
	background-color: brown;
	color: white;
}

.main {
	grid-column: 2/3;
	text-align: center;
	font-size: 2rem;
	font-weight: bold;
	padding: 2rem;
}

.rightSidebar {
	grid-column: 3/4;
	text-align: center;
	font-size: 2rem;
	font-weight: bold;
	padding: 2rem;
	background-color: brown;
	color: white;
}

鈥淐lassic Holy Grail Layout鈥 es necesario ponerle nombre a todo? XD

les recomiendo ver el curso de css grid

Holy Grail
HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Holy Grail</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="parent">
        <header>Header</header>
        <section class="left-sidebar">Left Sidebar</section>
        <main>Main</main>
        <section class="right-sidebar">Right Sidebar</section>
        <footer>Footer Content</footer>
    </div>
</body>
</html>

CSS

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

html {
    font-size: 62.5%;
}

.parent {
    height: 100vh;
    width: 100vw;
    display: grid;
    grid-template: auto 1fr auto / auto 1fr auto;
}

header, main, .left-sidebar, .right-sidebar, footer {
    font-size: 1.8rem;
    font-weight: bold;
}

header {
    grid-column: 1 / 4;
    background-color: yellow;
}

.left-sidebar {
    grid-column: 1 / 2;
    background-color: coral;
}

main {
    grid-column: 2 / 3;
    background-color: palevioletred;
}

.right-sidebar {
    grid-column: 3 / 4;
    background-color: greenyellow;
}

footer {
    grid-column: 1 / 4;
    background-color: cadetblue;
}

maravillado con el Santo Grial jjjj

Flex tiene una propiedad flex xd

wow es impresionante

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

  1. Super Centered: Por mas que movamos la pantalla no se nos va a quitar del centro, tanto vertical como horizontalmente.

    .parent {
    	display: grid;
    	place-items: center;
    } 
    
  2. The Deconstructed Pancake: Reorganiza los contenedores de manera responsive, pasando de un dise帽o para desktop a uno para mobile. Esto se logra con 馃憠 flex: grow shrink base-width; crecer, encoger y ancho base;

    • Flex-grow聽ocupa equitativamente en cada elemento el espacio sobrante.

    • Flex-basis聽establece un ancho alto de cada item, va a ser alto o ancho dependiendo la direcci贸n en que este.

    • Flex-shrink聽especifica el valor de contracci贸n de un elemento,cu谩nto va a reducir.

    .parent {
    	display: flex;
    	flex-wrap: wrap; 
    	justify-content: center;
    } 
    
    .box {
    	flex: 0 1 150px;
    	margin: 5px;
    } 
    
  3. Sidebar Says:

    .parent {
    	display: grid;
    	grid-template-columns: minmax(150px, 25%) 1fr;
    } 
    
  4. Pancake Stack:

    .parent {
    	display: grid;
    	grid-template-rows: auto 1fr auto;
    } 
    
  5. Classic Holy Grail Layout:

    .parent {
    	display: grid;
    	grid-template: auto 1fr auto / auto 1fr auto;
    } 
    
    .header {
    	padding: 2rem;
    	grid-column: 1 / 4;
    } 
    
    .left-side {
    	grid-column: 1 / 2;
    } 
    

Tambi茅n puedes revisar estos ejemplos mas a detalle aqu铆 y aqu铆 tambi茅n

Slides Clase-14

馃幉

Bueno, con estos layouts de ejemplo se nos facilita un poco la visualizacion para dise帽o de sitios web con las tecnologias dadas.

A pesar de que todos tendrian su caso de uso, el mas versatil se me hace que es el de pancake

![](

![](

Deconstructed Pancake.

<<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>The Deconstructed Pancake</title>
  <style>
    .main {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
    }

    .main .box {
      flex: 0 1 150px;
      margin: 5px;
      background-color: Blue
       ;
      font-size: 2rem;
      height: 100px;
      display: grid;
      place-items: center;
      border-radius: 10px;
    }
  </style>
</head>
<body>
  <main class="main">
    <section class="box">A1</section>
    <section class="box">B2</section>
    <section class="box">C3</section>
  </main>
</body>
</html>> 

Espero que les sirva 馃槂
Super centered:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Super Centered</title>
  <style>
    .main {
      display: grid;
      place-items: center;
      background-color: aqua;
      width: 90vw;
      height: 90vh;
    }
    .section {
      background-color: coral;
      width: fit-content;
      padding: 20px;
      font-size: 2rem;
      border-radius: 20px;
    }
  </style>
</head>
<body>
  <main class="main">
    <section class="section">:)</section>
  </main>
</body>
</html>

The Deconstructed Pancake:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>The Deconstructed Pancake</title>
  <style>
    .main {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
    }

    .main .box {
      flex: 0 1 150px;
      margin: 5px;
      background-color: greenyellow;
      font-size: 2rem;
      height: 100px;
      display: grid;
      place-items: center;
      border-radius: 10px;
    }
  </style>
</head>
<body>
  <main class="main">
    <section class="box">1</section>
    <section class="box">2</section>
    <section class="box">3</section>
  </main>
</body>
</html>

Sidebar Says:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Sidebar Says</title>
  <style>
    .main {
      display: grid;
      grid-template-columns: minmax(150px, 25%) 1fr;
    }

    .main section {
      height: 600px;
      font-size: 1.3rem;
    }

    .main .left {
      background-color: papayawhip;
    }

    .main .right {
      background-color: darkslateblue;
      color: white;
    }
  </style>
</head>
<body>
  <main class="main">
    <section class="left">lorem</section>
    <section class="right">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Laudantium neque, et nesciunt fugit magni, deserunt possimus minima magnam quia corrupti est dicta voluptatum necessitatibus corporis impedit quis exercitationem itaque. Omnis?</section>
  </main>
</body>
</html>

Pancake Stack:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Pancake Stack</title>
  <style>
    body {
      display: grid;
      grid-template-rows: auto 1fr auto;
      height: 90vh;
    }

    body .header {
      background-color: aqua;
    }

    body .main {
      background-color: coral;
    }

    body .footer {
      background-color: blueviolet;
    }
  </style>
</head>
<body>
  <header class="header">Header</header>
  <main class="main">Main</main>
  <footer class="footer">Footer Content</footer>
</body>
</html>

Holy Grail:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Holy Grail</title>
  <style>
    body {
      display: grid;
      grid-template: auto 1fr auto / auto 1fr auto;
      height: 90vh;
      font-size: 1.3rem;
    }

    body .header,
    body .footer {
      padding: 2rem;
      grid-column: 1 / 4;
    }

    body .header {
      background-color: hotpink;
    }

    body .left,
    body .main,
    body .right {
      text-align: center;
    }

    body .left {
      grid-column: 1 / 2;
      background-color: darkturquoise;
    }

    body .main {
      grid-column: 2 / 3;
      background-color: tomato;
    }

    body .right {
      grid-column: 3 / 4;
      background-color: bisque;
    }

    body .footer {
      background-color: chartreuse;
    }
  </style>
</head>
<body>
  <header class="header">Header</header>
  <section class="left">Left</section>
  <main class="main">Main</main>
  <section class="right">Right</section>
  <footer class="footer">Footer</footer>
</body>
</html>