npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

obelisco-angular-demo

v1.0.1

Published

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.

Downloads

139

Readme

Introducción

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.

Sistema de Diseño Obelisco

Es el sistema de diseño para productos digitales del Gobierno de la Ciudad de Buenos Aires; una guía de recursos y herramientas creada para los ciudadanos/as.

Obelisco busca brindar soluciones de diseño tanto a áreas internas como externas de Gobierno, poniendo el foco en la accesibilidad y los estándares de usabilidad para lograr una experiencia ideal para las personas usuarias.

Cómo usar NgxObelisco

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 obelisco-angular

Requerimientos

Node.js: Se recomienda utilizar la versión ^18.X.X.

Angular: Este proyecto requiere Angular 17. Asegúrate de tener Angular 17.X.X instalado globalmente 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.

Integración y Configuración de Recursos

En lugar de mostrar cada importación individualmente, a continuación se presenta un ejemplo de cómo incluir todas las dependencias y recursos necesarios en un archivo HTML.

  • Iconografía: Incluye enlaces a la librería de iconos Boxicons y Material Symbols Rounded, proporcionando una amplia gama de iconos para utilizar en la interfaz de usuario.
  • Tipografías: Integra fuentes de Google como Nunito y Open Sans para mantener la coherencia visual y mejorar la legibilidad.
  • JavaScript: Enlaces a jQuery y Bootstrap para proporcionar funcionalidad adicional y componentes interactivos.
<!DOCTYPE html>
<html lang="es">
  <head>
    <!-- Importar Boxicons desde CDN -->
    <link href="https://unpkg.com/[email protected]/css/boxicons.min.css" rel="stylesheet" />

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

    <!-- Importar tipografías Nunito y Open Sans desde Google Fonts -->
    <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" />
  </head>
  <body>
    <!-- Contenido de tu aplicación -->

     <!-- Importar popper desde CDN -->
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" crossOrigin="anonymous"></script>

    <!-- Importar Bootstrap desde CDN -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-0pUGZvbkm6XF6gxjEnlmuGrJXVbNuzT9qBBavbLwCsOGabYfZo0T0to5eqruptLy" crossOrigin="anonymous"></script>
  </body>
</html>

Importar módulos

Además de importar componente por componente como por ejemplo:

import { OButtonModule } from 'obelisco-angular/button';
import { OAlertModule } from "obelisco-angular/alert";

Ó Puedes usar este que trae todos los módulos:

import { NgxObeliscoModule } from "obelisco-angular/ngx-obelisco";

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 con alguna de estas acciones:

  1. Pedir un caso de uso nuevo: Si estás trabajando con NgxObelisco y tenés un caso de uso que no está contemplado, o ninguno de los componentes que existen se adapta bien a la necesidad.
  2. Reportar un error o mejora técnica: Si encontrás un error en alguno de los componentes o alguna mejora que impacte en la usabilidad, accesibilidad o rendimiento.
  3. Aportar con código: Si pediste un caso nuevo o reportaste un error y querés colaborar con el código, explicá en el issue que vas a estar trabajando en eso.

Para más detalles, consultá nuestra guía Contribuir con NgxObelisco.