teamrevox/Gemfile Secret

## readme.md

      
    Raw
  

              readme.md
            
          
    Guide to integrating Webarch v2.8 with Rails


Create a new rails project


Make a new folder name "webarch" under \vendor folder


Download the latest package from themeforest


Once you extract it go to the folder \barebone copy everything inside "webarch" folder and paste in \vendor\webarch It will look like this \vendor\webarch\css , \vendor\webarch\js etc


Copy everything inside \barebone\assets\img to \app\assets\images


Open config/application.rb and add the following inside of class Application < Rails::Application:
# Add folders to Asset Pipeline available paths
# Note that app/assets takes precedence, and will mask corresponding paths in lib and vendor
config.assets.paths << File.join(Rails.root, '/vendor/webarch')


Under app/assets/stylesheets create a new file called assets-pipeline.css.erb then copy and paste this code into it.


Your app/assets/stylesheets/application.css should look something like this.


Your app/assets/javascripts/application.js should look something like this.


Add the following code to your GEM file like this. Do not replace it.


Run bundle to install any gems, then restart/start your server to take in any changes to


Well Done! Thats it!


## application.css
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
 * or vendor/assets/stylesheets of plugins, if any, can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any styles
 * defined in the other CSS/SCSS files in this directory. It is generally better to create a new
 * file per style scope.
 *
 * BEGIN VENDOR CSS FOR WEBARCH
 *= require plugins/pace/pace-theme-flash
 *= require plugins/jquery-scrollbar/jquery.scrollbar
 *= require plugins/boostrapv3/css/bootstrap.min
 *= require plugins/font-awesome/css/font-awesome
 *= require css/animate.min
 *
 * BEGIN CORE TEMPLATE CSS FOR WEBARCH
 *= require css/style
 *= require css/responsive
 *= require css/responsive
 *= require css/custom-icon-set
 *
 * BEGIN WEBARCH ASSET PIPELINE OVERRIDE
 *= require ./assets-pipeline
 * I prefer to list stylesheets in a specific order, so I comment out require_tree .
 **** require_tree .
 */

## application.html.erb
<!DOCTYPE html>
<html>
<head>
	<title>Title Goes Here</title>
	<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
	<meta content="" name="description" />
	<meta content="" name="author" />
 	<%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' => true %>
 	<%= csrf_meta_tags %>

    <%= yield :head %>
</head>
<body class="">
<!-- BEGIN HEADER -->
<div class="header navbar navbar-inverse">
	<!-- BEGIN TOP NAVIGATION BAR -->
	<div class="navbar-inner">
		<!-- BEGIN NAVIGATION HEADER -->
		<div class="header-seperation">
			<!-- BEGIN MOBILE HEADER -->
			<ul class="nav pull-left notifcation-center" id="main-menu-toggle-wrapper" style="display:none">
				<li class="dropdown">
					<a id="main-menu-toggle" href="#main-menu" class="">
						<div class="iconset top-menu-toggle-white"></div>
					</a>
				</li>
			</ul>
			<!-- END MOBILE HEADER -->
			<!-- BEGIN LOGO -->
			<a href="#">
				<img src="<%= image_path('logo.png') %>" class="logo" alt="" data-src="<%= image_path('logo.png') %>" data-src-retina="<%= image_path('logo2x.png') %>" width="106" height="21"/>
			</a>
			<!-- END LOGO -->
			<!-- BEGIN LOGO NAV BUTTONS -->
			<ul class="nav pull-right notifcation-center">
				<li class="dropdown" id="header_task_bar">
					<a href="#" class="dropdown-toggle active" data-toggle="">
						<div class="iconset top-home"></div>
					</a>
				</li>
				<li class="dropdown" id="header_inbox_bar">
					<a href="#" class="dropdown-toggle">
						<div class="iconset top-messages"></div>
						<span class="badge" id="msgs-badge">2</span>
						</a>
				</li>
				<!-- BEGIN MOBILE CHAT TOGGLER -->
				<li class="dropdown" id="portrait-chat-toggler" style="display:none">
					<a href="#sidr" class="chat-menu-toggle">
						<div class="iconset top-chat-white"></div>
					</a>
				</li>
				<!-- END MOBILE CHAT TOGGLER -->
			</ul>
			<!-- END LOGO NAV BUTTONS -->
		</div>
		<!-- END NAVIGATION HEADER -->
		<!-- BEGIN CONTENT HEADER -->
		<div class="header-quick-nav">
			<!-- BEGIN HEADER LEFT SIDE SECTION -->
			<div class="pull-left">
				<!-- BEGIN SLIM NAVIGATION TOGGLE -->
				<ul class="nav quick-section">
					<li class="quicklinks">
						<a href="#" class="" id="layout-condensed-toggle">
							<div class="iconset top-menu-toggle-dark"></div>
						</a>
					</li>
				</ul>
				<!-- END SLIM NAVIGATION TOGGLE -->
				<!-- BEGIN HEADER QUICK LINKS -->
				<ul class="nav quick-section">
					<li class="quicklinks"><a href="#" class=""><div class="iconset top-reload"></div></a></li>
					<li class="quicklinks"><span class="h-seperate"></span></li>
					<li class="quicklinks"><a href="#" class=""><div class="iconset top-tiles"></div></a></li>
					<!-- BEGIN SEARCH BOX -->
					<li class="m-r-10 input-prepend inside search-form no-boarder">
						<span class="add-on"><span class="iconset top-search"></span></span>
						<input name="" type="text" class="no-boarder" placeholder="Search Dashboard" style="width:250px;">
					</li>
					<!-- END SEARCH BOX -->
				</ul>
				<!-- BEGIN HEADER QUICK LINKS -->
			</div>
			<!-- END HEADER LEFT SIDE SECTION -->
			<!-- BEGIN HEADER RIGHT SIDE SECTION -->
			<div class="pull-right">
				<div class="chat-toggler">
					<!-- BEGIN NOTIFICATION CENTER -->
					<a href="#" class="dropdown-toggle" id="my-task-list" data-placement="bottom" data-content="" data-toggle="dropdown" data-original-title="Notifications">
						<div class="user-details">
							<div class="username">
								<span class="badge badge-important">3</span>&nbsp;John<span class="bold">&nbsp;Smith</span>
							</div>
						</div>
						<div class="iconset top-down-arrow"></div>
					</a>
					<div id="notification-list" style="display:none">
						<div style="width:300px">
							<!-- BEGIN NOTIFICATION MESSAGE -->
							<div class="notification-messages info">
								<div class="user-profile">
									<img src="<%= image_path('profiles/d.jpg') %>" alt="" data-src="<%= image_path('profiles/d.jpg') %>" data-src-retina="<%= image_path('profiles/d2x.jpg') %>" width="35" height="35">
								</div>
								<div class="message-wrapper">
									<div class="heading">Title of Notification</div>
									<div class="description">Description...</div>
									<div class="date pull-left">A min ago</div>
								</div>
								<div class="clearfix"></div>
							</div>
							<!-- END NOTIFICATION MESSAGE -->
						</div>
					</div>
					<!-- END NOTIFICATION CENTER -->
					<!-- BEGIN PROFILE PICTURE -->
					<div class="profile-pic">
						<img src="<%= image_path('profiles/avatar_small.jpg') %>" alt="" data-src="<%= image_path('profiles/avatar_small.jpg') %>" data-src-retina="<%= image_path('profiles/avatar_small2x.jpg') %>" width="35" height="35" />
					</div>
					<!-- END PROFILE PICTURE -->
				</div>
				<!-- BEGIN HEADER NAV BUTTONS -->
				<ul class="nav quick-section">
					<!-- BEGIN SETTINGS -->
					<li class="quicklinks">
						<a data-toggle="dropdown" class="dropdown-toggle pull-right" href="#" id="user-options">
							<div class="iconset top-settings-dark"></div>
						</a>
						<ul class="dropdown-menu pull-right" role="menu" aria-labelledby="user-options">
							<li><a href="#">Normal Link</a></li>
							<li><a href="#">Badge Link&nbsp;&nbsp;<span class="badge badge-important animated bounceIn">2</span></a></li>
							<li class="divider"></li>
							<li><a href="#"><i class="fa fa-power-off"></i>&nbsp;&nbsp;Separated Link</a></li>
						</ul>
					</li>
					<!-- END SETTINGS -->
					<li class="quicklinks"><span class="h-seperate"></span></li>
					<!-- BEGIN CHAT SIDEBAR TOGGLE -->
					<li class="quicklinks">
						<a id="chat-menu-toggle" href="#sidr" class="chat-menu-toggle">
							<div class="iconset top-chat-dark"><span class="badge badge-important hide" id="chat-message-count">1</span></div>
						</a>
						<!-- BEGIN OPTIONAL RECENT CHAT POP UP NOTIFICATION -->
						<div class="simple-chat-popup chat-menu-toggle hide">
							<div class="simple-chat-popup-arrow"></div>
							<div class="simple-chat-popup-inner">
								<div style="width:100px">
									<div class="semi-bold">Name</div>
									<div class="message">Message...</div>
								</div>
							</div>
						</div>
						<!-- END OPTIONAL RECENT CHAT POP UP NOTIFICATION -->
					</li>
					<!-- END CHAT SIDEBAR TOGGLE -->
				</ul>
				<!-- END HEADER NAV BUTTONS -->
			</div>
			<!-- END HEADER RIGHT SIDE SECTION -->
		</div>
		<!-- END CONTENT HEADER -->
	</div>
	<!-- END TOP NAVIGATION BAR -->
