Platzi
Platzi

LA EDUCACI√ďN ES UN REGALO ¬°ACCEDE AL PRECIO ESPECIAL!

Antes: $249
$149
Currency
Antes: $249
Ahorras: $100
COMIENZA AHORA
Termina en: 15D : 6H : 51M : 20S

Crea una cuenta o inicia sesión

¬°Contin√ļa aprendiendo sin ning√ļn costo! √önete y comienza a potenciar tu carrera

Curso de Tailwind CSS

Curso de Tailwind CSS

Víctor Yoalli Domínguez

Víctor Yoalli Domínguez

Responsive Design, Mobile First y Utility First

5/29
Recursos

Aportes 15

Preguntas 1

Ordenar por:

Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Regístrate o inicia sesión para participar.

Una extension para Chrome que hace algo parecido al navegador sizzy es https://chrome.google.com/webstore/detail/responsive-viewer/inmopeiepgfljkpkidclfgbgbmfcennb/related?hl=en

Responsive Web Design

La web como la conocemos, hoy en día, no es una tecnología pensando en un UX o User Experience generando, desafortunadamente, que muchos de los sitio web no estén optimizados para los dispotivos móviles.

Definido por Ethan Marcotte, es una filosofía que responde a las necediades de los usuarios y a los dispositivos que estamos usando.

Mobile First

Como su nombre sugiere, significa que iniciaremos con el dise√Īo de m√≥viles y expandiendo √©stas caracter√≠sticas para crear una veri√≥n en tableta o escritorio/web tradicional.

Cabe mencionar que esta filosofía no es sinónimo de limitación, por lo que tenemos que tener el mismo contenido tanto en escritorio como en móvil. Google describe las best practices en su sitio.

Utility first

CSS posee diferentes tipos de paradigmas para abstraer un dise√Īo, como BEM descrito por Tailwind en √©sta secci√≥n:

<div class="chat-notification">
  <div class="chat-notification-logo-wrapper">
    <img class="chat-notification-logo" src="/img/logo.svg" alt="ChitChat Logo">
  </div>
  <div class="chat-notification-content">
    <h4 class="chat-notification-title">ChitChat</h4>
    <p class="chat-notification-message">You have a new message!</p>
  </div>
</div>

Sin embargo, llega a ser muy complicado establecer un armon√≠a entre desarrolladores-dise√Īadores si no hay una concesi√≥n de sintaxis o linter. Por ello, Tailwind establece su propio orden con el objetivo:

  • No invertir tiempo en inventar nombres para las clases
  • Detener el crecimiento, sin fin, de CSS
  • Simplificando y asegurando los cambios al CSS

Herramienta para desarrollo ūüöÄ

Como desarrolladores necesitamos herramientas que nos permita exlotar nuestra creatividad al m√°ximo por ellos exiten algunas DevTools:

En texto para cortar y pegar XD

Breakpoint -> Tama√Īo

  • Default : Mayor a 0px
  • sm : Mayor a 640px -> Mobil
  • md : Mayor a 768px -> Tablet
  • lg : Mayor a 1024px -> Laptop
  • xl : Mayor a 1280px -> Table grandes o computadora de escritorio
<h3>Develop responsive web:</h3>

https://responsively.app/

Tama√Īos en Tailwind

Esta es otra opcion de Sizzy, https://material.io/resources/resizer/

Responsive Design: Es una técnica para asegurar que la aplicación se vea bien en diferentes dispositivos.
Mobile First: Prioriza el desarrollo pensando en los dispositivos móviles.
Utility First Css: Construir componentes a partir de clases con nombres descriptivos

Tambien esta una alternativa a Sizzy, se llama Responsively. Es free y open source. ūüėČ

Para los Opera Lovers como yo, https://addons.opera.com/es/extensions/details/responsive-web-design-tester/
con esta extensión podemos imitar un poco la funcionalidad de ese navegador que usa el profe

Browser for Developers:
https://blisk.io/

Este programa te permite realizar la misma tarea de visualizar diferentes breakpoints de una p√°gina web.

Responsively
https://responsively.app/

Es una alternativa opensource a sizzy, funciona muy bien y ahorra muhco tiempo al ver al mismo tiempo como va quedando nuestra web en cada dispositivo

Responsively app es un navegador libre que cumple la misma funcionalidad que sizzy

Sizzy se ve como un muy browser…