NgxObelisco

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.

Ver la documentación de componentes del Sistema de Diseño Obelisco

Cómo usarlo

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.

Instalación

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

npm install ngx-obelisco-example

Requerimientos

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.

Iconografía

Boxicons

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/[email protected]/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"
],

Material Icons Rounded

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" />

Tipografías

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" />

Javascript

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/[email protected]/dist/jquery.slim.min.js"
  integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
  crossorigin="anonymous"
></script>

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

Mantenimiento y colaboración

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.