TrummerWork CSS Framework para VS Code
Snippets HTML/CSS y autocompletado de clases para trabajar con TrummerWork 2.0. TrummerWork es un framework CSS de archivos estáticos: style.css reúne estilos, utilidades, componentes y reglas responsive; script.js habilita el comportamiento interactivo de la navbar y los sliders. Sus clases son descriptivas y la documentación oficial está en español.
Esta extensión ayuda a escribir el marcado y encontrar clases del CSS. No instala ni sirve el framework, no genera proyectos por su cuenta y no conecta formularios a un backend.
La interfaz de la extensión y los comandos de VS Code están disponibles en español e inglés y siguen el idioma de VS Code. Los nombres de clases y el contenido de los snippets conservan la nomenclatura y ejemplos del framework.
Los comandos aparecen como TrummerWork: Abrir documentación y TrummerWork: Abrir página oficial en VS Code en español; en inglés, como TrummerWork: Open documentation y TrummerWork: Open official website.
Funciones
- Sugiere clases encontradas en
V2.0.0/style.css dentro de class="..." en HTML y className="..." en JSX/TSX, con una explicación de lo que hace cada clase.
- La lista ofrece una opción por prefijo (
tw:texto, tw:titulo, tw:boton, etc.); las variaciones se eligen después de insertar mediante Tab.
- En otros snippets, el prefijo
tw muestra el código que se insertará, junto con una vista previa y una descripción.
- Incluye plantillas editables para títulos, subtítulos, párrafos, texto de apoyo, énfasis, enlaces y listas.
- Inserta páginas preparadas para el CDN oficial o para archivos locales.
- Incluye snippets de navbar, botones, tarjetas, formularios, avisos, footer, sliders y personalización con variables CSS.
- Abre la documentación (TrummerWork: Abrir documentación) o el sitio oficial (TrummerWork: Abrir página oficial) desde la paleta de comandos.
Snippets HTML
| Prefijo |
Inserta |
tw:html-cdn |
Página completa con CSS y JavaScript desde el CDN |
tw:html-local |
Página completa con rutas locales |
tw:navbar |
Navbar responsive |
tw:boton |
Botón de acción |
tw:enlace-boton |
Enlace con apariencia de botón |
tw:tarjeta |
Tarjeta semántica |
tw:formulario |
Formulario con etiquetas asociadas |
tw:aviso |
Aviso informativo |
tw:footer |
Footer responsive |
tw:slider-basico |
Slider horizontal básico |
tw:slider-indicadores |
Slider con indicadores generados por el script |
tw:slider-fundido |
Slider con transición de fundido |
tw:slider-zoom |
Slider con efecto zoom |
tw:slider-hero |
Slider de portada |
tw:slider-compacto |
Carrusel compacto independiente |
Snippets CSS
| Prefijo |
Inserta |
tw:tema |
Sobrescritura de variables CSS de TrummerWork |
tw:grid-2 |
Grid de dos columnas con ajuste para pantallas estrechas |
tw:navbar-height |
Sobrescritura de la altura de navbar |
Requisitos
Los snippets generan HTML/CSS, no copian el framework al proyecto. Añade style.css de TrummerWork a tu página para obtener los estilos. Los sliders y el cierre del menú responsive también necesitan script.js. El formulario es solo estructura visual: debes conectarlo a tu propio servicio si necesitas procesar datos.
Para instalaciones locales, descarga los archivos desde la versión 2.0.0 y ajusta las rutas del HTML generado.
Probar la extensión
- Abre
vscode-extension en VS Code.
- Presiona
F5 para iniciar Extension Development Host.
- En un
.html, escribe tw seguido del nombre, por ejemplo twtexto. La única sugerencia de texto aparece como tw:texto.
- En un
.css, escribe tw para ver las opciones de tema y layout.
- Usa
Ctrl+Space dentro de class="" para consultar clases, o selecciónalas mientras escribes.
- Usa
Tab para recorrer los campos editables tras insertar un componente.
Al escribir tw fuera de class="", aparecen los prefijos de snippets sin repetir sus variantes. Por ejemplo, twtexto muestra una sola sugerencia tw:texto. Al seleccionarla, VS Code inserta un snippet interactivo y Tab recorre sus opciones de estilo y contenido. Dentro de class="", tw sigue mostrando clases CSS para completar el atributo. La vista previa muestra código, no una representación visual renderizada.
Actualizar el índice de clases
El autocompletado usa las clases del CSS 2.0 y el modificador slider-basico, que activa el comportamiento del slider desde script.js. Si cambia el CSS, regenera el índice incluido:
node tools/generate-class-index.js "..\V2.0.0\style.css"
La extensión no hace llamadas de red para autocompletar. Solo abre el sitio oficial cuando se ejecuta el comando de documentación.
El identificador de publisher del manifiesto es trummerwork-project. Antes de publicar en Visual Studio Marketplace, confirma que ese identificador esté registrado a nombre del proyecto y revisa los requisitos de publicación de VS Code.
