docs.tmpl.html

---
layout: index.layout
title: Bootstrap CSS Customizer
base_url: "./"
permalink: /docs.html
---
    <div class="navbar navbar-inverse navbar-fixed-top">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand brand" href="index.html"><span class="label label-primary">Bootstrap</span>
                    <span class="label label-success">CSS</span>
                    <span class="label label-danger">Customizer {{ site.version }}</span></a>
		  
        </div>
        <div class="navbar-collapse collapse">
			<ul class="nav navbar-nav pull-right">
				<li><a href="index.html"><i class="icon-fixed-width icon-home"></i>Home</a></li>
				<li><a href="customizer.html" onclick="logEvent(['_trackEvent', 'Home Page actions', 'goto', this.href]);"><i class="icon-fixed-width icon-gears"></i> Customizer</a></li>
				<li class="active"><a href="#" onclick="logEvent(['_trackEvent', 'Home Page actions', 'goto', this.href]);"><i class="icon-fixed-width icon-book"></i> Docs</a></li>
				<li><a id="forkme_banner" href="{{ site.github_url }}" onclick="logEvent(['_trackEvent', 'Home Page actions', 'goto', this.href]);"><i class="icon-github-sign"></i></a></li>     
				<li>
					<a style="padding-bottom:0px">
						<iframe class="github-btn" src="http://ghbtns.com/github-btn.html?user=imaguiraga&amp;repo=bootstrap-css-customizer&amp;type=watch&amp;count=true" allowtransparency="true" frameborder="0" scrolling="0" width="100px" height="20px"></iframe>
						<iframe class="github-btn" src="http://ghbtns.com/github-btn.html?user=imaguiraga&amp;repo=bootstrap-css-customizer&amp;type=fork&amp;count=true" allowtransparency="true" frameborder="0" scrolling="0" width="102px" height="20px"></iframe>
					</a>
				</li>
			</ul>
        </div><!--/.navbar-collapse -->
      </div>
    </div>
    <div class="docs container">
	<p>
				<img class="img-responsive"  src="assets/images/docs/toolbar.png" alt="Toolbar" title="Toolbar">
		</p>
		<hr />	
		<p>
				Select a Template<img class="img-responsive"  src="assets/images/docs/1.0-select-template.png" alt="Select Template" title="Select Template">
				Selecting any <code>External template</code> activates the external Link <button class="btn btn-default"><i class="icon-link"></i></button> to the template page not hosted on this site. 
		</p>
		
		<p>
				Select a Color<img class="img-responsive"  src="assets/images/docs/2.0-select-color.png" alt="Select Color" title="Select Color">
		</p>
		<hr />	
		<p>
				Edit Color manually by entering value or by clicking on the control to activate the colorpicker, Active only when the current value does not contain a variable <code>@</code> <img class="img-responsive" src="assets/images/docs/2.1-edit-color-picker.png" alt="Edit Color" title="Edit Color">
		</p>
	
		<p>
				or Drag aColor to drop drag targets identified by <i class="icon-tint"></i> icon <img class="img-responsive" src="assets/images/docs/2.1-dag-drop-color.png" alt="Drag and drop Color" title="Drag and drop Color">
		</p>
		<hr />	
		<p>
				See color dependencies being updated <img class="img-responsive"  src="assets/images/docs/2.2-color-update.png" alt="Color Update" title="Color Update">
		</p>
		<hr />	
		<p>
			Compile changes with <button class="btn btn-default"><i class="icon-gears"></i>Compile CSS</button> <img class="img-responsive"  src="assets/images/docs/3.0-compile-css.png" alt="Compile/Preview CSS" title="Compile/Preview CSS">
			Enter Preview mode by clicking on <button class="btn btn-default"><i class="icon-eye"></i>Preview CSS</button> with or without gradients<label class="btn btn-primary btn-sm">
                            <input id="gradients-check" type="checkbox" style="margin:4px">Apply Gradients</label> Active only for compiled <code>User Templates</code>
		</p>
		<hr />	
		<p>
			Edit Compiled CSS name if desired <button class="btn btn-default"><i class="icon-edit-sign"></i></button>. Compiled CSS are stored in localstorage and are available after a restart, they can be removed with <button class="btn btn-default"><i class="icon-remove"></i></button> <img class="img-responsive" src="assets/images/docs/3.1-edit-name.png" alt="Edit Compiled CSS Name" title="Edit compiled Name">
			
		</p>
		<hr />	
		<p>
			Enter New Name and enter to save<img class="img-responsive"  src="assets/images/docs/3.2-edit-name.png" alt="Edit Compiled CSS Name" title="Edit compiled Name">
		</p>
		<hr />	
		<p>
			See updated Name	<img class="img-responsive"  src="assets/images/docs/3.3-name-updated.png" alt="Name update" title="Name update">
		</p>
		<hr />	
		<p>
			Download compiled CSS with <button class="btn btn-default"><i class="icon-download-alt"></i></button><img class="img-responsive"  src="assets/images/docs/4.0-download-compiled-css.png" alt="Download Compiled CSS" title="">
		</p>
    </div> <!-- /container -->