¿Qué son los Modern CSS Layouts?

Hoy en día existe una mejor opción a Object Oriented CSS, y se llama Storybook, aquí hay una → guía de como instalarlo y usarlo ← hecha en youtube por un profesor de platzi → Sacha Lifszyc ←

Sugerencia: Menos pantallazos y mas codigo practico. En lo personal, no me ha gustado mucho este curso y el anterior de Grid, siento que pudieron haberlo hecho mucho mejor

📗 ¿Qué son los Modern CSS Layouts?

• Layout viene del inglés el cual significa diseño
• Colocar tus cajas en el lugar que elijas con respecto a la ventana principal y el resto de cajas

• Cuando hablamos de Modern CSS Layouts es un concepto de hace más de 10 años
• Características de la web en 2010:
  • Progresivamente mejorado
  • Adaptable a diversos usuarios
  • Modulares y eficientes
  • Tipográficamente ricos

• Base sólida e ir añadiendo estilos complejos para aquellos navegadores que pudieran soportarlo
• En ese momento la compatibilidad entre navegadores era notorio

• Al tener una gran cantidad:
  • La amplia gama de navegadores
  • Dispositivos
  • Resoluciones de pantalla
  • Tamaños de fuente
  • Tecnologías de asistencia
• Se pretendía llegar de una manera óptima a todos

• El CSS se pueda dividir en fragmentos que funcionan de forma independiente para crear componentes de diseño que se pueden reutilizar de forma independiente.
• Se hablaba de un framework que permitiera a los desarrolladores escribir código frontend modular rápido, fácil de mantener y basado en estándares.

• Muchas de esas cosas son las que deseamos lograr en la actualidad
• CSS nació en 1996 (lanzamiento inicial)
  • Basado en un diseño de revista

1. Se idearon un modelo de diseño “basado en marcos” (“frame-based” layout model) en 1996
2. Luego, lanzaron el “Advanced Layout Module” en 2005
3. Que luego, pasó a ser “Template Layout Module” en 2016

• Es decir que siempre se ha deseado lo mismo como tener control en:
  • Columnas
  • Filas
  • Tipografías
  • Contenido organizado (Header, Footer, …)

Básicamente el layout CSS ha cambiado drásticamente, así como la forma en que desarrollamos la interfaz de nuestros sitios

• Ahora tenemos una opción real en términos de los métodos de diseño que usamos en CSS para desarrollar nuestros, sitios, lo que significa que a menudo tenemos que elegir qué enfoque tomar.
• Como desarrolladores debemos asegurarnos la comprensión actual del layout esté actualizada
• Veremos diferentes layouts y formas de construirlos

les quiero compartir un editor de codigo es https://codesandbox.io/ es similar a visual estudio code y lo de bueno de este editor ustedes pueden trabajar hasta de una tablet, espero que les sirva saludos.

me da la impresion de que la profesora estefany era la chica de los plumones en el colegio jajajajaja

Me esta gustando bastante el CSS Grid pero, me esta doliendo bastante. Necesito realizar ejercicios con la profesora para entender como maquetar el codigo de manera correcta. 😭

Que hermosos tiempos en donde me entretenía cambiando la tipografía a Comic Sans MS ❤️… JAJAJA, me encanta porque antes se usaban muchas ténicas para lograr esos layouts, y ahora con CSS Grid es absurdamente fácil hacerlo, por eso es que se dice que CSS Grid es una herramienta poderosa!

No me he aburrido de tanta historia porque la profesora es divina jejje pero enserio mucha teoria

Les recomiendo mucho ver el curso de CSS GRID en realidad es un excelente complemento a este.

El layout es el diseño que tenemos, de como colocamos nuestros elementos su organización. Modern CSS layouts es algo que tiene 10 años, igual usaban HTML5 y CSS3, y en 2010 había ciertas características que se requerían como:

• Progresivamente mejorando: Una base solida de CSS y con base se pueda construir lo demás.
• Adaptable a diversos usuarios: Que se pueda ver en diferentes tipos de navegadores y que sea responsive.
• Modulares y eficientes: Tener pequeños componentes y de ahí fueran creciendo los demás y se puedan reutilizar. Antes usaban frameworks de Object Oriented para CSS para tener un código rápido, fácil de mantener y basado en estándares.
• Tipográficamente ricos: Había muchas tipos de tipografías.

Las cosas que querían lograr antes es igual a lo que queremos ahora, la idea de CSS grid lleva años desarrollándose la idea de tener un layout basado en filas y columnas y en 2017 esa idea se concreto. Queríamos tener la misma estructura para layouts pero las cosas van evolucionado y mejorando y ahora podemos tener mejores y más sencillos layouts.

Nah, no continuare con este curso, puro concepto y teoría sin practica a código.

trate de hacer ejemplo anterior de nuestra profesora, non me salió entero y me costó mucho hacerlo pero me sirvió para practicar

Que bien que nací justo en el auge de tecnologías como CSSgrid.

Era divertido lo personalizable que era HI5 😦

De todos los cursos que he hecho en platzi el más fome ha sido este, en vez de hablar tanto debería de enseñarnos hacer un portafolio usando css grid y flexbox, aprenderíamos mucho más. Este curso esta muy aburridor 😔😔😔

Si están algo inconformes por el curso tan teórico y quieren algo más práctico y con un enfoque en GRID les recomiendo mucho: https://platzi.com/cursos/css-grid/

hi5 ?, ya me había olvidado de esa página, es más no puedo creer que aún existe jaja.

wordart… vaya, han pasado mas de 15 años

Es motivante saber que estamos en el comienzo de algo enorme, y que estaba siendo esperado hace tanto.

Hay que darle!

cuando diseño generalmente no uso aside 😅

⭐️ Me encanta que profundicen en las bases !! ⭐️

👌

cuando solo se requerian 128 mb de memoria para andar el windows 95, ahora se queda corto windows 10 con 8gb de ram 🥴🥴🥴🥴

Css grid y flexbox rulz

Me hiciste acordar de los titulos vieejos de word art , siempre los usabamos en nuestros trabajos

La acabo de descubrir y debo decir que me encanta la nueva sección de Clases relacionadas 😀

Vaya. siempre se a querido lo mismo lo que ha mejorado es la herramienta para hacerlo. 🤔

OMG columnas inteligentes y JQuery? Menos mal llegaron CSS Grid y Flexbox … They are magic! ❤️