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, here shown horizontally as a button group.

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

Buttons can also be shown vertically, they are of equal size.

Cancel Don't Save Save

Menus

Menus are essentially styled unordered list (can be nested)

The NX Menubar (horizontal bar)

 

The NX Menu

 

Tabbed panels or pages (a menu variation)

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

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
2 Ronald Reagan
3 John Kennedy
4 Richard Nixon
5 George Bush

Forms

The following example form was generated by the NKPAX form framework and styled by NX.

Demo User
Personal Info




Gender :


Admin Info


Preferences
Interests :




Login Panel

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

Login

Footer

$Id: nx.html,v 1.7 2004/09/21 09:18:56 sven Exp $