- Notifications
You must be signed in to change notification settings - Fork0
Angular library that wraps NES CSS to ease its use within the framework
License
jfcere/ngx-nes-css
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
This library is a wrap aroundNES.css, a NES-style (8bit-like) CSS Framework.
To addngx-nes-css package and required dependencies you will need to install:
- NES.css – 8-bit CSS framework
- ngx-nes-css – Angular wrapper
- @angular/cdk – For dialog display
To install those librairies to yourpackage.json use the following command.
npm install nes.css ngx-nes-css @angular/cdk --save
To addngx-nes-css required styles file you will need to include:
- NES.css styles file – 8-bit like styling
- ngx-nes-css styles file – Includes a few modifications/fixes/improvements
- @angular/cdk/overlay styles file – Required for dialog display
To do so, follow either one of the methods provided below.
CSS/SCSS import
You can add the following imports to your globalstyles.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 thestyles section of yourangular.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 usingPress Start 2P. To include the recommended fontPress 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 globalstyles.css/scss file along with the CSS rule to apply the font:
@importurl('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 yourindex.html file into the<head> tag:
<linkhref="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap"rel="stylesheet">
And add the following CSS rule to your globalstyles.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 theNesModule 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
For documentation, you can refer to the demo page available @https://jfcere.github.io/ngx-nes-css/ which includes collapsable code snippets. You can also directly consult thedemo folder of this repository, more precisely theapp.component.html file which contains each and every component with a few different way to use them.
Code and documentation copyright 2018B.C.Rikko. Code released under the MIT License. Docs released under Creative Commons.
About
Angular library that wraps NES CSS to ease its use within the framework