</div>
<!-- END HEADER -->

<!-- BEGIN CONTENT -->
<div class="page-container row-fluid">
	<!-- BEGIN SIDEBAR -->
	<!-- BEGIN MENU -->
	<div class="page-sidebar" id="main-menu">
		  <div class="page-sidebar-wrapper scrollbar-dynamic" id="main-menu-wrapper">
		<!-- BEGIN MINI-PROFILE -->
		<div class="user-info-wrapper">
			<div class="profile-wrapper">
				<img src="<%= image_path('profiles/avatar.jpg') %>" alt="" data-src="<%= image_path('profiles/avatar.jpg') %>" data-src-retina="<%= image_path('profiles/avatar2x.jpg') %>" width="69" height="69" />
			</div>
			<div class="user-info">
				<div class="greeting">Welcome</div>
				<div class="username">John <span class="semi-bold">Smith</span></div>
				<div class="status">Status<a href="#"><div class="status-icon green"></div>Online</a></div>
			</div>
		</div>
		<!-- END MINI-PROFILE -->
		<!-- BEGIN SIDEBAR MENU -->
		<p class="menu-title">BROWSE<span class="pull-right"><a href="javascript:;"><i class="fa fa-refresh"></i></a></span></p>
		<ul>
			<!-- BEGIN SELECTED LINK -->
			<li class="start active">
				<a href="#">
					<i class="icon-custom-home"></i>
					<span class="title">Link 1</span>
					<span class="selected"></span>
					<span class="badge badge-important pull-right">5</span>
				</a>
			</li>
			<!-- END SELECTED LINK -->
			<!-- BEGIN BADGE LINK -->
			<li class="">
				<a href="#">
					<i class="fa fa-envelope"></i>
					<span class="title">Link 2</span>
					<span class="badge badge-disable pull-right">203</span>
				</a>
			</li>
			<!-- END BADGE LINK -->
			<!-- BEGIN SINGLE LINK -->
			<li class="">
				<a href="#">
					<i class="fa fa-flag"></i>
					<span class="title">Link 3</span>
				</a>
			</li>
			<!-- END SINGLE LINK -->
			<!-- BEGIN ONE LEVEL MENU -->
			<li class="">
				<a href="javascript:;">
					<i class="icon-custom-ui"></i>
					<span class="title">Link 4</span>
					<span class="arrow"></span>
				</a>
				<ul class="sub-menu">
					<li><a href="#">Sub Link 1</a></li>
				</ul>
			</li>
			<!-- END ONE LEVEL MENU -->
			<!-- BEGIN TWO LEVEL MENU -->
			<li class="">
				<a href="javascript:;">
					<i class="fa fa-folder-open"></i>
					<span class="title">Link 5</span>
					<span class="arrow"></span>
				</a>
				<ul class="sub-menu">
					<li><a href="javascript:;">Sub Link 1</a></li>
					<li>
						<a href="javascript:;"><span class="title">Sub Link 2</span><span class="arrow "></span></a>
						<ul class="sub-menu">
							<li><a href="javascript:;">Sub Link 1</a></li>
						</ul>
					</li>
				</ul>
			</li>
			<!-- END TWO LEVEL MENU -->
		</ul>
		<!-- END SIDEBAR MENU -->
		<!-- BEGIN SIDEBAR WIDGETS -->
		<div class="side-bar-widgets">
			<!-- BEGIN FOLDER WIDGET -->
			<p class="menu-title">FOLDER<span class="pull-right"><a href="#" class="create-folder"><i class="icon-plus"></i></a></span></p>
			<ul class="folders">
				<li><a href="#"><div class="status-icon green"></div>Task 1</a></li>
				<!-- BEGIN HIDDEN INPUT BOX (FOR ADD FOLDER LINK) -->
				<li class="folder-input" style="display:none">
					<input type="text" placeholder="Name of folder" class="no-boarder folder-name" name="" id="folder-name">
				</li>
				<!-- END HIDDEN INPUT BOX (FOR ADD FOLDER LINK) -->
			</ul>
			<!-- END FOLDER WIDGET -->
			<!-- BEGIN PROJECTS WIDGET -->
			<p class="menu-title">PROJECTS</p>
			<!-- BEGIN EXAMPLE 1 -->
			<div class="status-widget">
				<div class="status-widget-wrapper">
					<div class="title">Project Title<a href="#" class="remove-widget"><i class="icon-custom-cross"></i></a></div>
					<p>Project Description</p>
				</div>
			</div>
			<!-- END EXAMPLE 1 -->
			<!-- END PROJECTS WIDGET -->
		</div>
		<div class="clearfix"></div>
		<!-- END SIDEBAR WIDGETS -->
	</div>
	</div>
	<!-- BEGIN SCROLL UP HOVER -->
	<a href="#" class="scrollup">Scroll</a>
	<!-- END SCROLL UP HOVER -->
	<!-- END MENU -->
	<!-- BEGIN SIDEBAR FOOTER WIDGET -->
	<div class="footer-widget">
		<div class="progress transparent progress-small no-radius no-margin">
			<div data-percentage="79%" class="progress-bar progress-bar-success animate-progress-bar"></div>
		</div>
		<div class="pull-right">
			<div class="details-status">
				<span data-animation-duration="560" data-value="86" class="animate-number"></span>%
			</div>
			<a href="#"><i class="fa fa-power-off"></i></a>
		</div>
	</div>
	<!-- END SIDEBAR FOOTER WIDGET -->
	<!-- END SIDEBAR -->
	<!-- BEGIN PAGE CONTAINER-->
	<div class="page-content">
		<div class="content">
			<%= yield %>
		</div>
	</div>
	<!-- END PAGE CONTAINER -->
