Bienvenido a ViWeb CSS
Un mini-framework clásico, modular y basado en CSS Grid
ViWeb está inspirado en sistemas de maquetación tradicionales como 960gs, pero construido con tecnologías modernas como CSS Grid Layout. Es un mini-framework ligero, modular y responsivo, e ideal para ser integrado en proyectos como blogs, documentación técnica y sitios tradicionales que busquen un maquetado con apariencia de web clásica.
ViWeb CSS está pensado para quienes desean un sistema de maquetación web basado en columnas simples, directo y sin utilidades excesivas. A continuación, se muestran algunos ejemplos HTML y clases CSS usados en la maquetación básica.
Ejemplo rápido
<div class="vw-grid">
<div class="vw-col-3">Columna 1</div>
<div class="vw-col-6">Columna 2</div>
<div class="vw-col-3">Columna 3</div>
</div>
Características principales
- Layouts clásicos usando CSS Grid y Flexbox
- Diseño organizado en capas y dividido en módulos
- Sistema de columnas simple (clases
.vw-col-n) - Mobile-first con breakpoints simples
- Estilos limpios y minimalistas
- Ideal para blogs, documentación y sitios tradicionales
Instalación
Incluye ViWeb en tu proyecto con:
<link rel="stylesheet" href="viweb.min.css">
¿Qué incluye ViWeb CSS 1.0?
- Sistema de grillas de 12 columnas (grids n/12)
- Clases de unidades de columnas (
.vw-col-n) - Clases para posicionamiento de celdas (
.start-n) - Clases para ordenamiento responsivo (
.ord-u-n) - Estilos para textos, enlaces y elementos básicos
- Estilos para bloques de código simples
- Estilos para tablas y cajas informativas clásicas
Utilice el menú lateral para navegar por los módulos del framework, ejemplos visuales, guías y documentación extendida.
Estructura del Framework Viweb
ViWeb se ha construido siguiendo un enfoque de diseño dual. Su diseño se organiza en capas, donde cada una cumple un propósito específico y actúa sobre un nivel distinto de la maquetación. Las capas del framework son:
Base → Layout → Componentes → Utilidades → Theme
A su vez, cada capa está implementada de forma modular, de modo que utiliza uno o varios archivos independientes que estilizan partes específicas del diseño. Esta dualidad permite desarrollar, modificar o sustituir partes del framework sin afectar a las demás, y al mismo tiempo integrarlas fácilmente en cualquier proyecto web.
La secuencia de capas del framework sigue una lógica de diseño progresiva. Inicialmente, Base: define variables y normaliza los estilos globales; Layout: establece el sistema de grillas (grids) con columnas y filas, y define la estructura general de la página; Componentes: estiliza los elementos de datos e interfaz reutilizables; Utilidades: añade clases para ajustes rápidos; y finalmente Theme: define los colores, tipografía y los estilos visuales personalizados.