🎨 Tutorial Interactivo: Flexbox y Grid

Una herramienta educativa interactiva para aprender y visualizar CSS Flexbox y CSS Grid en tiempo real. Perfecta para estudiantes, desarrolladores y diseñadores que quieren dominar estos sistemas de layout modernos.

📋 Tabla de Contenidos

✨ Características
🚀 Demo
📁 Estructura del Proyecto
🛠️ Tecnologías Utilizadas
💻 Instalación
📖 Uso
🎯 Funcionalidades Principales
🔧 Configuración
📚 Documentación Detallada
🤝 Contribuir
📝 Licencia
👥 Autores

✨ Características

✅ Interfaz Interactiva: Manipula propiedades CSS en tiempo real
✅ Vista Previa en Vivo: Observa los cambios instantáneamente
✅ Código Generado: Copia el código CSS automáticamente
✅ Diseño Responsive: Funciona en móviles, tablets y desktop
✅ Sin Dependencias Complejas: Solo HTML, CSS y JavaScript vanilla
✅ Modo Dual: Aprende Flexbox y Grid en un solo lugar
✅ Controles Dinámicos: Agrega, elimina y reinicia elementos
✅ Sintaxis Destacada: Código con colores para mejor legibilidad
✅ Bootstrap Icons: Iconos modernos y profesionales

🚀 Demo

Abre index.html en tu navegador favorito y comienza a experimentar con las propiedades de Flexbox y Grid.

Capturas de Pantalla

Modo Flexbox:

Controla flex-direction, justify-content, align-items, flex-wrap y gap
Visualiza cómo se reorganizan los elementos en tiempo real

Modo Grid:

Define columnas y filas con diferentes unidades
Experimenta con justify-items, align-items y sistemas responsivos

📁 Estructura del Proyecto

tutorial-flexbox-grid/
│
├── index.html          # Estructura HTML principal
├── styles.css          # Estilos CSS personalizados
├── app.js              # Lógica JavaScript
├── README.md           # Documentación del proyecto
└── assets/             # (Opcional) Carpeta para imágenes

Descripción de Archivos

`index.html`

Contiene la estructura HTML de la aplicación:

Sistema de pestañas (Flexbox y Grid)
Controles interactivos (selects, inputs, buttons)
Áreas de vista previa
Bloques de código generado

`styles.css`

Define todos los estilos visuales:

Diseño de la interfaz principal
Estilos de los controles y botones
Contenedores de vista previa
Sintaxis destacada del código
Efectos de hover y transiciones

`app.js`

Maneja toda la lógica de la aplicación:

Cambio entre pestañas
Actualización de propiedades CSS
Gestión de elementos dinámicos
Generación de código
Event listeners modernos

🛠️ Tecnologías Utilizadas

Tecnología	Versión	Propósito
HTML5	-	Estructura semántica
CSS3	-	Estilos y layouts
JavaScript	ES6+	Interactividad y lógica
Bootstrap	5.3.2	Sistema de grid y utilidades
Bootstrap Icons	1.11.1	Iconografía moderna

💻 Instalación

Requisitos Previos

Navegador web moderno (Chrome, Firefox, Safari, Edge)
Editor de código (VS Code, Sublime Text, Atom, etc.)
Conocimientos básicos de HTML, CSS y JavaScript

Pasos de Instalación

Clona el repositorio o descarga los archivos:

git clone https://github.com/gperzal/tutorial-flexbox-grid.git
cd tutorial-flexbox-grid

Abre el proyecto:

Simplemente abre index.html en tu navegador preferido.

# En sistemas Unix/Mac
open index.html

# En Windows
start index.html

# O arrastra el archivo al navegador

¡Listo para usar! No requiere instalación de dependencias ni servidor.

Instalación con Live Server (Opcional)

Si usas VS Code, puedes instalar la extensión "Live Server" para recargar automáticamente:

Instala la extensión "Live Server"
Haz clic derecho en index.html
Selecciona "Open with Live Server"

📖 Uso

Uso Básico

Abre la aplicación en tu navegador
Selecciona una pestaña: Flexbox o Grid
Modifica los controles para ver cambios en tiempo real
Observa el código generado en la parte inferior
Copia y pega el código CSS en tu proyecto

Controles de Flexbox

Control	Opciones	Descripción
`flex-direction`	row, row-reverse, column, column-reverse	Define la dirección principal del contenedor
`justify-content`	flex-start, flex-end, center, space-between, space-around, space-evenly	Alinea elementos en el eje principal
`align-items`	stretch, flex-start, flex-end, center, baseline	Alinea elementos en el eje transversal
`flex-wrap`	nowrap, wrap, wrap-reverse	Controla el ajuste de línea
`gap`	0-40px	Espaciado entre elementos

Controles de Grid

