diff --git a/css/jquery.uls.mobile.css b/css/jquery.uls.mobile.css
new file mode 100644
index 0000000..bf0275b
--- /dev/null
+++ b/css/jquery.uls.mobile.css
@@ -0,0 +1,319 @@
+@media only screen and (max-width: 767px) {
+
+	.uls-mobile.uls-menu {
+		width: 95%;
+		left: 2.5%;
+	}
+
+	.uls-mobile .uls-language-list {
+		-webkit-overflow-scrolling: touch;
+	}
+
+	.uls-mobile .uls-language-block {
+		padding-left: 15px !important;
+	}
+
+	.uls-mobile .uls-language-block ul {
+		min-height: 14em;
+	}
+
+	.uls-mobile .uls-language-block a {
+		font-size: 16px;
+		line-height: 1.7em;
+	}
+
+	.uls-mobile div.uls-region {
+		width: 33% !important;
+		float: left !important;
+	}
+
+	.uls-mobile div.map-block a,
+	.uls-mobile div.map-block {
+		opacity: 1 !important;
+	}
+
+	.uls-mobile .row {
+		width: auto;
+		min-width: 0;
+		margin-left: 0;
+		margin-right: 0;
+	}
+
+	.uls-mobile  .column, 
+	.uls-mobile .columns {
+		width: auto !important;
+		float: none;
+	}
+
+	.uls-mobile  .column:last-child,
+	.uls-mobile .columns:last-child {
+		float: none;
+	}
+	
+	.uls-mobile  [class*="column"] + [class*="column"]:last-child {
+		float: none;
+	}
+	
+	.uls-mobile  .column:before,
+	.uls-mobile .uls-mobile .columns:before,
+	.uls-mobile .column:after,
+	.columns:after {
+		content: "";
+		display: table;
+	}
+
+	.uls-mobile .column:after,
+	.uls-mobile .columns:after {
+		clear: both;
+	}
+
+	.uls-mobile .offset-by-one,
+	.uls-mobile .offset-by-two,
+	.uls-mobile .offset-by-three,
+	.uls-mobile .offset-by-four,
+	.uls-mobile .offset-by-five,
+	.uls-mobile .offset-by-six,
+	.uls-mobile .offset-by-seven,
+	.uls-mobile .offset-by-eight,
+	.uls-mobile .offset-by-nine,
+	.uls-mobile .offset-by-ten {
+		margin-left: 0 !important;
+	}
+
+	.uls-mobile  .push-two,
+	.uls-mobile .push-three,
+	.uls-mobile .push-four,
+	.uls-mobile .push-five,
+	.uls-mobile .push-six,
+	.uls-mobile .push-seven,
+	.uls-mobile .push-eight,
+	.uls-mobile .push-nine,
+	.uls-mobile .push-ten {
+		left: auto;
+	}
+
+	.uls-mobile  .pull-two,
+	.uls-mobile .pull-three,
+	.uls-mobile .pull-four,
+	.uls-mobile .pull-five,
+	.uls-mobile .pull-six,
+	.uls-mobile .pull-seven,
+	.uls-mobile .pull-eight,
+	.uls-mobile .pull-nine,
+	.uls-mobile .pull-ten {
+		right: auto;
+	}
+
+	/* Mobile 4-column Grid */
+	.uls-mobile  .row .mobile-one {
+		width: 25% !important;
+		float: left;
+		padding: 0 4px;
+	}
+
+	.uls-mobile .row .mobile-one:last-child {
+		float: right;
+	}
+
+	.uls-mobile .row.collapse .mobile-one {
+		padding: 0;
+	}
+
+	.uls-mobile  .row .mobile-two {
+		width: 50% !important;
+		float: left;
+		padding: 0 4px;
+	}
+
+	.uls-mobile .row .mobile-two:last-child {
+		float: right;
+	}
+
+	.uls-mobile  .row.collapse .mobile-two {
+		padding: 0;
+	}
+
+	.uls-mobile .row .mobile-three {
+		width: 75% !important;
+		float: left;
+		padding: 0 4px;
+	}
+
+	.uls-mobile .row .mobile-three:last-child {
+		float: right;
+	}
+
+	.uls-mobile .row.collapse .mobile-three {
+		padding: 0;
+	}
+
+	.uls-mobile .row .mobile-four {
+		width: 100% !important;
+		float: left;
+		padding: 0 4px;
+	}
+
+	.uls-mobile .row .mobile-four:last-child {
+		float: right;
+	}
+
+	.uls-mobile  .row.collapse .mobile-four {
+		padding: 0;
+	}
+
+	.uls-mobile  .push-one-mobile {
+		left: 25%;
+	}
+
+	.uls-mobile  .pull-one-mobile {
+		right: 25%;
+	}
+
+	.uls-mobile  .push-two-mobile {
+		left: 50%;
+	}
+
+	.uls-mobile  .pull-two-mobile {
+		right: 50%;
+	}
+
+	.uls-mobile  .push-three-mobile {
+		left: 75%;
+	}
+
+	.uls-mobile  .pull-three-mobile {
+		right: 75%;
+	}
+}
+
+/* Visibility Classes ---------------------- */
+/* Standard (large) display targeting */
+.uls-mobile .show-for-small,
+.uls-mobile .show-for-medium,
+.uls-mobile .show-for-medium-down,
+.uls-mobile .hide-for-large,
+.uls-mobile .hide-for-large-up,
+.uls-mobile .show-for-xlarge {
+	display: none !important;
+}
+
+.uls-mobile .hide-for-xlarge,
+.uls-mobile .show-for-large,
+.uls-mobile .show-for-large-up,
+.uls-mobile .hide-for-small,
+.uls-mobile .hide-for-medium,
+.uls-mobile .hide-for-medium-down {
+	display: block !important;
+}
+
+/* Very large display targeting */
+@media only screen and (min-width: 1441px) {
+
+	.uls-mobile .hide-for-small,
+	.uls-mobile .hide-for-medium,
+	.uls-mobile .hide-for-medium-down,
+	.hide-for-large, .show-for-large-up,
+	.show-for-xlarge {
+		display: block !important;
+	}
+
+	.show-for-small,
+	.uls-mobile .show-for-medium,
+	.uls-mobile .show-for-medium-down,
+	.uls-mobile .show-for-large,
+	.uls-mobile .hide-for-large-up,
+	.uls-mobile .hide-for-xlarge {
+		display: none !important;
+	}
+}
+/* Medium display targeting */
+@media only screen and (max-width: 1279px) and (min-width: 768px) {
+
+	.uls-mobile .hide-for-small,
+	.uls-mobile .show-for-medium,
+	.uls-mobile .show-for-medium-down,
+	.uls-mobile .hide-for-large,
+	.uls-mobile .hide-for-large-up,
+	.uls-mobile .hide-for-xlarge {
+		display: block !important;
+	}
+	
+	.uls-mobile .show-for-small,
+	.uls-mobile .hide-for-medium,
+	.uls-mobile .hide-for-medium-down,
+	.uls-mobile .show-for-large,
+	.uls-mobile .show-for-large-up,
+	.uls-mobile .show-for-xlarge {
+		display: none !important;
+	}
+}
+/* Small display targeting */
+@media only screen and (max-width: 767px) {
+
+	.uls-mobile .show-for-small,
+	.uls-mobile .hide-for-medium,
+	.uls-mobile .show-for-medium-down,
+	.uls-mobile .hide-for-large,
+	.uls-mobile .hide-for-large-up,
+	.uls-mobile .hide-for-xlarge {
+		display: block !important;
+	}
+	.uls-mobile .hide-for-small,
+	.uls-mobile .show-for-medium,
+	.uls-mobile .hide-for-medium-down,
+	.uls-mobile .show-for-large,
+	.uls-mobile .show-for-large-up,
+	.uls-mobile .show-for-xlarge {
+		display: none !important;
+	}
+}
+
+/* Orientation targeting */
+.uls-mobile .show-for-landscape,
+.uls-mobile .hide-for-portrait {
+	display: block !important;
+}
+
+.uls-mobile .hide-for-landscape,
+.uls-mobile .show-for-portrait {
+	display: none !important;
+}
+
+@media screen and (orientation: landscape) {
+	.uls-mobile .show-for-landscape,
+	.uls-mobile .hide-for-portrait {
+		display: block !important;
+	}
+	.uls-mobile .hide-for-landscape,
+	.uls-mobile .show-for-portrait {
+		display: none !important;
+	}
+}
+
+@media screen and (orientation: portrait) {
+	.uls-mobile .show-for-portrait,
+	.uls-mobile .hide-for-landscape {
+		display: block !important;
+	}
+	.uls-mobile .hide-for-portrait,
+	.uls-mobile .show-for-landscape {
+		display: none !important;
+	}
+}
+
+/* Touch-enabled device targeting */
+.uls-mobile .show-for-touch {
+	display: none !important;
+}
+
+.uls-mobile .hide-for-touch {
+	display: block !important;
+}
+
+.uls-mobile .touch .show-for-touch {
+	display: block !important;
+}
+
+.uls-mobile .touch .hide-for-touch {
+	display: none !important;
+}
\ No newline at end of file
diff --git a/examples/index-mobile.html b/examples/index-mobile.html
new file mode 100644
index 0000000..9871ca4
--- /dev/null
+++ b/examples/index-mobile.html
@@ -0,0 +1,61 @@
+<!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"/>
+		<meta name="viewport" content="width=320">
+		<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.mobile.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 I need to make afterwards. ULS API should be probably modified to allow optional classes and not force position:
+					$('.uls-menu').removeClass('uls-wide');
+					$('.uls-menu').addClass('uls-mobile');
+					$('.uls-menu').css('left',"2.5%")	
+				});
+			} );
+		</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>