Clarity is a complete web application layout & theme toolkit. This web app template can be used for backend admin templates, and is flexible enough for multiple types of webapps: Analytics Apps, Project Management Apps, Social Apps and more.

Version 1.2 Out Now! Featuring a Responsive Todo List with Drag and Drop and iOS style Scrollbars:

12 Color Themes and Retina Icons:

Version 1.3 is almost ready, and will be available this month!

Try on your Phone or Tablet!

(save to your home screen for the best experience)

Clarity has a flexible and responsive design with some unique features: Responsive Javascript! Different scripts can be applied depending on the media query activated. Both sidebars and the top bar can be resized and collapsed just like a desktop application. It is easy to set min and max widths, and initial width.

Feature Highlights:

• 21 Different Responsive HTML5 and CSS3 Page Layout Templates: Everything you need to get started on your app. Pages include: Login, settings, messages, dashboard, graphs and more.

• 12 Color Themes: a total of 12 dimensional CSS3 color combinations available!

• Responsive Javascript! Specific javascript snippets can be elegantly applied to media queries.

• Responsive Layout: Fluid on desktops and compatible with the iPad and iPhone, with portrait and landscape layouts for each!

• Over 13 jQuery Plugins: in addition to everything included in Bootstrap and jQuery UI.

• 200+ Retina Web Font Icons Included: Icons that look beautiful at any size. Apply colors, text shadows and transitions with CSS.

• Unique Modern Flexible Layout Panels: with multiple resizable, collapsable sidebars.

• Live Resizing Sidebars: drag sidebar edges to resize in realtime just like a desktop app.

• Save Layout States: a users last layout, (sidebar width and sidebars on/off) can be stored in a cookie.

• Retina Ready Interface: Each interface template and icon are optimized for retina displays!

• Code Editor: with custom syntax highlighting themes included. Offers lightning fast live previews of HTML/CSS and support for many languages.

• Todo List: responsive todo list with drag and drop, labels, completed style and datepicker.

• Up to 12 Columns with Two Resizable Sidebars: or as little as one column.

• Built with Bootstrap: for flexibility and familiar code.

• App Interface is Built with CSS3 and HTML5 and uses no images (other than profile pictures, etc) for fast loading.

• Chart and Sparkline Integration: with custom color themes.

• Sortable Datatables

• Calendar: Drag and drop and event creation support.

• Notification and Message View Design

• A large UI set: with many button options and colors included.

• Notification layouts and growl style notifications

• Custom Google Fonts

• Well Organized Code

• Great documentation: built into a beautiful template featuring the same flexible resizable sidebars. See a preview in the screenshots.

• Great support!

Social Notification Menu:

Code Editor Widget:

Great Documentation:

Coming in version 1.3

• More new widgets and improvements

• Update to Bootstrap 2.1.1

• Submenu accordions inside left sidebar menu.

• And your requests!

Version History:

Version 1.2 – November 1st, 2012 * Custom Scrollbars – Custom OSX Lion/iOS style scrollbars available as a javascript and CSS implementation! * Todo List Template – A full responsive todo list UI with drag and drop tasks, a date picker and labels! * Code Editor Demo Mode – Full demo for code editor. Lightning fast live previews for HTML and CSS! * Fixed an issue where some mobile devices would have trouble scrolling. * Fixed an issue where in certain conditions mutiple scrollbars would appear if a user tried to view mobile versions on a desktop display. * Added back to dashboard links on all error pages. * Updated Documentation. * Tons of minor bug fixes. * Additional optimizations.

Version 1.1 – First feature update. August 22nd, 2012

• Color Themes – a total of 12 dimensional CSS3 color combinations available!
• Style Switcher – easily switch through stylesheets with this jQuery plugin.
• Gallery Page Template – A gallery template with CSS3 hover effects.
• Retina Web Font Icons – Interface icons are now retina ready. Over 200 icons to choose from!
• Added Additional Icon Buttons.
• Added More Error Page Templates – 400, 401, 403, 500, 503
• Extra Wide Desktop Layout Optimization – Now this theme looks even better on screens over 1600px wide.
• Custom drag handle on left sidebar now functions as expected.
• Updated Documentation.
• Additional minor fixes.

Version 1.0 – August 15th, 2012 Initial Release