Clarity UI

Hello World,

I spent a lot of time searching online for a simple to use application interface that i could use as a base to build my apps.

I build web applications such as to-do lists, invoicing, CRM etc, basically just table/form format applications that have text form inputs etc.

Most of the solutions I found either cost money or required to much styling or alterations to my HTML tables and forms.

So over the past 3 months I have tried and tested and built Clarity. It is a HTML/CSS web application layout. It has jQuery helpers which enable the HTML attribute TARGET to be used on links and forms.

This means you can build sections of the application in normal HTML, and just add the LINK and TARGET attributes to your links and forms to have the response appear in the required DIV.

Here is an example:

<div id="topsection">
    <a href="mypage.htm" class="link" target="bottomsection">Load my page</a>
</div>
<div id="bottomsection">
    the contents of mypage.htm will be loaded here when you click
</div>

By adding the CLASS="link" and TARGET="bottomsection", we are telling the jQuery helpers to direct the result request to the target div. This makes it much easer than writing custom jQuery functions for each link etc.

Forms also work in the same way, just add TARGET="targetdiv" to the form tag, and make sure the submit button has the CLASS="submit" attribute.

Clarity uses the following jQuery Plugins and are included in the download.
- jQuery 1.72
- jQuery UI 1.8.19
- jQuery liveQuery

I already have improvements to the set, such as menu highlighting and progress loading.

Please contact me with any comments or questions.