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.

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 @gcba/ngx-obelisco

Actualización

Si NgxObelisco ya está instalado en el proyecto y necesitás actualizarlo a la última versión, en el directorio del proyecto hay que ejecutar:

npm update @gcba/ngx-obelisco

Cómo importarlo

Obelisco cuenta de dos partes principales que se pueden importar de varias formas.

Iconografía

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"
],

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

Estilos

Para importar el scss, podemos hacerlo en el archivo angular.json de la siguiente forma:

"styles": [
  "src/styles.scss",
  "node_modules/ngx-obelisco/src/lib/scss/obelisco.scss"
]

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://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

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.

Mantenimiento y colaboración

El mantenimiento y desarrollo de Obelisco lo hace el equipo de la Dirección General de Experiencia Digital, 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.