<!-- BEGIN CHAT -->
<div class="chat-window-wrapper">
	<div id="main-chat-wrapper" class="inner-content">
		<div class="chat-window-wrapper scroller scrollbar-dynamic" id="chat-users">
			<!-- BEGIN CHAT HEADER -->
			<div class="chat-header">
				<!-- BEGIN CHAT SEARCH BAR -->
				<div class="pull-left">
					<input type="text" placeholder="search">
				</div>
				<!-- END CHAT SEARCH BAR -->
				<!-- BEGIN CHAT QUICKLINKS -->
				<div class="pull-right">
					<a href="#" class=""><div class="iconset top-settings-dark"></div></a>
				</div>
				<!-- END CHAT QUICKLINKS -->
			</div>
			<!-- END CHAT HEADER -->
			<!-- BEGIN GROUP WIDGET -->
			<div class="side-widget">
				<div class="side-widget-title">group chats</div>
				<div class="side-widget-content">
					<div id="groups-list">
						<ul class="groups">
							<li><a href="#"><div class="status-icon green"></div>Group Chat 1</a></li>
						</ul>
					</div>
				</div>
			</div>
			<!-- END GROUP WIDGET -->
			<!-- BEGIN FAVORITES WIDGET -->
			<div class="side-widget">
				<div class="side-widget-title">favorites</div>
				<div class="side-widget-content">
					<!-- BEGIN SAMPLE CHAT -->
					<div class="user-details-wrapper active" data-chat-status="online" data-chat-user-pic="<%= image_path('profiles/d.jpg') %>" data-chat-user-pic-retina="<%= image_path('profiles/d2x.jpg') %>" data-user-name="Jane Smith">
						<!-- BEGIN PROFILE PIC -->
						<div class="user-profile">
							<img src="<%= image_path('profiles/d.jpg') %>" alt="" data-src="<%= image_path('profiles/d.jpg') %>" data-src-retina="<%= image_path('profiles/d2x.jpg') %>" width="35" height="35">
						</div>
						<!-- END PROFILE PIC -->
						<!-- BEGIN MESSAGE -->
						<div class="user-details">
								<div class="user-name">Jane Smith</div>
								<div class="user-more">Message...</div>
							</div>
						<!-- END MESSAGE -->
						<!-- BEGIN MESSAGES BADGE -->
						<div class="user-details-status-wrapper">
								<span class="badge badge-important">3</span>
							</div>
						<!-- END MESSAGES BADGE -->
						<!-- BEGIN STATUS -->
						<div class="user-details-count-wrapper">
								<div class="status-icon green"></div>
							</div>
						<!-- END STATUS -->
						<div class="clearfix"></div>
					</div>
					<!-- END SAMPLE CHAT -->
				</div>
			</div>
			<!-- END FAVORITES WIDGET -->
			<!-- BEGIN MORE FRIENDS WIDGET -->
			<div class="side-widget">
				<div class="side-widget-title">more friends</div>
				<div class="side-widget-content" id="friends-list">
					<!-- BEGIN SAMPLE CHAT -->
					<div class="user-details-wrapper active" data-chat-status="online" data-chat-user-pic="<%= image_path('profiles/d.jpg') %>" data-chat-user-pic-retina="<%= image_path('profiles/d2x.jpg') %>" data-user-name="Jane Smith">
						<!-- BEGIN PROFILE PIC -->
						<div class="user-profile">
							<img src="<%= image_path('profiles/d.jpg') %>" alt="" data-src="<%= image_path('profiles/d.jpg') %>" data-src-retina="<%= image_path('profiles/d2x.jpg') %>" width="35" height="35">
						</div>
						<!-- END PROFILE PIC -->
						<!-- BEGIN MESSAGE -->
						<div class="user-details">
							<div class="user-name">Jane Smith</div>
							<div class="user-more">Message...</div>
						</div>
						<!-- END MESSAGE -->
						<!-- BEGIN MESSAGES BADGE -->
						<div class="user-details-status-wrapper">
							<span class="badge badge-important">3</span>
						</div>
						<!-- END MESSAGES BADGE -->
						<!-- BEGIN STATUS -->
						<div class="user-details-count-wrapper">
							<div class="status-icon green"></div>
						</div>
						<!-- END STATUS -->
						<div class="clearfix"></div>
					</div>
					<!-- END SAMPLE CHAT -->
				</div>
			</div>
			<!-- END MORE FRIENDS WIDGET -->
		</div>
		<!-- BEGIN DUMMY CHAT CONVERSATION -->
		<div class="chat-window-wrapper" id="messages-wrapper" style="display:none">
			<!-- BEGIN CHAT HEADER BAR -->
			<div class="chat-header">
				<!-- BEGIN SEARCH BAR -->
				<div class="pull-left">
					<input type="text" placeholder="search">
				</div>
				<!-- END SEARCH BAR -->
				<!-- BEGIN CLOSE TOGGLE -->
				<div class="pull-right">
					<a href="#" class=""><div class="iconset top-settings-dark"></div></a>
				</div>
				<!-- END CLOSE TOGGLE -->
			</div>
			<div class="clearfix"></div>
			<!-- END CHAT HEADER BAR -->
			<!-- BEGIN CHAT BODY -->
			<div class="chat-messages-header">
				<div class="status online"></div>
				<span class="semi-bold">Jane Smith(Typing..)</span>
				<a href="#" class="chat-back"><i class="icon-custom-cross"></i></a>
			</div>
			<!-- BEGIN CHAT MESSAGES CONTAINER -->
			<div class="chat-messages scrollbar-dynamic clearfix">
				<!-- BEGIN TIME STAMP EXAMPLE -->
				<div class="sent_time">Yesterday 11:25pm</div>
				<!-- END TIME STAMP EXAMPLE -->
				<!-- BEGIN EXAMPLE CHAT MESSAGE -->
				<div class="user-details-wrapper">
					<!-- BEGIN MESSENGER PROFILE -->
					<div class="user-profile">
						<img src="<%= image_path('profiles/d.jpg') %>" alt="" data-src="<%= image_path('profiles/d.jpg') %>" data-src-retina="<%= image_path('profiles/d2x.jpg') %>" width="35" height="35">
					</div>
					<!-- END MESSENGER PROFILE -->
					<!-- BEGIN MESSENGER MESSAGE -->
					<div class="user-details">
						<div class="bubble">Hello, You there?</div>
					</div>
					<!-- END MESSENGER MESSAGE -->
					<div class="clearfix"></div>
					<!-- BEGIN TIMESTAMP ON CLICK TOGGLE -->
					<div class="sent_time off">Yesterday 11:25pm</div>
					<!-- END TIMESTAMP ON CLICK TOGGLE -->
				</div>
				<!-- END EXAMPLE CHAT MESSAGE -->
				<!-- BEGIN TIME STAMP EXAMPLE -->
				<div class="sent_time">Today 11:25pm</div>
				<!-- BEGIN TIME STAMP EXAMPLE -->
				<!-- BEGIN EXAMPLE CHAT MESSAGE (FROM SELF) -->
				<div class="user-details-wrapper pull-right">
					<!-- BEGIN MESSENGER MESSAGE -->
					<div class="user-details">
						<div class="bubble sender">Let me know when you free</div>
					</div>
					<!-- END MESSENGER MESSAGE -->
					<div class="clearfix"></div>
					<!-- BEGIN TIMESTAMP ON CLICK TOGGLE -->
					<div class="sent_time off">Sent On Tue, 2:45pm</div>
					<!-- END TIMESTAMP ON CLICK TOGGLE -->
				</div>
				<!-- END EXAMPLE CHAT MESSAGE (FROM SELF) -->
			</div>
			<!-- END CHAT MESSAGES CONTAINER -->
		</div>
		<div class="chat-input-wrapper" style="display:none">
			<textarea id="chat-message-input" rows="1" placeholder="Type your message"></textarea>
		</div>
		<div class="clearfix"></div>
		<!-- END DUMMY CHAT CONVERSATION -->
	</div>
