Installation

Npm

1. Install NES-design

npm install nes-design
Copy

2. Install peerDependencies

npm install nes.css >= 2.3.0
npm install react >= 16.8
Copy

CDN

1. Import js

// Import React ReactDOM
<script crossorigin src='https://unpkg.com/react@17/umd/react.development.js'></script>
<script crossorigin src='https://unpkg.com/react-dom@17/umd/react-dom.development.js'></script>
-
// Import components
<script src='https://unpkg.com/nes-design@__/dist/nes-design.min.js'></script>
Copy
// Link nes.css
<link href='https://unpkg.com/nes.css@2.3.0/css/nes.min.css' rel='stylesheet' />
-
// Link nes-design
<link rel='stylesheet' href=''https://unpkg.com/nes-design@__/dist/index.css' />
Copy

Use

Npm Project

// Import css
// _.(css|scss|less)
@import 'nes.css/css/nes.css';
@import 'nes-design/es/index.css';
// _.(jsx|tsx)
import 'nes.css/css/nes.css';
import 'nes-design/es/index.css';
-
// Import Component
import { Component } from 'nes-design';
import Component from 'nes-design/Component';
-
// Use
const Custom = () => <Component />
ReactDOM.render(Custom,  document.getElementById('root'))

CDN .Html Project

/**@jsx React.DOM*/
const Custom = () => <Component />
<script type='text/jsx'>
   ReactDOM.render(Custom,  document.getElementById('root'))
</script>

custom theme

1. Create scss file And Import scss

@import 'node_modules/nes.css/scss/nes.scss';
@import 'nes-design/es/index.css'
Copy

2. Cover scss theme variable

Theme variable

3. Use


  // For Example
  // _.scss
  $primary-colors: (
    normal: red,
    hover: red,
    shadow: red,
  ) !default;
  @import 'node_modules/nes.css/scss/nes.scss';
  @import 'nes-design/es/index.css';
  
Copy

Will be an expected error, I'mfollowing upon that.

Temporary solutions

Change 'node_modules/nes.css/scss/base/variables.scss'

$cursor-url: url('') !default; 
$cursor-click-url: url('') !default;'