diff --git a/css/jquery.uls.compact.css b/css/jquery.uls.compact.css
new file mode 100644
index 0000000..8abe528
--- /dev/null
+++ b/css/jquery.uls.compact.css
@@ -0,0 +1,44 @@
+.uls-compact .icon-close,
+.uls-compact .uls-title-region,
+.uls-compact .map-block {
+	display: none !important;
+}
+
+.uls-compact.uls-menu {
+	border-radius: 0;
+}
+
+.uls-compact .search {
+	background: white;
+	border-top: none;
+	padding: 0.8em 0;
+	border-bottom-width: 1px;
+	border-bottom-style: solid;
+	border-bottom-color: #DDD;
+}
+
+.uls-compact .filterinput,
+.uls-compact .filterinput:focus  {
+	background-color: transparent;
+	border: none;
+	box-shadow: none;
+	outline: none;
+	font-size: 18px;
+}
+
+.uls-compact .uls-language-list {
+	background: #FCFCFC;
+	height: 20em;
+}
+
+.uls-compact .search-label {
+	background-size: 25px;
+	height: 26px;
+	width: 26px;
+	float: right;
+	opacity: 0.8;
+}
+
+.uls-compact .languagefilter-clear {
+	margin-left: 0;
+}
diff --git a/examples/index-compact.html b/examples/index-compact.html
new file mode 100644
index 0000000..556d707
--- /dev/null
+++ b/examples/index-compact.html
@@ -0,0 +1,66 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+	<head>
+		<meta charset="utf-8"/>
+
+		<!--
+		Always force latest IE rendering engine (even in intranet) & Chrome Frame
+		Remove this if you use the .htaccess
+		-->
+		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
+
+		<title>Universal Language Selector</title>
+		<!-- <link rel="shortcut icon" href="/favicon.ico"/> -->
+		<!-- <link rel="apple-touch-icon" href="/apple-touch-icon.png"/> -->
+		<!-- <meta name="description" content=""/> -->
+		<meta name="author" content="Santhosh Thottingal"/>
+		<link href="../css/jquery.uls.css" rel="stylesheet"/>
+		<link href="../css/jquery.uls.grid.css" rel="stylesheet"/>
+		<link href="../css/jquery.uls.lcd.css" rel="stylesheet"/>
+		<link href="../css/jquery.uls.compact.css" rel="stylesheet"/>
+		<!-- demo -->
+		<link href="resources/demo.css" rel="stylesheet"/>
+		<!-- Libs -->
+		<script src="resources/jquery.js"></script>
+		<!-- Source -->
+		<script src="../src/jquery.uls.data.js"></script>
+		<script src="../src/jquery.uls.data.utils.js"></script>
+		<script src="../src/jquery.uls.lcd.js"></script>
+		<script src="../src/jquery.uls.languagefilter.js"></script>
+		<script src="../src/jquery.uls.regionfilter.js"></script>
+		<script src="../src/jquery.uls.core.js"></script>
+		<script>
+			$( document ).ready( function() {
+				$( '.uls-trigger' ).uls( {
+					onSelect : function( language ) {
+						var languageName = $.uls.data.getAutonym( language );
+						$( '.uls-trigger' ).text( languageName );
+					},
+					quickList: ['en', 'hi', 'he', 'ml', 'ta', 'fr'] //FIXME
+				} );
+				$( '.uls-trigger' ).click( function () {
+					//Hacks to include optional classes and make the dialog close when clicking outside:
+					$( '.uls-menu' ).addClass( 'uls-compact' );
+					$('html').click(function() {
+					 	$('.uls-menu').hide();
+					});
+					
+					$('.uls-menu').click(function(event){
+					    event.stopPropagation();
+					});
+				});
+			} );
+		</script>
+	</head>
+
+	<body>
+		<div class="navbar navbar-fixed-top">
+			<span class="active uls-trigger">Select Language</span>
+			<h1>Universal Language Selector</h1>
+			<p>
+				Demonstration of jQuery plugin
+			</p>
+		</div>
+		<div class="container"></div>
+	</body>
+</html>