</div>
<!-- END CHAT -->
</div>
<!-- END CONTENT -->
<!-- JS at bottom of page to improve load time, and only loaded once with 'data-turbolinks-eval' == false  -->
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true, 'data-turbolinks-eval' => false %>

</body>
</html>

## application.js
// This is a manifest file that'll be compiled into application.js, which will include all the files
// listed below.
//
// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts,
// or vendor/assets/javascripts of plugins, if any, can be referenced here using a relative path.
//
// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
// compiled file.
//
// Read Sprockets README (https://github.com/sstephenson/sprockets#sprockets-directives) for details
// about supported directives.
//

// BEGIN VENDOR JS FOR WEBARCH (plus add in jquery.turbolinks)
//= require plugins/pace/pace.min
//= require plugins/jquery-1.8.3.min
//= require jquery_ujs
 //= require plugins/boostrapv3/js/bootstrap.min
 //= require plugins/breakpoints
 //= require plugins/jquery-unveil/jquery.unveil.min
 //= require plugins/jquery-block-ui/jqueryblockui
 //= require plugins/jquery-scrollbar/jquery.scrollbar.min
 //= require plugins/jquery-numberAnimate/jquery.animateNumbers

// BEGIN CORE TEMPLATE JS FOR WEBARCH
//= require js/core
//= require js/chat

//  I prefer to list scripts in a specific order, so I comment out require_tree .
// require_tree .
//= require turbolinks

## assets-pipeline.css.erb
.iconset {
  background: url(<%= asset_path 'icon/top-tray.png' %>) no-repeat;
  position: relative;
  top: 1px;
}

.scrollup {
  background: url(<%= asset_path 'pullup.png' %>) no-repeat;
}

.status-icon {
  background: url(<%= asset_path 'icon/status.png' %>) no-repeat;
}

@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 200/100), only screen and (min-device-pixel-ratio: 2) {
  .grid.simple .grid-title .tools a {
    background: url(<%= asset_path 'icon/portlet-tray-2x.png' %>);
    background-size: 199px 57px;
  }
  .tiles .controller a {
    position: relative;
    background: url(<%= asset_path 'icon/portlet-tray-2x.png' %>);
    background-size: 199px 57px;
  }
  .widget-item .controller a {
    position: relative;
    background: url(<%= asset_path 'icon/portlet-tray-2x.png' %>);
    background-size: 199px 57px;
  }
  .iconset {
    background: url(<%= asset_path 'icon/top-trayx2.png' %>) no-repeat;
    background-size: 394px 29px;
  }
  .status-icon {
    background: url(<%= asset_path 'icon/status2x.png' %>);
    background-size: 79px 16px;
  }
  .scrollup {
    background: url(<%= asset_path 'icon/pullup2x.png' %>);
    background-size: 57px 27px;
  }
  .alert .close {
    background: url(<%= asset_path 'icon/noti-cross-2x.png' %>) no-repeat scroll 0 0 transparent;
    background-position: -9px -10px;
    width: 10px;
    height: 9px;
    position: relative;
    opacity: 0.8;
    background-size: 114px 29px;
  }
}

