<section>
	<h1 class="blue" data-id="#files/css"><i class="ace-icon fa fa-file-o grey"></i> CSS/LESS Files</h1>
	<hr />

	<!-- #section:files/css -->
	<div class="help-content">
		<h3 class="info-title smaller" data-id="#files/css.bootstrap">1. Bootstrap</h3>
		<!-- #section:files/css.bootstrap -->
		<div class="info-section">
		 <ul class="info-list list-unstyled">
			<li>
				Bootstrap's LESS files are not included in the package except for the following:
				<br />
				<code><span class="brief-show">assets/css/less/bootstrap/</span>variables.less</code> 
				<code><span class="brief-show">assets/css/less/bootstrap/</span>mixins.less</code>
			</li>
			<li>
				I have modified Bootstrap's CSS file slightly so it's different
				from original files you download from official site.
			</li>
			<li>
				But you can use original Bootstrap CSS file without problem.
				<br />
				Just remember to replace Ace's version of Bootstrap variables file located at
				<code>assets/css/less/bootstrap/variables.less</code>
				with original Bootstrap variables that you download,
				and re-compile Ace's LESS files into CSS again.
			</li>
				
			<li>
				Specifically, I have changed <code>@gutterWidth</code> from <b>30</b> to <b>24</b>
				and changed <code>@grid-float-breakpoint-max</code> from <b>@screen-sm-min</b><i>(768px)</i> to <b>@screen-md-min</b><i>(992px)</i>.
			</li>
			
			<li>
				The result is that with default Bootstrap, mobile menu will be visible when window width is less than <code>768px</code>
				but now it's been modified to <code>992px</code>.
				<br />
				And it's fine as most desktop browsers are wider than <code>1000px</code>.
			</li>

			<!--
			<li>
				<div class="space-8"></div>
				I have also modified <code>mixins.less</code> to reduce the number of floating point digits.
				<br />
				So for example:
<pre data-language="css">
.col-xs-10 {
  width: 83.33333333%;
}</pre>
has been changed to:
<pre data-language="css">
.col-xs-10 {
  width: 83.3333%;
}</pre>
			</li>
-->
			

		 </ul>
		</div>
		<!-- /section:files/css.bootstrap -->


		<h3 class="info-title smaller" data-id="#files/css.third">2. Third party</h3>
		<div class="info-section">
		 <ul class="info-list list-unstyled">
			<li>
				Third party plugin CSS files are inside
				<code>assets/css/</code> folder.
			</li>
			<li>
				Minified version is find inside <code>dist/css/</code> folder.
			</li>
		 </ul>
		</div>


		
		<h3 class="info-title smaller" data-id="#files/css.less">3. Ace LESS</h3>
		<!-- #section:files/css.less -->
		<div class="info-section">
		 <ul class="info-list list-unstyled">
			<li>
				Ace's main CSS file (<code>ace.css</code> or <code>ace.min.css</code>) is generated by compiling LESS files.
			</li>
			<li>
				You can find LESS files here <code>assets/css/less</code>
				and compile them into CSS using <b>Node.js</b> and  <b>LESS</b> compiler using the following command:
				<br />
				<code>lessc <span class="green">ace.less</span> ../ace.css</code>
				<br />
				or
				<br />
				<code>lessc <span class="green">ace.less</span> <b class="blue">--clean-css</b> ../ace<b class="blue">.min</b>.css</code>
			</li>
			
			<li>
				Main less file is:
				<br />
				<code data-open-file="css" class="open-file"><span class="brief-show">assets/css/less/</span>ace.less</code>
			</li>
			<li>
				Variable files are:
				<br />
				<code data-open-file="css" class="open-file"><span class="brief-show">assets/css/less/</span>variables.less</code>
				<br />
				<code data-open-file="css" class="open-file"><span class="brief-show">assets/css/less/</span>fonts.less</code>
				<br />
				and
				<br />
				<code data-open-file="css" class="open-file"><span class="brief-show">assets/css/less/</span>ace-features.less</code>
				<br />
				which enables feature selection.				
			</li>
			
			<li>
				<div class="alert alert-info">
					If you don't have Node.js installed, you can download it here:
					<a href="http://nodejs.org/download/">http://nodejs.org/download/</a>
					<br />
					Then you should install less compiler using the following command:
					<br />
					<code>npm install -g less</code>
				</div>
			</li>
		 </ul>
		</div>
		<!-- /section:files/css.less -->


		
		<h3 class="info-title smaller" data-id="#files/css.css">4. Ace CSS</h3>
		<!-- #section:files/css.css -->
		<div class="info-section">
		 <ul class="info-list list-unstyled">
			<li>
				Ace's main CSS file is generated by compiling LESS files into CSS:
				<br />
				<code>lessc ace.less ../ace.css</code>
				<br />
			</li>
			<li>
				But there is also:
				<ul class="list-unstyled info-list">
					<li>
						<code>ace-ie.css</code> which has some rules for IE9 and below and should be included for IE only using conditional comments:
