Una extension para Chrome que hace algo parecido al navegador sizzy es https://chrome.google.com/webstore/detail/responsive-viewer/inmopeiepgfljkpkidclfgbgbmfcennb/related?hl=en
Introducción, instalación y ambiente de desarrollo
¿Qué es Tailwind CSS?
Instalación y ambiente de desarrollo
Directivas de Tailwind
Conceptos básicos
Personalización y configuración
Responsive Design, Mobile First y Utility First
Utilerías
Colores
Cómo crear grids o columnas en Tailwind CSS
Dimensiones y Espacios
Cambiando las propiedades de la tipografía
Ajustando el espaciado entre letras y líneas
Display
Flexbox
Crea tus propias utilerías
Entendiendo las variantes y las pseudo-clases
¡Es hora de practicar!
Proyecto: PlatziFood
Creando una card
Aplicando formato a la card
Responsive design en la card
Construye el header
Crea el footer
Crea un banner
Cómo integrar una card
Forms
Directivas de Apply
Extraer componentes
Navbar
Alpine JS
Optimiza tu archivo: PurgeCSS y NanoCSS
Conclusiones
Conclusiones y qué sigue
Aportes 15
Preguntas 1
Una extension para Chrome que hace algo parecido al navegador sizzy es https://chrome.google.com/webstore/detail/responsive-viewer/inmopeiepgfljkpkidclfgbgbmfcennb/related?hl=en
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.
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.
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:
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
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/
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…
Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Regístrate o inicia sesión para participar.