srios-lab-styles

v1.0.0

Published

5 months ago

Una librería CSS moderna, modular y reutilizable basada en utilidades y componentes genéricos

0High
0Medium
0Low

sriosnpm

css library framework utilities components responsive modern flexbox grid

Srios Lab Styles

Una librería CSS moderna, modular y reutilizable basada en utilidades y componentes genéricos. Diseñada para ser ligera, flexible y fácil de usar en cualquier proyecto web.

Version Downloads License Size

✨ Características

🎨 Sistema de utilidades completo - Clases CSS tipo Tailwind
🧩 Componentes modulares - Botones, tarjetas, navegación, etc.
📱 Responsive por defecto - Mobile-first design
🎯 Ligera y rápida - Solo 15KB minificada
🔧 Fácil personalización - Variables CSS
🌐 Soporte moderno - CSS Grid, Flexbox, Custom Properties
📚 Bien documentada - Guías completas y ejemplos

🚀 Instalación

NPM

npm install srios-lab-styles

CDN

<link rel="stylesheet" href="https://unpkg.com/srios-lab-styles@latest/dist/srios-lab-styles.min.css">

Descarga directa

Descarga los archivos desde GitHub Releases

📖 Uso Básico

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mi Proyecto</title>
    <link rel="stylesheet" href="srios-lab-styles.css">
</head>
<body>
    <!-- Header -->
    <header class="header">
        <div class="container flex justify-between items-center">
            <div class="header-brand">
                <a href="#" class="link">Srios Lab</a>
            </div>
            <nav class="header-nav">
                <a href="#" class="link">Inicio</a>
                <a href="#" class="link">Proyectos</a>
                <a href="#" class="link">Contacto</a>
            </nav>
        </div>
    </header>

    <!-- Banner Principal -->
    <section class="banner">
        <div class="banner-image">
            <img src="profile.jpg" alt="Perfil" class="hover-scale">
        </div>
        <div class="banner-links">
            <a href="#" class="link link-underline">GitHub</a>
            <a href="#" class="link link-underline">LinkedIn</a>
        </div>
    </section>

    <!-- Sección de Proyectos -->
    <section class="section">
        <h2 class="section-title">Mis Proyectos</h2>
        <div class="container">
            <div class="grid grid-cols-auto-fit gap-xl">
                <div class="card">
                    <h3 class="card-title">Proyecto 1</h3>
                    <p class="card-description">Descripción del proyecto</p>
                    <a href="#" class="btn">Ver proyecto</a>
                </div>
                <div class="card">
                    <h3 class="card-title">Proyecto 2</h3>
                    <p class="card-description">Descripción del proyecto</p>
                    <a href="#" class="btn btn-secondary">Ver proyecto</a>
                </div>
            </div>
        </div>
    </section>
</body>
</html>

🛠️ Sistema de Utilidades

Espaciado

<div class="p-md">Padding mediano</div>
<div class="mt-lg">Margin top grande</div>
<div class="px-xl">Padding horizontal extra grande</div>

Layout

<div class="flex justify-center items-center">Centrado</div>
<div class="grid grid-cols-2 gap-lg">Grid 2 columnas</div>
<div class="container">Contenedor centrado</div>

Tipografía

<h1 class="text-3xl font-light">Título grande</h1>
<p class="text-secondary">Texto secundario</p>
<p class="text-center">Texto centrado</p>

Componentes

<button class="btn">Botón principal</button>
<div class="card">Tarjeta</div>
<a href="#" class="link link-underline">Enlace</a>

🎨 Personalización

Personaliza la librería sobrescribiendo las variables CSS:

:root {
    /* Colores */
    --text-color: #333;
    --bg-color: #fff;
    --accent-color: #007bff;
    
    /* Espaciado */
    --spacing-md: 1.5rem;
    
    /* Tipografía */
    --text-base: 1.1rem;
}

📱 Responsive

La librería incluye breakpoints responsive automáticos:

1024px y menos: Tablets y pantallas medianas
768px y menos: Tablets pequeñas
480px y menos: Móviles grandes
360px y menos: Móviles pequeños

📚 Documentación

🚀 Inicio Rápido - Comenzar en 5 minutos
📖 Guía Completa - Todas las utilidades y componentes
🧩 Ejemplos - Casos de uso prácticos
🎨 Personalización - Cómo adaptar la librería

🔧 Desarrollo

Instalar dependencias

npm install

Desarrollo con watch

npm run dev

Construir para producción

npm run build

Publicar en npm

npm publish

📦 Estructura del Proyecto

srios-lab-styles/
├── src/
│   └── srios-lab-styles.css     # Código fuente
├── dist/
│   ├── srios-lab-styles.css     # Versión de desarrollo
│   └── srios-lab-styles.min.css # Versión minificada
├── docs/
│   └── css-library.md           # Documentación completa
├── examples/                    # Ejemplos de uso
├── package.json
└── README.md

🤝 Contribuir

¡Las contribuciones son bienvenidas! Por favor:

Fork el proyecto
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

📄 Licencia

Este proyecto está bajo la Licencia MIT - ver el archivo LICENSE para detalles.

🙏 Agradecimientos

Inspirado en Tailwind CSS y otros frameworks modernos
Comunidad de desarrolladores web
Contribuidores y usuarios

📞 Contacto

Autor: Srios Lab
Email: [email protected]
GitHub: @sriosgit
Website: srios-lab.dev

⭐ Si te gusta este proyecto, ¡dale una estrella en GitHub!