NgxObelisco es una libreria de Angular basado en el sistema de diseño Obelisco y en componentes para los productos digitales de la ciudad de Buenos Aires.

NgxObelisco se distribuye por medio del paquete publicado en npm. Es recomendable usar este sistema para definir la versión a usar y poder actualizarla fácilmente.

Para instalarlo en un proyecto que ya usa npm, hay que ejecutar:

npm install ngx-obelisco-example

Node.js: Se recomienda utilizar la versión ^14.15.0 || ^16.10.0 Puedes verificar tu versión actual ejecutando node -v en tu terminal.

Angular: Este proyecto requiere Angular 14. Asegúrate de tener Angular 14.X.X instaladoglobalmente o especificado en tu proyecto.

Importante
Revisá las versiones y herramientas aceptadas por la Agencia de Seguridad Informática (ASI) del Gobierno de la Ciudad antes de elegir una versión de estas dependencias.

Obelisco utiliza la librería de Boxicons que se puede instalar de las siguientes maneras:

Utilizando el paquete npm:

npm install boxicons

Para utilizarlas con su CDN podemos hacerlo de la siguiente forma:

<link href="https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css" rel="stylesheet" />

Importando en el archivo angular.json de la siguiente manera:

"styles": [
  "src/styles.scss",
  "node_modules/boxicons/css/boxicons.min.css"
],

Obelisco utiliza la librería de Material Icons Rounded que se puede instalar de las siguientes maneras:

Utilizando el paquete npm:

npm install material-icons@latest

Para utilizarlas con su CDN podemos hacerlo de la siguiente forma:

<link href="https://fonts.googleapis.com/icon?family=Material+Icons+Round" rel="stylesheet" />

Obelisco requiere las tipografías Nunito y Open sans disponibles en google fonts, para utilizarlas con su CDN podemos hacerlo de la siguiente forma:

<link
  href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,600;0,700;1,400&display=swap"
  rel="stylesheet"
/>

<link href="https://fonts.googleapis.com/css2?      family=Nunito:wght@300;400;600;700&display=swap" rel="stylesheet" />

Como NgxObelisco está construido sobre Obelisco y Bootstrap 4, debemos tener esas dependencias.

Un ejemplo de cómo importalas en index.html es:

<script
  src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"
  integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
  crossorigin="anonymous"
></script>

<script
  src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"
  integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct"
  crossorigin="anonymous"
></script>

El mantenimiento y desarrollo de Obelisco lo hace el equipo de la Dirección General de Canales Digitales, pero lo utilizan tanto equipos de gobierno como proveedores externos.

Para agilizar y hacer más transparente el proceso, cualquier persona puede contribuir de varias formas.