ngx-nes-css
Advanced tools
Angular library that wraps NES CSS to ease its use within the framework
This library is a wrap around NES.css, a NES-style (8bit-like) CSS Framework.
To add ngx-nes-css package and required dependencies you will need to install:
To install those librairies to your package.json use the following command.
npm install nes.css ngx-nes-css @angular/cdk --save
To add ngx-nes-css required styles file you will need to include:
To do so, follow either one of the methods provided below.
CSS/SCSS import
You can add the following imports to your global styles.css/scss file:
@import 'nes.css/css/nes.css';
@import 'ngx-nes-css/css/styles.css';
@import "@angular/cdk/overlay-prebuilt.css";
Angular CLI
Or you can add the following styles files to the styles section of your angular.json file:
"styles": [
"node_modules/nes.css/css/nes.css",
"node_modules/ngx-nes-css/css/styles.css",
"node_modules/@angular/cdk/overlay-prebuilt.css"
],
NES.css doesn't provide any fonts but recommends using Press Start 2P. To include the recommended font Press Start 2P use either one of the methods below.
☝ 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
CSS/SCSS
You can add the import link to your global styles.css/scss file along with the CSS rule to apply the font:
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');
html, body {
font-family: 'Press Start 2P', cursive;
}
HTML
Or you can add the link for the font to your index.html file into the <head> tag:
<link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap" rel="stylesheet">
And add the following CSS rule to your global styles.css/scss file to apply the font:
html, body {
font-family: 'Press Start 2P', cursive;
}
NES.css only provides components. You will need to define your own layout.
Module Import
In order to have access to all the components, you will need to import the NesModule into your modules like this:
import { NgModule } from '@angular/core';
+ import { NesModule } from 'ngx-nes-css';
import { AppComponent } from './app.component';
@NgModule({
imports: [
+ NesModule,
],
declarations: [AppComponent],
bootstrap: [AppComponent],
})
export class AppModule { }
Components
As for now, the documentation for components usage consist of consulting the demo folder of this repository, more precisely the app.component.html file which contains each and every component with a few different way to use them.
Code snippets will be added and demo will be improved in a near futur.
Code and documentation copyright 2018 B.C.Rikko. Code released under the MIT License. Docs released under Creative Commons.
FAQs
Angular library that wraps NES CSS to ease its use within the framework
The npm package ngx-nes-css receives a total of 0 weekly downloads. As such, ngx-nes-css popularity was classified as not popular.
We found that ngx-nes-css demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Open source maintainers are urging GitHub to let them block Copilot from submitting AI-generated issues and pull requests to their repositories.
Research
Security News
Malicious Koishi plugin silently exfiltrates messages with hex strings to a hardcoded QQ account, exposing secrets in chatbots across platforms.
Research
Security News
Malicious PyPI checkers validate stolen emails against TikTok and Instagram APIs, enabling targeted account attacks and dark web credential sales.