Skip to content

Latest commit

 

History

History
121 lines (81 loc) · 4.23 KB

README.md

File metadata and controls

121 lines (81 loc) · 4.23 KB
Raw
NES.css: NES-style CSS framework

ngx-nes-css

This library is a wrap around NES.css, a NES-style (8bit-like) CSS Framework.

Installation

ngx-nes-css

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

Styles

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

Fonts

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;
}

Usage

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

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 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.

Copyright and license

Code and documentation copyright 2018 B.C.Rikko. Code released under the MIT License. Docs released under Creative Commons.