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 1

Curso de Tailwind CSS 1

V铆ctor Yoalli Dom铆nguez

V铆ctor Yoalli Dom铆nguez

Responsive Design, Mobile First y Utility First

5/29
Recursos

Aportes 18

Preguntas 1

Ordenar por:

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

o inicia sesi贸n.

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/

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

Tama帽os en Tailwind

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

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/

es una lastima que no pueda contratar sizzy (que me recuerda al personaje de La hora Pico), pero para esta aventura del front, me va a servir muchisimo

Yo recomiendo Polypane, se me hizo una herramienta muy buena.
https://polypane.app
Tambien pueden conseguir un a帽o gratis con github student pack

Les soy sincero, estoy un poco perdido, pero tengo la fe que voy a aprender esto a como d茅 lugar.

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鈥