vijay1996 / neu

Nue

Experience how just an import statement can make your webpage look cool

Please find live demo at https://codepen.io/vijay1996/pen/eYNrdGq

Installation

Nue is available as open source node package to all developers to use in projects. It can be installed by running the following node command:

npm install nue.js --save

Description

Nue is a simple node package that can convert your HTML skeleton to an awesome looking webpage. It makes use of the concept of Neomorphism to give stunning effects.

Following are the functions available for your use -

applyNue() to apply Nue to your webpage.

alignElement(element, alignment) to align a particular element to left, right or center.

applyNueToElement(element) to apply Nue for a particular Element.

removeNueFromElement(element) to remove Nue from a particular Element.

Usage

In your HTML file kindly include require.js, which is a client side require alternative by adding the following script tag at the bottom of your body tag.

<script src="https://requirejs.org/docs/release/2.3.6/minified/require.js"></script>

After installation, following functions can be utilised in your javascript file.

Import Nue using the following code

require(['./node_modules/nue.js/index']);

To apply Nue, use the following code

applyNue();

Following parameters can be passed on with the above function -

applyNue(option)
option = "TL" *DEFAULT - To place light source on top left of the screen
option = "T" *To place light source on top of the screen
option = "TR" *To place light source on top right of the screen
option = "R" To place light source on right of the screen
option = "BR" *To place light source on bottom right of the screen
option = "B" *To place light source on bottom of the screen
option = "BL" *To place light source on bottom left of the screen
option = "L" *To place light source on left of the screen

To apply Nue to a particular element,

applyNueToElement(element)
element - can be a tag, class name has to start with '.', ID name has to start with '#'

To remove Nue from a particular element,

removeNueFromElement(element)
element - can be a tag, class name has to start with '.', ID name has to start with '#'

To align element,

applyNueToElement(element,alignment)
element - can be a tag, class name has to start with '.', ID name has to start with '#'
alignment - can be 'center', 'left' and 'right