Obelisco V2

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 boxicons

Es 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 Rounded

npm install material-symbols@latest

Es importante que incluyas el import a Material Symbols en tu hoja de estilos si lo usas via NPM, asi como también los estilos referidos al fill de los íconos.


@import "material-symbols/index.css";

.material-symbols-rounded {
  font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

O puedes utilizar la CDN:

<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@24,400,1,0" rel="stylesheet"/>

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>

Importaciones necesarias