{"id":20942508,"url":"https://github.com/jfcere/ngx-nes-css","last_synced_at":"2026-02-11T03:31:21.418Z","repository":{"id":57687810,"uuid":"480114967","full_name":"jfcere/ngx-nes-css","owner":"jfcere","description":"Angular library that wraps NES CSS to ease its use within the framework","archived":false,"fork":false,"pushed_at":"2023-03-05T19:54:46.000Z","size":2103,"stargazers_count":3,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-09-29T11:42:47.727Z","etag":null,"topics":["angular","components","css","nes","retro"],"latest_commit_sha":null,"homepage":"https://jfcere.github.io/ngx-nes-css/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/jfcere.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-04-10T19:11:29.000Z","updated_at":"2023-11-22T22:43:26.000Z","dependencies_parsed_at":"2024-11-18T23:33:26.589Z","dependency_job_id":"1d448baa-68b0-4c1b-95d5-973831a1db75","html_url":"https://github.com/jfcere/ngx-nes-css","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/jfcere/ngx-nes-css","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jfcere%2Fngx-nes-css","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jfcere%2Fngx-nes-css/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jfcere%2Fngx-nes-css/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jfcere%2Fngx-nes-css/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jfcere","download_url":"https://codeload.github.com/jfcere/ngx-nes-css/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jfcere%2Fngx-nes-css/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29326148,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-11T02:08:56.257Z","status":"ssl_error","status_checked_at":"2026-02-11T02:08:51.338Z","response_time":97,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","components","css","nes","retro"],"created_at":"2024-11-18T23:27:52.595Z","updated_at":"2026-02-11T03:31:21.401Z","avatar_url":"https://github.com/jfcere.png","language":"TypeScript","readme":"\u003cdiv align=\"center\"\u003e\n  \u003ca href=\"https://nostalgic-css.github.io/NES.css/\" target=\"_blank\"\u003e\u003cimg src=\"https://user-images.githubusercontent.com/5305599/49061716-da649680-f254-11e8-9a89-d95a7407ec6a.png\" alt=\"NES.css: NES-style  CSS framework\" style=\"max-width: 100%;\" width=\"600\" height=\"315\"\u003e\u003c/a\u003e\n\u003c/div\u003e\n\n\u003cbr\u003e\n\n# ngx-nes-css\n\nThis library is a wrap around [NES.css](https://nostalgic-css.github.io/NES.css/), a NES-style (8bit-like) CSS Framework.\n\n## Installation\n\n### ngx-nes-css\n\nTo add `ngx-nes-css` package and required dependencies you will need to install:\n- [NES.css](https://nostalgic-css.github.io/NES.css/) – 8-bit CSS framework\n- [ngx-nes-css](https://github.com/jfcere/ngx-nes-css) – Angular wrapper\n- [@angular/cdk](https://material.angular.io/cdk) – For dialog display\n\nTo install those librairies to your `package.json` use the following command.\n\n```bash\nnpm install nes.css ngx-nes-css @angular/cdk --save\n```\n\n### Styles\n\nTo add `ngx-nes-css` required styles file you will need to include:\n- [NES.css](https://nostalgic-css.github.io/NES.css/) styles file – 8-bit like styling\n- [ngx-nes-css](https://github.com/jfcere/ngx-nes-css) styles file – Includes a few modifications/fixes/improvements\n- [@angular/cdk/overlay](https://material.angular.io/cdk/overlay) styles file – Required for dialog display\n\nTo do so, follow either one of the methods provided below.\n\n**CSS/SCSS import**\n\nYou can add the following imports to your global `styles.css/scss` file:\n\n```scss\n@import 'nes.css/css/nes.css';\n@import 'ngx-nes-css/css/styles.css';\n@import \"@angular/cdk/overlay-prebuilt.css\";\n```\n\n**Angular CLI**\n\nOr you can add the following styles files to the `styles` section of your `angular.json` file:\n\n```json\n\"styles\": [\n  \"node_modules/nes.css/css/nes.css\",\n  \"node_modules/ngx-nes-css/css/styles.css\",\n  \"node_modules/@angular/cdk/overlay-prebuilt.css\"\n],\n```\n\n### Fonts\n\n[NES.css](https://nostalgic-css.github.io/NES.css/) doesn't provide any fonts but recommends using [Press Start 2P](https://fonts.google.com/specimen/Press+Start+2P). To include the recommended font [Press Start 2P](https://fonts.google.com/specimen/Press+Start+2P) use either one of the methods below.\n\n\u003e ☝ [Press Start 2P](https://fonts.google.com/specimen/Press+Start+2P) only supports English characters. If you need any language other than English, please use another font or refer to the list of other recommended fonts here: https://github.com/nostalgic-css/NES.css#fonts\n\n**CSS/SCSS**\n\nYou can add the import link to your global `styles.css/scss` file along with the CSS rule to apply the font:\n\n```scss\n@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P\u0026display=swap');\n\nhtml, body {\n  font-family: 'Press Start 2P', cursive;\n}\n```\n\n**HTML**\n\nOr you can add the link for the font to your `index.html` file into the `\u003chead\u003e` tag:\n\n```html\n\u003clink href=\"https://fonts.googleapis.com/css2?family=Press+Start+2P\u0026display=swap\" rel=\"stylesheet\"\u003e\n```\n\nAnd add the following CSS rule to your global `styles.css/scss` file to apply the font:\n\n```css\nhtml, body {\n  font-family: 'Press Start 2P', cursive;\n}\n```\n\n## Usage\n\n[NES.css](https://nostalgic-css.github.io/NES.css/) only provides components. You will need to define your own layout.\n\n**Module Import**\n\nIn order to have access to all the components, you will need to import the `NesModule` into your modules like this:\n\n```diff\nimport { NgModule } from '@angular/core';\n+ import { NesModule } from 'ngx-nes-css';\n\nimport { AppComponent } from './app.component';\n\n@NgModule({\n  imports: [\n+   NesModule,\n  ],\n  declarations: [AppComponent],\n  bootstrap: [AppComponent],\n})\nexport class AppModule { }\n```\n\n**Components**\n\nFor documentation, you can refer to the demo page available @ [https://jfcere.github.io/ngx-nes-css/](https://jfcere.github.io/ngx-nes-css/) which includes collapsable code snippets. You can also directly consult the `demo` folder of this repository, more precisely the [app.component.html](https://github.com/jfcere/ngx-nes-css/blob/master/demo/src/app/app.component.html) file which contains each and every component with a few different way to use them.\n\n## Copyright and license\n\nCode and documentation copyright 2018 [B.C.Rikko](https://github.com/BcRikko). Code released under the MIT License. Docs released under Creative Commons.\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjfcere%2Fngx-nes-css","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjfcere%2Fngx-nes-css","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjfcere%2Fngx-nes-css/lists"}