Menu Examples | Raxan Framework 

Commonly used Elements


You can use the master.css library to quickly add style and color to your web site and applications.

Boxes and Panel


Box
Lorem ipsum dolor sit amet Click here
Alert
Consectetuer adipiscing elit. Click here
Notice
Donec quam felis, ultricies nec Click here
Info
Donec quam felis, ultricies nec Click here
Success
Ultricies nec, pellentesque eu Click here
Error
Donec quam felis, ultricies nec Click here
Alert TitleConsectetuer adipiscing elit. Click here
Success TitleUltricies nec, pellentesque eu Click here
 Sidebar

Quisque ut velit convallis leo tristique placerat. Quisque congue tortor et urna. Aliquam porta, sapien vehicula fermentum posuere, velit libero faucibus urna, a consequat mi massa sed mauris. Cras velit lorem, pellentesque eu, suscipit a, mollis et, urna.
 Duis pellentesque

 

Headings


Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Header with class="caps"

Header with class="fancy"

 

Paragraphs, Text & Font Size


Normal: Curabitur porta tincidunt tortor. Curabitur aliquet commodo dui. Nam et elit in dui fringilla malesuada. Nam lacinia lectus non quam sollicitudin pellentesque. Cras sed lorem. Vivamus ultrices vulputate ante. In dignissim. Mauris volutpat rutrum ipsum. Aenean quis libero. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec nibh risus, volutpat ac, ornare at, molestie a, lectus. Phasellus at lorem at leo consequat consectetuer. Aliquam vitae felis.

Small: Aenean molestie. Nulla sit amet nibh sit amet purus luctus lacinia. Mauris vitae dolor. Mauris eu nunc vel tellus dictum aliquam. Mauris luctus dignissim velit. Nulla convallis risus et turpis. Etiam congue, dolor at aliquam faucibus, lectus arcu posuere elit, quis sodales neque dui a mi. Ut viverra erat quis risus. Suspendisse potenti. In tortor purus, bibendum nec, gravida quis, mattis vel, mauris. Praesent a sem a leo sodales ullamcorper. Nulla facilisi. Vestibulum sagittis malesuada lacus. Etiam consequat sodales mi. Etiam rhoncus volutpat mauris. Donec mauris tortor, congue quis, dapibus quis, ultrices et, risus. In nisi dui, cursus non, ullamcorper sit amet, condimentum id, leo. In felis. Proin gravida lobortis nisl.

Medium: Maecenas ligula mauris, condimentum ac, fringilla vitae, fringilla vel, enim. Praesent aliquam tortor molestie neque. Praesent in tellus. Vestibulum posuere dolor vitae tellus. Fusce id magna. Pellentesque pharetra orci in sapien. Aliquam augue diam, fermentum eget, pretium sit amet, eleifend vitae, est. Vivamus luctus orci non leo. Donec sollicitudin nibh at nisi. Suspendisse lorem.

Large: Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec ligula. Pellentesque mi lorem, lacinia in, mattis nec, hendrerit ut, elit. In sit amet augue ac justo dictum mattis. Nunc varius dolor posuere leo. Curabitur condimentum semper odio. Proin sapien. Nulla faucibus faucibus felis. Mauris lobortis massa et augue.

CAPS: Aliquam augue diam, fermentum eget, pretium sit amet, eleifend vitae, est.

Highlight: Donec ligula. Pellentesque mi lorem, lacinia in, mattis nec, hendrerit ut, elit.

Blockquote: Curabitur porta tincidunt tortor. Curabitur aliquet commodo dui. Nam et elit in dui fringilla malesuada. Nam lacinia lectus non quam sollicitudin pellentesque. Cras sed lorem. Vivamus ultrices vulputate ante. In dignissim. Mauris volutpat rutrum ipsum. Aenean quis libero. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec nibh risus, volutpat ac, ornare at, molestie a, lectus. Phasellus at lorem at leo consequat consectetuer. Aliquam vitae felis.

<strong> text
<dfn> definition term
<del> deleted text
<em> emphasis

<pre> preformated text
Line 1 white-space
Line 2 white-space    white-space     white-space
Line 3  tab1    tab2    tab3    tab4
<code> code function main(){ var start, i; start = new Date(); alert(start); for (i=0; i<100; i++) { window.status = "Row " + i; } }

<tt> Teletype text
Sample monospaced text.

<address> address
Mary Jane
P.O. Box 123
Planet Earth

<abbr> abbr
<acronym> acronym

 

Lists


  1. Ordered list items
  2. list item 1
  3. list item 2
  4. list item 3
    1. Nested Ordered list
    2. nested item 2
    3. nested item 3
    4. nested item 4
    5. nested item 5
    6. nested item 6
  5. list item 4
  6. list item 5
  1. Ordered/Unordered
  2. list item 1
  3. list item 2
  4. list item 3
    • Nested list
    • nested item 2
    • nested item 3
      • item 1
      • item 2
    • nested item 4
  5. list item 4
  6. list item 5

 

Tables & Buttons


Basic table with caption
NameAgeColorSizeModel
BreadWhite2 Lbs$12.40CC
ButterYellow1 Lbs$8.20DB
MilkCherry4 Qtr$21.50Cash
FlourWheat3 Lbs$6.50Cash
Table with header class
NameAgeColorSizeModel
BreadWhite2 Lbs$12.40CC
ButterYellow1 Lbs$8.20DB
MilkCherry4 Qtr$21.50Cash
FlourWheat3 Lbs$6.50Cash
Table with sort class
NameAgeColorSizeModel
FlourWheat3 Lbs$6.50Cash
ButterYellow1 Lbs$8.20DB
BreadWhite2 Lbs$12.40CC
MilkCherry4 Qtr$21.50Cash

Buttons

   

     

Link Button

 

Paddings, Margins & Borders


Border
Aliquam ultricies libero nec nisl. Donec at leo ut eros posuere facilisis.
Top Border (tpb)
Aliquam ultricies libero nec nisl. Donec at leo ut eros posuere facilisis.
Right Border (rtb)
Aliquam ultricies libero nec nisl. Donec at leo ut eros posuere facilisis.
Bottom Border (bmb)
Aliquam ultricies libero nec nisl. Donec at leo ut eros posuere facilisis.
Left Border (ltb)
Aliquam ultricies libero nec nisl. Donec at leo ut eros posuere facilisis.

Half Padding (hlf-pad)
Aliquam ultricies libero nec nisl. Donec at leo ut eros posuere facilisis. Donec eget arcu in felis tristique dapibus. Aliquam erat volutpat.
Padding (pad)
Aliquam ultricies libero nec nisl. Donec at leo ut eros posuere facilisis. Donec eget arcu in felis tristique dapibus. Aliquam erat volutpat.
Double Padding (dbl-pad)
Aliquam ultricies libero nec nisl. Donec at leo ut eros posuere facilisis. Donec eget arcu in felis tristique dapibus. Aliquam erat volutpat.

Margin
Aliquam ultricies libero nec nisl. Donec at leo ut eros posuere facilisis.
Top Margin (tpm)
Aliquam ultricies libero nec nisl. Donec at leo ut eros posuere facilisis.
Right Margin (rtm)
Aliquam ultricies libero nec nisl. Donec at leo ut eros posuere facilisis.
Bottom Margin (bmm)
Aliquam ultricies libero nec nisl. Donec at leo ut eros posuere facilisis.
Left Margin (ltm)
Aliquam ultricies libero nec nisl. Donec at leo ut eros posuere facilisis.

 


The Rich Ajax Application Framework. Visit http://xwisdomhtml.com/raxan