Introducción al Kit Digital USS

Instrucciones para el uso de los componentes del Kit Digital USS base

Esta es la versión base del Kit Digital USS, una librería de componentes desarrollados en JavaScript vanilla que proporciona todos los elementos necesarios para crear interfaces consistentes con la identidad visual de la Universidad San Sebastián.

Instalación

Para instalar el Kit Digital USS:


1npm install @ussebastian/kitdigital@latest
2# or
3yarn add @ussebastian/kitdigital@latest

Uso básico

Importar estilos CSS

Importa los estilos principales en tu archivo CSS o HTML:


1@import url("@ussebastian/kitdigital/dist/css/main.css");

O directamente en HTML:


1<link rel="stylesheet" href="https://unpkg.com/@ussebastian/kitdigital@latest/dist/css/main.css">

Usar componentes

Los componentes están diseñados para funcionar con clases CSS y atributos de datos:


1<!-- Ejemplo de botón -->
2<button class="uss-btn uss-btn--primary">
3  Mi botón
4</button>
5
6<!-- Ejemplo de card -->
7<div class="uss-card">
8  <img src="imagen.jpg" class="uss-card__img" alt="Descripción">
9  <div class="uss-card__body">
10    <h3 class="uss-card__title">Título</h3>
11    <p class="uss-card__text">Descripción del contenido</p>
12  </div>
13</div>

Componentes interactivos

Para componentes que requieren JavaScript (como modales, carousels, tabs), puedes importar los scripts específicos:


1// Importar componente específico
2import { Modal } from "@ussebastian/kitdigital/dist/components/esm/Modal.js";
3
4// Inicializar
5window.addEventListener("DOMContentLoaded", () => {
6  const modalElements = document.querySelectorAll("[data-uss-modal]");
7  modalElements.forEach(element => {
8    const modalInstance = new Modal(element);
9    modalInstance.mount();
10  });
11});

O usar el bundle completo:


1<script src="https://unpkg.com/@ussebastian/kitdigital@latest/dist/js/main.js"></script>

Ventajas del Kit Base

Compatibilidad universal: Funciona con cualquier framework o proyecto web
Ligero: Solo carga lo que necesitas
Sin dependencias: JavaScript vanilla, sin frameworks externos
Flexible: Fácil de personalizar y extender
Estable: Versión madura con todas las características

Framework agnóstico

El Kit Digital USS base está diseñado para ser framework agnóstico, lo que significa que puedes usarlo con:

Vanilla JS: Proyectos sin framework
React: Integrando las clases CSS
Vue.js: Usando las clases y componentes JS
Angular: Importando estilos y scripts
PHP/WordPress: En proyectos server-side
Cualquier otro framework o CMS

Personalización

Puedes sobrescribir las variables CSS para personalizar el diseño:


1:root {
2  --primary-color: #tu-color;
3  --font-family: "Tu-fuente", sans-serif;
4  /* ... otras variables */
5}

Próximos pasos

Explora los componentes individuales en la sección "Componentes" para ver ejemplos detallados, código y mejores prácticas de implementación.

Contenido