Importaciones necesarias
Después de instalar Obelisco V2 o hacer el llamado a través de la CDN, es necesario importar ciertos complementos esenciales para asegurar el correcto funcionamiento y el estilo de los componentes de Obelisco V2. A continuación, se detallan los recursos que debes incluir en tu proyecto:
Estilos
Se deben importar los estilos provenientes del paquete de Obelisco v2.
<link rel="stylesheet" href="ruta/al/proyecto/dist/styles.css" />O puedes importarlo en tu hoja de estilos global.
@import "@gcba/obelisco-v2/dist/styles.css";Si estas utilizando versiones anteriores de webpack, (Webpack 4 o inferiores), el prefijo ~ es necesario:
@import "~@gcba/obelisco-v2/dist/styles.css";Tipografías Utilizadas
Obelisco V2 utiliza las tipografías Open Sans y Nunito para asegurar una apariencia moderna y profesional. Puedes incluirlas en tu proyecto utilizando los siguientes enlaces:
Open Sans:
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,600;0,700;1,400&display=swap" rel="stylesheet" />Nunito:
<link href="https://fonts.googleapis.com/css2?family=Nunito:wght@300;400;600;700&display=swap" rel="stylesheet" />Iconografía Utilizada
Obelisco V2 hace uso de la iconografía provista por Material Symbols y Boxicons. A continuación se detallan los recursos necesarios:
Boxicons:
npm install boxiconsEs importante que incluyas el import a Boxicons en tu hoja de estilos si lo usas via NPM
@import "boxicons/css/boxicons.min.css";O puedes utilizar la CDN:
<link href="https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css" rel="stylesheet" />Material Symbols:
npm install material-symbols@latestEs importante que incluyas el import a Material Symbols en tu hoja de estilos si lo usas via NPM
@import "material-symbols/index.css";O puedes utilizar la CDN:
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@24,400,1,0"/>Scripts Necesarios
Para asegurar el correcto funcionamiento de los componentes basados en Bootstrap 5, es necesario incluir los siguientes scripts:
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js" integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" crossOrigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.min.js" integrity="sha384-0pUGZvbkm6XF6gxjEnlmuGrJXVbNuzT9qBBavbLwCsOGabYfZo0T0to5eqruptLy" crossOrigin="anonymous"></script>