Control	Opciones	Descripción
`grid-template-columns`	Varios presets	Define el número y tamaño de columnas
`grid-template-rows`	auto, fixed, fractional	Define el tamaño de las filas
`justify-items`	stretch, start, end, center	Alinea elementos horizontalmente en su celda
`align-items`	stretch, start, end, center	Alinea elementos verticalmente en su celda
`gap`	0-40px	Espaciado entre celdas

Botones de Acción

➕ Agregar Item: Añade un nuevo elemento al contenedor
➖ Quitar Item: Elimina el último elemento
🔄 Reiniciar: Restaura los valores por defecto

🎯 Funcionalidades Principales

1. Actualización en Tiempo Real

Cada cambio en los controles actualiza inmediatamente:

La vista previa visual
El código CSS generado
Los valores mostrados (ej: gap)

2. Código CSS Generado

El código se genera automáticamente con sintaxis destacada:

.contenedor {
  display: flex; /* o grid */
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 20px;
}

3. Gestión Dinámica de Elementos

Puedes:

Agregar elementos para ver cómo afecta el layout
Quitar elementos para simplificar la vista
Reiniciar para volver al estado inicial

4. Diseño Responsive

La interfaz se adapta a diferentes tamaños de pantalla usando Bootstrap Grid.

🔧 Configuración

Personalizar Colores

Modifica las variables en styles.css:

/* Cambia el gradiente principal */
.header {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

/* Cambia el color de los items */
.flex-item,
.grid-item {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

Personalizar Valores Iniciales

Modifica las variables en app.js:

// Número inicial de items
let flexItemCount = 4; // Cambia a 6, 8, etc.
let gridItemCount = 6; // Cambia a 9, 12, etc.

Agregar Más Opciones

Para agregar más opciones a los selectores, edita index.html:

<select id="flex-direction">
  <option value="row">row</option>
  <option value="nueva-opcion">Nueva Opción</option>
</select>

📚 Documentación Detallada

Arquitectura del Código

Event Listeners (app.js)

document.addEventListener("DOMContentLoaded", function () {
  // Inicialización cuando el DOM está listo
  // Todos los event listeners se registran aquí
  // Separación de responsabilidades por sección
});

Funciones Principales

updateFlexbox()

Obtiene valores de los controles
Aplica estilos al contenedor
Genera código CSS formateado

updateGrid()

Similar a updateFlexbox pero para Grid
Maneja propiedades específicas de Grid

switchTab(tab)

Cambia entre vistas Flexbox y Grid
Actualiza clases CSS activas

Buenas Prácticas Implementadas

✅ Separación de Concerns: HTML, CSS y JS en archivos separados
✅ Event Listeners Modernos: No hay onclick inline
✅ Nombres Descriptivos: Variables y funciones claras
✅ Comentarios Útiles: Código documentado
✅ ES6+: Uso de const, let, arrow functions, template literals
✅ DRY Principle: Código reutilizable y modular

Flujo de Datos

flowchart TD
    A[Usuario interactúa con control] --> B[Event Listener detecta cambio]
    B --> C[Función update* obtiene valores]
    C --> D[Aplica estilos CSS al preview]
    C --> E[Genera código CSS formateado]
    D --> F[Actualiza DOM con nuevo código]
    E --> F

🤝 Contribuir

¡Las contribuciones son bienvenidas! Si quieres mejorar este proyecto:

Fork el repositorio
Crea una rama para tu feature (git checkout -b feature/AmazingFeature)
Commit tus cambios (git commit -m 'Add some AmazingFeature')
Push a la rama (git push origin feature/AmazingFeature)
Abre un Pull Request

Ideas para Contribuir

🎨 Agregar más temas de color
📱 Mejorar la responsividad
🌐 Traducir a otros idiomas
📊 Agregar más ejemplos predefinidos
🎓 Crear tutoriales interactivos paso a paso
♿ Mejorar la accesibilidad

👥 Autores

Guido Perez Zelaya

GitHub: @gperzal
LinkedIn: Mi Perfil
Email: gperzal@gmail.com

🌟 Agradecimientos

Inspirado en la necesidad de aprender CSS de forma visual
Bootstrap por el framework CSS
Bootstrap Icons por la iconografía
La comunidad de desarrolladores web

⭐ Si este proyecto te ayudó, considera darle una estrella en GitHub ⭐

Hecho con ❤️ para la comunidad de desarrolladores

⬆ Volver arriba

Name		Name	Last commit message	Last commit date
Latest commit History 2 Commits
CONTRIBUTING.md		CONTRIBUTING.md
LICENSE		LICENSE
README.md		README.md
app.js		app.js
index.html		index.html
styles.css		styles.css

License

gperzal/tutorial-flexbox-grid

Folders and files

Latest commit

History

Repository files navigation