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.
March 7th 2014 – Update: Clarity 2.0 is out now! Clarity 2.0 is a complete theme overhaul featuring many optimizations and tweaks as well as bootstrap 3.1, hundreds of new icons, a new invoice layout, a new email layout, user profile layout, modal templates, new plugins and more! See release notes at the bottom of this page for more.
Now upgraded to Bootstrap 3.1!
12 Color Themes and Retina Icons:
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:
- 26 Different Responsive HTML5 and CSS3 Page Layout Templates: Everything you need to get started on your app. Pages include: Login, settings, messages, dashboard, graphs, todo, email, user profile, modal templates 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 23 jQuery Plugins: in addition to everything included in Bootstrap and jQuery UI.
- 900+ 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.
- Email List: responsive email layout with toggle-able stars and checkboxes.
- Responsive Invoice Template: responsive invoice template for your webapp.
- Responsive Modal Window Templates: common examples of modal layouts.
- User comments template: Comments with slide down reply areas, like button toggles and character count.
- Up to 12 Columns with Two Resizable Sidebars: or as little as one column.
- Built with Bootstrap 3.1.0: 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:
- Send us your requests of what features you’d like to see next!
Version History:
Version 2.0 March 7th, 2014 (our biggest update yet)
- New Responsive Invoice Page Template!
- New Responsive Email App Template!
- New 8 Responsive Modal Templates!
- New Responsive User Profile Page Template!
- New User Comments Page Template with slide down comment reply, and like button.
- Added large modal template with sidebar comments.
- Added Character count plugin for displaying characters in comment textareas.
- Added SocialCount plugin for social share modal. Load social share buttons on demand via ajax.
- Separate template listing retina webfont icons.
- 369 webfont icons from the newest version of font awesome.
- 500+ new retina webfont icons from IonIcons.
- Reorganized navigation sidebar menu for presentation of additional views.
- Organized javascript files into /vendor and /plugins
- Bootstrap Update – Updated to the latest version, v3.1.0.
- Error page templates now have CSS and JS self-contained.
- Upgraded plugins.
- Full IE 11 support
- Optimized javascript to be more efficient, compact and easier to work with.
- Many CSS optimizations and improvements in addition to bootstrap 3 upgrade
- Updated Documentation with more effective styling and content.
- Submenus! – A widely requested feature to easily create styled submenus in the left sidebar menu.
- Bootstrap Update – Updated to the latest version, v2.2.2.
- Updated Documentation.
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 multiple 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, 2012Initial Release