<pre class="light-green">
&lt;!--[if lte IE <span class="light-red bolder">9</span>&gt;
&lt;link rel="stylesheet" href="<span class="purple bolder">path/to/assets/<span class="light-blue">ace-ie.css</span></span>" /&gt;
&lt;![endif]--&gt;
</pre>
					</li>
					
					<li>
						<code>ace-part2.css</code> which is used when main CSS file (ace.css) is too large for IE9 and below (the 4096 selector limit).
<pre class="light-green">
&lt;!--[if lte IE <span class="light-red bolder">9</span>&gt;
&lt;link rel="stylesheet" href="<span class="purple bolder">path/to/assets/<span class="light-blue">ace-part2.css</span></span>" /&gt;
&lt;![endif]--&gt;
</pre>
						See the following links for more info about this IE limitation:
						<br />
						<a href="http://support.microsoft.com/kb/262161">Link 1</a>
						&
						<a href="http://blogs.msdn.com/b/ieinternals/archive/2011/05/14/10164546.aspx">Link 2</a>
						
					</li>
					
					<li>
						<code>ace-rtl.css</code> file which is used for RTL (right to left) direction suitable for languages such as Arabic, Hebrew and Persian.
						<br />
						For more info about using RTL, please see <a href="#settings.rtl">RTL section</a>
					</li>
					
					<li>
						<code>ace-fonts.css</code> which is the font definition file.
						<br />
						Used only when you want to serve local fonts rather using fonts directly from google.
						<br />
						You can also put content of <code>ace-fonts.css</code>
						on top of your main CSS file to reduce number of files.
					</li>
				</ol>
			</li>
		 </ul>
		</div>
		<!-- /section:files/css.css -->
		
		
		
		<h3 class="info-title smaller" data-id="#files/css.skins">5. Ace Skins</h3>
		<!-- #section:files/css.skins -->
		<div class="info-section">
		 <ul class="info-list list-unstyled">
			<li>
				<code>ace-skins.css</code> file is generated by compiling
				<br />
				<code>assets/css/less/skins/skins.less</code>
				<br />
				using the following command:
				<br />
				<code>lessc <span class="green">skins/skins.less</span> ../ace-skins.css</code>
				<br />
				or
				<br />
				<code>lessc <span class="green">skins/skins.less</span> <b class="blue">--clean-css</b> ../ace-skins<b class="blue">.min</b>.css</code>
			</li>
			
			<li>
				If you don't want to use a separate skin file,
				you can compile <code>ace.less</code> using your skin of choice.

				<br />
				To do that, edit
				<br />
				<code>assets/css/less/sidebar.less</code>
				<br />
				and replace
				<br />
				<code>@import "skins/no-skin.less"</code>
				<br />
				with
				<br />
				<code>@import "skins/skin-1.less</code>
				<br />
				or any other skin.
			</li>
			
			<li>
				For more info about skins you may want to see <a href="#settings.skins">skins section</a> as well.
			</li>
		 </ul>
		</div>
		<!-- /section:files/css.skins -->
		
		
		<h3 class="info-title smaller" data-id="#files/css.order">6. CSS file order</h3>
		<!-- #section:files/css.order -->
		<div class="info-section">
		 <ul class="info-list list-unstyled">
			<li>
				The correct order of including CSS files is as follows:
				<ol>
					<li>
						<b>bootstrap.css</b>
					</li>
					<li>
						<b>fontawesome.css</b> if you want to use Fontawesome icons.
					</li>
					<li>
						<b>ace-fonts.css</b>
						<br />
						You may want to serve fonts from your own server or hosted by Google.
						<br />
						View this file for an example:
						<br />
						<code data-open-file="html" class="open-file"><span class="brief-show">mustache/app/views/layouts/partials/_shared/_template/</span>fonts.mustache</code>
					</li>
					
					<li>
						Third party css files such as <b>chosen.css</b> or <b>ui.jqgrid.css</b>
					</li>
					
					<li>
						<b>ace.css</b>. Ace's main CSS file.
					</li>
					<li>
						<b>ace-part2.css</b>. IE 9 and below have a 4096 selector limit.
						<br />
						See the following links for more info about this IE limitation:
						<br />
						<a href="http://support.microsoft.com/kb/262161">Link 1</a>
						&
						<a href="http://blogs.msdn.com/b/ieinternals/archive/2011/05/14/10164546.aspx">Link 2</a>
						
						<div class="space-4"></div>
						I recommend building a custom, smaller CSS file according to your needs, using <a href="../build/css.html">CSS builder</a> and you may not need a second CSS file for IE.
					</li>
					
					<li>
						<b>ace-skins.css</b>.
						Ace skin CSS file, if you want to use a skin other that default one.
						<br />
						You can also compile default Ace styles (ace.css) using a different skin.
						Please refer to the above "Ace Skins" section for more info.
					</li>
					<li>
						<b>ace-rtl.css</b>. Ace's RTL direction CSS file, if you want to use Arabic, Hebrew or Persian.
					</li>
					
					<li>
						<b>ace-ie.css</b> which is used by IE9 and below.
					</li>
					
					<li>
						Inline styles which is not recommend and you should always try to separate your CSS from your HTML and application code.
					</li>
				</ol>
			</li>
			
			<li>
<pre data-language="html">
 &lt;link href="path/to/bootstrap.min.css" rel="stylesheet" /&gt;
 &lt;link href="path/to/fontawesome.min.css" rel="stylesheet" /&gt;&lt;!-- only if needed --&gt;

 &lt;link href="path/to/ace-fonts.css" rel="stylesheet" /&gt;&lt;!-- you can also use google hosted fonts --&gt;

 &lt;link href="path/to/ace.min.css" rel="stylesheet" class="ace-main-stylesheet" /&gt;
 &lt;!--[if lte IE 9]&gt;
  &lt;link href="path/to/ace-part2.min.css" rel="stylesheet" class="ace-main-stylesheet" /&gt;
 &lt;![endif]--&gt;

 &lt;link href="path/to/ace-skins.min.css" rel="stylesheet" /&gt;&lt;!-- only if needed --&gt;
 &lt;link href="path/to/ace-rtl.min.css" rel="stylesheet" /&gt;&lt;!-- only if needed --&gt;

 &lt;!--[if lte IE 9]&gt;
 &lt;link href="path/to/ace-ie.min.css" rel="stylesheet" /&gt;
 &lt;![endif]--&gt;

 &lt;style&gt;
  /* not recommended to define new CSS rules inside your HTML page */
  .some-selector {
    color: red;
  }
 &lt;/style&gt;
</pre>
			</li>
		 </ul>
		</div>
		<!-- #section:files/css.order -->

		
		<h3 class="info-title smaller" data-id="#files/css.fonts">7. Fonts</h3>
		<!-- #section:files/css.fonts -->
		<div class="info-section">
		 <ul class="info-list list-unstyled">
			<li>
				Ace uses "Open Sans" font from Google as its a popular font with good character support.
				<br />
				Only "normal" and "light" font weights are included to make the page load faster:
				<code>http://fonts.googleapis.com/css?family=Open+Sans:<u>400</u>,<u>300</u></code>
				<br />
				See this for more info: <a href="http://www.google.com/fonts#UsePlace:use/Collection:Open+Sans">Google Open Sans</a>

				<div class="space-6"></div>
				You can use google hosted fonts:
				<pre data-language="html">
<!-- serve fonts from google -->
&lt;link rel="stylesheet" href="//fonts.googleapis.com/css?family=Open+Sans:400,300" /&gt;</pre>
				
				Or serve from your own server: (especially good during development, so that your pages load faster)
				<pre data-language="html">
&lt;link rel="stylesheet" href="path/to/ace-fonts.css" /&gt;</pre>
				You can also embed the contents of "ace-fonts.css" files in your main CSS file to reduce number of files:
				<pre data-language="css">
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300;
  src: local('Open Sans Light'), local('OpenSans-Light'), url(path/to/font/DXI1ORHCpsQm3Vp6mXoaTXhCUOGz7vYGh680lGh-uXM.woff) format('woff');
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: local('Open Sans'), local('OpenSans'), url(path/to/font/cJZKeOuBrn4kERxqtaUH3T8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
}</pre>
				Font files are located inside: <code>assets/font</code>
			</li>
			<li>
				For icons you can use Fontawesome, Glyphicons or any other font library.
				<br />
				Icon font files are located inside: <code>assets/fonts</code>
				and  you can also serve CDN hosted fonts, for example:
				<pre data-language="html">
&lt;link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" /&gt;</pre>

				<div class="space-4"></div>
				Please also see <a href="#elements.icon" class="help-more">Icons section</a> for more info.
			</li>
		 </ul>
		</div>
		<!-- /section:files/css.fonts -->



		<h3 class="info-title smaller" data-id="#files/css.build">8. CSS Builder</h3>
		<!-- #section:files/css.build -->
		<div class="info-section">
		 <ul class="info-list list-unstyled">
			<li>
				There is also the in-browser CSS builder you can use to build a custom CSS output, using only the parts you need.
			</li>
			<li>
				You can find it here: <a href="../build/css.html">path/to/ace/build/css.html</a>
			</li>
		 </ul>
		</div>
		<!-- /section:files/css.build -->
		
	</div>
	<!-- /section:files/css -->
</section>