Maquetador Pro

Generador automático de hojas de estilo (CSS) para Visual Studio Code.

Maquetador Pro es una extensión diseñada para agilizar el proceso de desarrollo web. Analiza el código HTML seleccionado, identifica la estructura semántica y las clases definidas, y genera automáticamente un archivo CSS con estilos modernos y adaptabilidad para dispositivos móviles (Responsive Design).

Descripción

Esta herramienta permite a los desarrolladores enfocarse en la estructura HTML, delegando la creación de estilos repetitivos. La extensión implementa un motor de detección híbrido que funciona tanto con atributos de clase como con etiquetas HTML estándar.

Características Principales

Detección de Estructura

La extensión analiza el código seleccionado buscando dos tipos de elementos:

• Clases CSS: Identifica nombres de clases y genera selectores específicos.
• Etiquetas Semánticas: Reconoce etiquetas como header, nav, section, table, y aplica estilos base profesionales si no se detectan clases.

Diseño Responsivo (Mobile First)

El código generado incluye automáticamente "Media Queries" para asegurar que el sitio web sea legible en dispositivos móviles:

• Ajuste de menús de navegación para evitar superposición de elementos.
• Adaptación de tablas de datos con desplazamiento horizontal en pantallas pequeñas.
• Reorganización de contenedores flexibles.

Gestión de Archivos

• Genera el archivo "estilos.css" en el mismo directorio del HTML.
• Enlaza automáticamente la hoja de estilos al documento HTML.
• Realiza una sobreescritura limpia del archivo CSS para mantener el código ordenado y sin redundancias.

Instalación y Uso

1. Abra un archivo HTML en Visual Studio Code.
2. Seleccione el fragmento de código o la totalidad del documento que desea estilizar.
3. Haga clic derecho sobre la selección para abrir el menú contextual.
4. Seleccione la opción "Generar CSS de este HTML".
5. La extensión creará el archivo CSS y abrirá una vista dividida con el resultado.

Ejemplo de Funcionamiento

Entrada (HTML):

Salida (CSS Generado): header { background-color: #ffffff; padding: 1rem 2rem; display: flex; justify-content: space-between; border-bottom: 1px solid #e2e8f0; }

@media (max-width: 768px) { header { flex-direction: column; text-align: center; } }

Requisitos

• Visual Studio Code versión 1.80.0 o superior.

Versión

1.0.0

• Lanzamiento oficial.
• Soporte para tablas responsivas y corrección de diseño en encabezados.

Desarrollado por [Tu Nombre]