## Gemfile
# Gems for twitter LESS -> CSS and JS support
gem 'execjs'
gem 'therubyracer'
gem "less-rails"
	/*
	* This is a manifest file that'll be compiled into application.css, which will include all the files
	* listed below.
	*
	* Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
	* or vendor/assets/stylesheets of plugins, if any, can be referenced here using a relative path.
	*
	* You're free to add application-wide styles to this file and they'll appear at the bottom of the
	* compiled file so the styles you add here take precedence over styles defined in any styles
	* defined in the other CSS/SCSS files in this directory. It is generally better to create a new
	* file per style scope.
	*
	* BEGIN VENDOR CSS FOR WEBARCH
	*= require plugins/pace/pace-theme-flash
	*= require plugins/jquery-scrollbar/jquery.scrollbar
	*= require plugins/boostrapv3/css/bootstrap.min
	*= require plugins/font-awesome/css/font-awesome
	*= require css/animate.min
	*
	* BEGIN CORE TEMPLATE CSS FOR WEBARCH
	*= require css/style
	*= require css/responsive
	*= require css/responsive
	*= require css/custom-icon-set
	*
	* BEGIN WEBARCH ASSET PIPELINE OVERRIDE
	*= require ./assets-pipeline
	* I prefer to list stylesheets in a specific order, so I comment out require_tree .
	**** require_tree .
	*/
	<!DOCTYPE html>
	<html>
	<head>
	<title>Title Goes Here</title>
	<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
	<meta content="" name="description" />
	<meta content="" name="author" />
	<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>
	<%= csrf_meta_tags %>

	<%= yield :head %>
	</head>
	<body class="">
	<!-- BEGIN HEADER -->
	<div class="header navbar navbar-inverse">
	<!-- BEGIN TOP NAVIGATION BAR -->
	<div class="navbar-inner">
	<!-- BEGIN NAVIGATION HEADER -->
	<div class="header-seperation">
	<!-- BEGIN MOBILE HEADER -->
	<ul class="nav pull-left notifcation-center" id="main-menu-toggle-wrapper" style="display:none">
	<li class="dropdown">
	<a id="main-menu-toggle" href="#main-menu" class="">
	<div class="iconset top-menu-toggle-white"></div>
	</a>
	</li>
	</ul>
	<!-- END MOBILE HEADER -->
	<!-- BEGIN LOGO -->
	<a href="#">
	<img src="<%= image_path('logo.png') %>" class="logo" alt="" data-src="<%= image_path('logo.png') %>" data-src-retina="<%= image_path('logo2x.png') %>" width="106" height="21"/>
	</a>
	<!-- END LOGO -->
	<!-- BEGIN LOGO NAV BUTTONS -->
	<ul class="nav pull-right notifcation-center">
	<li class="dropdown" id="header_task_bar">
	<a href="#" class="dropdown-toggle active" data-toggle="">
	<div class="iconset top-home"></div>
	</a>
	</li>
	<li class="dropdown" id="header_inbox_bar">
	<a href="#" class="dropdown-toggle">
	<div class="iconset top-messages"></div>
	<span class="badge" id="msgs-badge">2</span>
	</a>
	</li>
	<!-- BEGIN MOBILE CHAT TOGGLER -->
	<li class="dropdown" id="portrait-chat-toggler" style="display:none">
	<a href="#sidr" class="chat-menu-toggle">
	<div class="iconset top-chat-white"></div>
	</a>
	</li>
	<!-- END MOBILE CHAT TOGGLER -->
	</ul>
	<!-- END LOGO NAV BUTTONS -->
	</div>
	<!-- END NAVIGATION HEADER -->
	<!-- BEGIN CONTENT HEADER -->
	<div class="header-quick-nav">
	<!-- BEGIN HEADER LEFT SIDE SECTION -->
	<div class="pull-left">
	<!-- BEGIN SLIM NAVIGATION TOGGLE -->
	<ul class="nav quick-section">
	<li class="quicklinks">
	<a href="#" class="" id="layout-condensed-toggle">
	<div class="iconset top-menu-toggle-dark"></div>
	</a>
	</li>
	</ul>
	<!-- END SLIM NAVIGATION TOGGLE -->
	<!-- BEGIN HEADER QUICK LINKS -->
	<ul class="nav quick-section">
	<li class="quicklinks"><a href="#" class=""><div class="iconset top-reload"></div></a></li>
	<li class="quicklinks"><span class="h-seperate"></span></li>
	<li class="quicklinks"><a href="#" class=""><div class="iconset top-tiles"></div></a></li>
	<!-- BEGIN SEARCH BOX -->
	<li class="m-r-10 input-prepend inside search-form no-boarder">
	<span class="add-on"><span class="iconset top-search"></span></span>
	<input name="" type="text" class="no-boarder" placeholder="Search Dashboard" style="width:250px;">
	</li>
	<!-- END SEARCH BOX -->
	</ul>
	<!-- BEGIN HEADER QUICK LINKS -->
	</div>
	<!-- END HEADER LEFT SIDE SECTION -->
	<!-- BEGIN HEADER RIGHT SIDE SECTION -->
	<div class="pull-right">
	<div class="chat-toggler">
	<!-- BEGIN NOTIFICATION CENTER -->
	<a href="#" class="dropdown-toggle" id="my-task-list" data-placement="bottom" data-content="" data-toggle="dropdown" data-original-title="Notifications">
	<div class="user-details">
	<div class="username">
	<span class="badge badge-important">3</span> John<span class="bold"> Smith</span>
	</div>
	</div>
	<div class="iconset top-down-arrow"></div>
	</a>
	<div id="notification-list" style="display:none">
	<div style="width:300px">
	<!-- BEGIN NOTIFICATION MESSAGE -->
	<div class="notification-messages info">
	<div class="user-profile">
	<img src="<%= image_path('profiles/d.jpg') %>" alt="" data-src="<%= image_path('profiles/d.jpg') %>" data-src-retina="<%= image_path('profiles/d2x.jpg') %>" width="35" height="35">
	</div>
	<div class="message-wrapper">
	<div class="heading">Title of Notification</div>
	<div class="description">Description...</div>
	<div class="date pull-left">A min ago</div>
	</div>
	<div class="clearfix"></div>
	</div>
	<!-- END NOTIFICATION MESSAGE -->
	</div>
	</div>
	<!-- END NOTIFICATION CENTER -->
	<!-- BEGIN PROFILE PICTURE -->
	<div class="profile-pic">
	<img src="<%= image_path('profiles/avatar_small.jpg') %>" alt="" data-src="<%= image_path('profiles/avatar_small.jpg') %>" data-src-retina="<%= image_path('profiles/avatar_small2x.jpg') %>" width="35" height="35" />
	</div>
	<!-- END PROFILE PICTURE -->
	</div>
	<!-- BEGIN HEADER NAV BUTTONS -->
	<ul class="nav quick-section">
	<!-- BEGIN SETTINGS -->
	<li class="quicklinks">
	<a data-toggle="dropdown" class="dropdown-toggle pull-right" href="#" id="user-options">
	<div class="iconset top-settings-dark"></div>
	</a>
	<ul class="dropdown-menu pull-right" role="menu" aria-labelledby="user-options">
	<li><a href="#">Normal Link</a></li>
	<li><a href="#">Badge Link  <span class="badge badge-important animated bounceIn">2</span></a></li>
	<li class="divider"></li>
	<li><a href="#"><i class="fa fa-power-off"></i>  Separated Link</a></li>
	</ul>
	</li>
	<!-- END SETTINGS -->
	<li class="quicklinks"><span class="h-seperate"></span></li>
	<!-- BEGIN CHAT SIDEBAR TOGGLE -->
	<li class="quicklinks">
	<a id="chat-menu-toggle" href="#sidr" class="chat-menu-toggle">
	<div class="iconset top-chat-dark"><span class="badge badge-important hide" id="chat-message-count">1</span></div>
	</a>
	<!-- BEGIN OPTIONAL RECENT CHAT POP UP NOTIFICATION -->
	<div class="simple-chat-popup chat-menu-toggle hide">
	<div class="simple-chat-popup-arrow"></div>
	<div class="simple-chat-popup-inner">
	<div style="width:100px">
	<div class="semi-bold">Name</div>
	<div class="message">Message...</div>
	</div>
	</div>
	</div>
	<!-- END OPTIONAL RECENT CHAT POP UP NOTIFICATION -->
	</li>
	<!-- END CHAT SIDEBAR TOGGLE -->
	</ul>
	<!-- END HEADER NAV BUTTONS -->
	</div>
	<!-- END HEADER RIGHT SIDE SECTION -->
	</div>
	<!-- END CONTENT HEADER -->
	</div>
	<!-- END TOP NAVIGATION BAR -->
	</div>
	<!-- END HEADER -->

	<!-- BEGIN CONTENT -->
	<div class="page-container row-fluid">
	<!-- BEGIN SIDEBAR -->
	<!-- BEGIN MENU -->
	<div class="page-sidebar" id="main-menu">
	<div class="page-sidebar-wrapper scrollbar-dynamic" id="main-menu-wrapper">
	<!-- BEGIN MINI-PROFILE -->
	<div class="user-info-wrapper">
	<div class="profile-wrapper">
	<img src="<%= image_path('profiles/avatar.jpg') %>" alt="" data-src="<%= image_path('profiles/avatar.jpg') %>" data-src-retina="<%= image_path('profiles/avatar2x.jpg') %>" width="69" height="69" />
	</div>
	<div class="user-info">
	<div class="greeting">Welcome</div>
	<div class="username">John <span class="semi-bold">Smith</span></div>
	<div class="status">Status<a href="#"><div class="status-icon green"></div>Online</a></div>
	</div>
	</div>
	<!-- END MINI-PROFILE -->
	<!-- BEGIN SIDEBAR MENU -->
	<p class="menu-title">BROWSE<span class="pull-right"><a href="javascript:;"><i class="fa fa-refresh"></i></a></span></p>
	<ul>
	<!-- BEGIN SELECTED LINK -->
	<li class="start active">
	<a href="#">
	<i class="icon-custom-home"></i>
	<span class="title">Link 1</span>
	<span class="selected"></span>
	<span class="badge badge-important pull-right">5</span>
	</a>
	</li>
	<!-- END SELECTED LINK -->
	<!-- BEGIN BADGE LINK -->
	<li class="">
	<a href="#">
	<i class="fa fa-envelope"></i>
	<span class="title">Link 2</span>
	<span class="badge badge-disable pull-right">203</span>
	</a>
	</li>
	<!-- END BADGE LINK -->
	<!-- BEGIN SINGLE LINK -->
	<li class="">
	<a href="#">
	<i class="fa fa-flag"></i>
	<span class="title">Link 3</span>
	</a>
	</li>
	<!-- END SINGLE LINK -->
	<!-- BEGIN ONE LEVEL MENU -->
	<li class="">
	<a href="javascript:;">
	<i class="icon-custom-ui"></i>
	<span class="title">Link 4</span>
	<span class="arrow"></span>
	</a>
	<ul class="sub-menu">
	<li><a href="#">Sub Link 1</a></li>
	</ul>
	</li>
	<!-- END ONE LEVEL MENU -->
	<!-- BEGIN TWO LEVEL MENU -->
	<li class="">
	<a href="javascript:;">
	<i class="fa fa-folder-open"></i>
	<span class="title">Link 5</span>
	<span class="arrow"></span>
	</a>
	<ul class="sub-menu">
	<li><a href="javascript:;">Sub Link 1</a></li>
	<li>
	<a href="javascript:;"><span class="title">Sub Link 2</span><span class="arrow "></span></a>
	<ul class="sub-menu">
	<li><a href="javascript:;">Sub Link 1</a></li>
	</ul>
	</li>
	</ul>
	</li>
	<!-- END TWO LEVEL MENU -->
	</ul>
	<!-- END SIDEBAR MENU -->
	<!-- BEGIN SIDEBAR WIDGETS -->
	<div class="side-bar-widgets">
	<!-- BEGIN FOLDER WIDGET -->
	<p class="menu-title">FOLDER<span class="pull-right"><a href="#" class="create-folder"><i class="icon-plus"></i></a></span></p>
	<ul class="folders">
	<li><a href="#"><div class="status-icon green"></div>Task 1</a></li>
	<!-- BEGIN HIDDEN INPUT BOX (FOR ADD FOLDER LINK) -->
	<li class="folder-input" style="display:none">
	<input type="text" placeholder="Name of folder" class="no-boarder folder-name" name="" id="folder-name">
	</li>
	<!-- END HIDDEN INPUT BOX (FOR ADD FOLDER LINK) -->
	</ul>
	<!-- END FOLDER WIDGET -->
	<!-- BEGIN PROJECTS WIDGET -->
	<p class="menu-title">PROJECTS</p>
	<!-- BEGIN EXAMPLE 1 -->
	<div class="status-widget">
	<div class="status-widget-wrapper">
	<div class="title">Project Title<a href="#" class="remove-widget"><i class="icon-custom-cross"></i></a></div>
	<p>Project Description</p>
	</div>
	</div>
	<!-- END EXAMPLE 1 -->
	<!-- END PROJECTS WIDGET -->
	</div>
	<div class="clearfix"></div>
	<!-- END SIDEBAR WIDGETS -->
	</div>
	</div>
	<!-- BEGIN SCROLL UP HOVER -->
	<a href="#" class="scrollup">Scroll</a>
	<!-- END SCROLL UP HOVER -->
	<!-- END MENU -->
	<!-- BEGIN SIDEBAR FOOTER WIDGET -->
	<div class="footer-widget">
	<div class="progress transparent progress-small no-radius no-margin">
	<div data-percentage="79%" class="progress-bar progress-bar-success animate-progress-bar"></div>
	</div>
	<div class="pull-right">
	<div class="details-status">
	<span data-animation-duration="560" data-value="86" class="animate-number"></span>%
	</div>
	<a href="#"><i class="fa fa-power-off"></i></a>
	</div>
	</div>
	<!-- END SIDEBAR FOOTER WIDGET -->
	<!-- END SIDEBAR -->
	<!-- BEGIN PAGE CONTAINER-->
	<div class="page-content">
	<div class="content">
	<%= yield %>
	</div>
	</div>
	<!-- END PAGE CONTAINER -->
	<!-- BEGIN CHAT -->
	<div class="chat-window-wrapper">
	<div id="main-chat-wrapper" class="inner-content">
	<div class="chat-window-wrapper scroller scrollbar-dynamic" id="chat-users">
	<!-- BEGIN CHAT HEADER -->
	<div class="chat-header">
	<!-- BEGIN CHAT SEARCH BAR -->
	<div class="pull-left">
	<input type="text" placeholder="search">
	</div>
	<!-- END CHAT SEARCH BAR -->
	<!-- BEGIN CHAT QUICKLINKS -->
	<div class="pull-right">
	<a href="#" class=""><div class="iconset top-settings-dark"></div></a>
	</div>
	<!-- END CHAT QUICKLINKS -->
	</div>
	<!-- END CHAT HEADER -->
	<!-- BEGIN GROUP WIDGET -->
	<div class="side-widget">
	<div class="side-widget-title">group chats</div>
	<div class="side-widget-content">
	<div id="groups-list">
	<ul class="groups">
	<li><a href="#"><div class="status-icon green"></div>Group Chat 1</a></li>
	</ul>
	</div>
	</div>
	</div>
	<!-- END GROUP WIDGET -->
	<!-- BEGIN FAVORITES WIDGET -->
	<div class="side-widget">
	<div class="side-widget-title">favorites</div>
	<div class="side-widget-content">
	<!-- BEGIN SAMPLE CHAT -->
	<div class="user-details-wrapper active" data-chat-status="online" data-chat-user-pic="<%= image_path('profiles/d.jpg') %>" data-chat-user-pic-retina="<%= image_path('profiles/d2x.jpg') %>" data-user-name="Jane Smith">
	<!-- BEGIN PROFILE PIC -->
	<div class="user-profile">
	<img src="<%= image_path('profiles/d.jpg') %>" alt="" data-src="<%= image_path('profiles/d.jpg') %>" data-src-retina="<%= image_path('profiles/d2x.jpg') %>" width="35" height="35">
	</div>
	<!-- END PROFILE PIC -->
	<!-- BEGIN MESSAGE -->
	<div class="user-details">
	<div class="user-name">Jane Smith</div>
	<div class="user-more">Message...</div>
	</div>
	<!-- END MESSAGE -->
	<!-- BEGIN MESSAGES BADGE -->
	<div class="user-details-status-wrapper">
	<span class="badge badge-important">3</span>
	</div>
	<!-- END MESSAGES BADGE -->
	<!-- BEGIN STATUS -->
	<div class="user-details-count-wrapper">
	<div class="status-icon green"></div>
	</div>
	<!-- END STATUS -->
	<div class="clearfix"></div>
	</div>
	<!-- END SAMPLE CHAT -->
	</div>
	</div>
	<!-- END FAVORITES WIDGET -->
	<!-- BEGIN MORE FRIENDS WIDGET -->
	<div class="side-widget">
	<div class="side-widget-title">more friends</div>
	<div class="side-widget-content" id="friends-list">
	<!-- BEGIN SAMPLE CHAT -->
	<div class="user-details-wrapper active" data-chat-status="online" data-chat-user-pic="<%= image_path('profiles/d.jpg') %>" data-chat-user-pic-retina="<%= image_path('profiles/d2x.jpg') %>" data-user-name="Jane Smith">
	<!-- BEGIN PROFILE PIC -->
	<div class="user-profile">
	<img src="<%= image_path('profiles/d.jpg') %>" alt="" data-src="<%= image_path('profiles/d.jpg') %>" data-src-retina="<%= image_path('profiles/d2x.jpg') %>" width="35" height="35">
	</div>
	<!-- END PROFILE PIC -->
	<!-- BEGIN MESSAGE -->
	<div class="user-details">
	<div class="user-name">Jane Smith</div>
	<div class="user-more">Message...</div>
	</div>
	<!-- END MESSAGE -->
	<!-- BEGIN MESSAGES BADGE -->
	<div class="user-details-status-wrapper">
	<span class="badge badge-important">3</span>
	</div>
	<!-- END MESSAGES BADGE -->
	<!-- BEGIN STATUS -->
	<div class="user-details-count-wrapper">
	<div class="status-icon green"></div>
	</div>
	<!-- END STATUS -->
	<div class="clearfix"></div>
	</div>
	<!-- END SAMPLE CHAT -->
	</div>
	</div>
	<!-- END MORE FRIENDS WIDGET -->
	</div>
	<!-- BEGIN DUMMY CHAT CONVERSATION -->
	<div class="chat-window-wrapper" id="messages-wrapper" style="display:none">
	<!-- BEGIN CHAT HEADER BAR -->
	<div class="chat-header">
	<!-- BEGIN SEARCH BAR -->
	<div class="pull-left">
	<input type="text" placeholder="search">
	</div>
	<!-- END SEARCH BAR -->
	<!-- BEGIN CLOSE TOGGLE -->
	<div class="pull-right">
	<a href="#" class=""><div class="iconset top-settings-dark"></div></a>
	</div>
	<!-- END CLOSE TOGGLE -->
	</div>
	<div class="clearfix"></div>
	<!-- END CHAT HEADER BAR -->
	<!-- BEGIN CHAT BODY -->
	<div class="chat-messages-header">
	<div class="status online"></div>
	<span class="semi-bold">Jane Smith(Typing..)</span>
	<a href="#" class="chat-back"><i class="icon-custom-cross"></i></a>
	</div>
	<!-- BEGIN CHAT MESSAGES CONTAINER -->
	<div class="chat-messages scrollbar-dynamic clearfix">
	<!-- BEGIN TIME STAMP EXAMPLE -->
	<div class="sent_time">Yesterday 11:25pm</div>
	<!-- END TIME STAMP EXAMPLE -->
	<!-- BEGIN EXAMPLE CHAT MESSAGE -->
	<div class="user-details-wrapper">
	<!-- BEGIN MESSENGER PROFILE -->
	<div class="user-profile">
	<img src="<%= image_path('profiles/d.jpg') %>" alt="" data-src="<%= image_path('profiles/d.jpg') %>" data-src-retina="<%= image_path('profiles/d2x.jpg') %>" width="35" height="35">
	</div>
	<!-- END MESSENGER PROFILE -->
	<!-- BEGIN MESSENGER MESSAGE -->
	<div class="user-details">
	<div class="bubble">Hello, You there?</div>
	</div>
	<!-- END MESSENGER MESSAGE -->
	<div class="clearfix"></div>
	<!-- BEGIN TIMESTAMP ON CLICK TOGGLE -->
	<div class="sent_time off">Yesterday 11:25pm</div>
	<!-- END TIMESTAMP ON CLICK TOGGLE -->
	</div>
	<!-- END EXAMPLE CHAT MESSAGE -->
	<!-- BEGIN TIME STAMP EXAMPLE -->
	<div class="sent_time">Today 11:25pm</div>
	<!-- BEGIN TIME STAMP EXAMPLE -->
	<!-- BEGIN EXAMPLE CHAT MESSAGE (FROM SELF) -->
	<div class="user-details-wrapper pull-right">
	<!-- BEGIN MESSENGER MESSAGE -->
	<div class="user-details">
	<div class="bubble sender">Let me know when you free</div>
	</div>
	<!-- END MESSENGER MESSAGE -->
	<div class="clearfix"></div>
	<!-- BEGIN TIMESTAMP ON CLICK TOGGLE -->
	<div class="sent_time off">Sent On Tue, 2:45pm</div>
	<!-- END TIMESTAMP ON CLICK TOGGLE -->
	</div>
	<!-- END EXAMPLE CHAT MESSAGE (FROM SELF) -->
	</div>
	<!-- END CHAT MESSAGES CONTAINER -->
	</div>
	<div class="chat-input-wrapper" style="display:none">
	<textarea id="chat-message-input" rows="1" placeholder="Type your message"></textarea>
	</div>
	<div class="clearfix"></div>
	<!-- END DUMMY CHAT CONVERSATION -->
	</div>
	</div>
	<!-- END CHAT -->
	</div>
	<!-- END CONTENT -->
	<!-- JS at bottom of page to improve load time, and only loaded once with 'data-turbolinks-eval' == false -->
	<%= javascript_include_tag 'application', 'data-turbolinks-track' => true, 'data-turbolinks-eval' => false %>

	</body>
	</html>
	// This is a manifest file that'll be compiled into application.js, which will include all the files
	// listed below.
	//
	// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts,
	// or vendor/assets/javascripts of plugins, if any, can be referenced here using a relative path.
	//
	// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
	// compiled file.
	//
	// Read Sprockets README (https://github.com/sstephenson/sprockets#sprockets-directives) for details
	// about supported directives.
	//

	// BEGIN VENDOR JS FOR WEBARCH (plus add in jquery.turbolinks)
	//= require plugins/pace/pace.min
	//= require plugins/jquery-1.8.3.min
	//= require jquery_ujs
	//= require plugins/boostrapv3/js/bootstrap.min
	//= require plugins/breakpoints
	//= require plugins/jquery-unveil/jquery.unveil.min
	//= require plugins/jquery-block-ui/jqueryblockui
	//= require plugins/jquery-scrollbar/jquery.scrollbar.min
	//= require plugins/jquery-numberAnimate/jquery.animateNumbers

	// BEGIN CORE TEMPLATE JS FOR WEBARCH
	//= require js/core
	//= require js/chat

	// I prefer to list scripts in a specific order, so I comment out require_tree .
	// require_tree .
	//= require turbolinks
	.iconset {
	background: url(<%= asset_path 'icon/top-tray.png' %>) no-repeat;
	position: relative;
	top: 1px;
	}

	.scrollup {
	background: url(<%= asset_path 'pullup.png' %>) no-repeat;
	}

	.status-icon {
	background: url(<%= asset_path 'icon/status.png' %>) no-repeat;
	}

	@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 200/100), only screen and (min-device-pixel-ratio: 2) {
	.grid.simple .grid-title .tools a {
	background: url(<%= asset_path 'icon/portlet-tray-2x.png' %>);
	background-size: 199px 57px;
	}
	.tiles .controller a {
	position: relative;
	background: url(<%= asset_path 'icon/portlet-tray-2x.png' %>);
	background-size: 199px 57px;
	}
	.widget-item .controller a {
	position: relative;
	background: url(<%= asset_path 'icon/portlet-tray-2x.png' %>);
	background-size: 199px 57px;
	}
	.iconset {
	background: url(<%= asset_path 'icon/top-trayx2.png' %>) no-repeat;
	background-size: 394px 29px;
	}
	.status-icon {
	background: url(<%= asset_path 'icon/status2x.png' %>);
	background-size: 79px 16px;
	}
	.scrollup {
	background: url(<%= asset_path 'icon/pullup2x.png' %>);
	background-size: 57px 27px;
	}
	.alert .close {
	background: url(<%= asset_path 'icon/noti-cross-2x.png' %>) no-repeat scroll 0 0 transparent;
	background-position: -9px -10px;
	width: 10px;
	height: 9px;
	position: relative;
	opacity: 0.8;
	background-size: 114px 29px;
	}
	}
	# Gems for twitter LESS -> CSS and JS support
	gem 'execjs'
	gem 'therubyracer'
	gem "less-rails"