Såhär ser submenyn ut, första knappen visar vald sida
Vanlig h1, en på varje sida tack :-)

Sidrubrik (h1)

Sökruta, notera den fina ikonen.

Några olika knappar
Länkknapp
En länk som går att klicka på och en som inte går att klicka på (den kanske är inaktiverad av andra val, man kan inte bläddra förbi sista sidan tex)

En länk till något En inaktiv länk till något
En tabell med formulär, class="form". Använd placeholders (html5).
Sätt class="invalid" och data-message="Bla bla" för att markera något som fel.
Sätt en span-tag runt en stjärna för att märka ut fält som är tvingade. Sätt class="invalid" på fält man hoppat över att fylla i.
*
*
Om man behöver gruppera olika delar i sitt gui kan man göra det med <div class="container">
Dessa innehåller vanliga h2 och h3

Rubrik i låda (h2)

Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet

Rubrik i låda (h3)

Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet

Rubrik i låda (h2)

Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet

Rubrik i låda (h2)

Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet

Standardpaginering. Den visar maximalt 10 sidor runt den aktuella sidan plus alltid första och sista sidan.
Detta kommer att bli en tag där man matar in lämplig data.
Visar 10 av totalt 200 Sida 2 av 20
1 2 3 4 5 6 7 8 9 10 ... 20 Nästa
Tabell med data, orderdata, kreditprodukter etc: <table class="data">
Det går att stoppa in input-fält i cellerna.
Genom class="sortable" visar <th> kontroller för att sortera på olika kolumner.
Genom class="sort-up" och class="sort-down" visas aktuell sortering.
Genom class="highlight" på raden så highlightas raden och muspekaren blir en hand. Bra för in-place editing.
Länkar i denna tabell är av typen class="simple", bra för in-place editing.

Näst understa raden har <tr class="text"> vilket gör att texten alignas med input-fälten i understa raden.
Rubrik 1 Rubrik ABC Ru Ru asdfa dfasdfasdf
cell 1 cell 2 cell 3 cell 4
12 5000:- aksjdfkla sdfljasld kfjlaskjdflkajsdflkajs dflkjalsfdkj cell 4
cell 1 cell 2 cell 3 cell 4
På raden underst har man tryckt edit eller liknande
101 qwerty 4990 1999-12-02
Spara Avbryt
Tabell i tabell har margin-top 0 för att undvika extra luft mellan omlutande cells kant och inre tabells yttre kant.
Rader som inte innehåller inputs har <tr class="text"> vilket gör att dessa raders text alignas med texten i input-fälten.
Enkel kolumn Tabell i Tabell
Denna rad är en <tr class="text">
Siffror 7712
Text Äppelmos
Denna rad är en helt vanlig <tr>
Siffror 4321
Text Spara Avbryt

För att implementera detta: