NX Web Application Style Demo

Welcome to the NX Web Application Style Demo. NX is a CSS style sheet that can be used to give HTML pages of Web Applications a certain look and feel. NX takes over some design cues from the NeXT GUI. The NX CSS was developed as part of the KPAX Common Lisp Web Application Framework.

By default a web page is white, text is black. We use Helvetica (or the sans-serif font should Helvetica be unavailable) in size 13px. Paragraphs are are intended 10px and limited to 600px width for readability.

Labels

NX uses a limited set of grayscale colors. Labels in rectangles with different backgrounds are one element of the NX look.

This is a black label This is a gray label

Panels

Panels are used to group and optionally label a number of components.

The sw_vers command

The default width is 600px but can be overridden locally. This is the output of the sw_vers command:

[sven@voyager:~/Tmp]$ vi /etc/httpd/kpax.conf 
[sven@voyager:~/Tmp]$ sw_vers
ProductName:    Mac OS X
ProductVersion: 10.3.5
BuildVersion:   7M34

Buttons

Buttons are implemented as styled links.

Run Script Run Another Script OK Install Mac OS X Server 10.4

An optional button group makes all buttons of an equal size (100 px), and centers their titles.

Cancel Don't Save Save

Menus

Menus are a special case of buttons.

Tables

NX uses clean and simple tables with thin borders.

Decimal	Roman	English	French
1	I	One	Un
2	II	Two	Deux
3	III	Three	Trois
4	IV	Four	Quatre
5	V	Five	Cinq

The previous table had no width specification, the next one has a width of 100%. By using a special class on TR tags, you can have alternating row colors.

Decimal	Roman	English	French
1	I	One	Un
2	II	Two	Deux
3	III	Three	Trois
4	IV	Four	Quatre
5	V	Five	Cinq

It is also possible to have buttons inside tables.

ID	Person	Actions
1	Bill Clinton	View Edit Delete
2	Ronald Reagan
3	John Kennedy
4	Richard Nixon
5	George Bush

Forms

Tabs

Login Panel

As the login panel is for many applications the first thing the user sees, it should be styled well.

Demo User

Personal Info

Fullname :

* Username :

Password :

Gender : Male Female

* Age :

Admin Info

Notes :

Enabled

Preferences

Interests : Sex Drugs Rock-And-Roll Hacking

Language:

Music-Tastes:

Footer

$Id: nx.html,v 1.8 2004/09/09 12:14:45 nicky Exp $

Username:
Password: