BUSINESS Documentation

component.search

search-advanced

Live Example

30 Search results

Lorem ipsum dolor sit amet?

Image
What is Lorem Ipsum?

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.

read more

Quisque porttitor elit ac mauris?

Image
What is Lorem Ipsum?

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.

read more

Vivamus eros tortor consequat sed?

Image
What is Lorem Ipsum?

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.

read more

Etiam suscipit leo tincidunt mi volutpat?

Image
What is Lorem Ipsum?

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.

read more

<div class="widget">
	<div class="widget-body bg-gray">
		<div class="row">
			<div class="col-md-4 center">
				<label class="strong">Search for</label>
				<input type="text" class="form-control" placeholder="Type your keywords .. " />
				
				<div class="separator top"></div>
				<label class="strong">Options</label>
				<div class="uniformjs">
					<label class="checkbox" style="display: inline-block;">
						<input type="checkbox" class="checkbox" value="1" />
						Sexxxxy
					</label>
					<label class="checkbox" style="display: inline-block; margin-left: 10px; margin-top: 10px;">
						<input type="checkbox" class="checkbox" value="1" checked="checked" />
						Checked
					</label>
				</div>
			</div>
			<div class="col-md-4 center">
				<label class="strong">Date from</label>
				<div class="input-group date" id="datepicker1">
				    <input class="form-control" type="text" value="14 February 2013">
				    <span class="input-group-addon"><i class="fa fa-th"></i></span>
				</div>
				<div class="separator top"></div>

				<label class="strong">Date to</label>
				<div class="input-group date" id="datepicker2">
				    <input class="form-control" type="text" value="14 February 2013">
				    <span class="input-group-addon"><i class="fa fa-th"></i></span>
				</div>
			</div>
			<div class="col-md-4 center">
				<div class="innerLR">
					<label class="strong">Other options</label><br/>
					<div class="btn-group" data-toggle="button">
					    <button type="button" class="active btn btn-inverse">Left</button>
					    <button type="button" class="active btn btn-inverse">Middle</button>
					    <button type="button" class="btn btn-inverse">Right</button>
					</div>
					<div class="separator bottom"></div>
					<button type="submit" class="btn btn-primary btn-lg" data-loading-text="Now searching ..." data-toggle="btn-loading"><i class="fa fa-fw fa-search"></i> Start Searching</button>
				</div>
			</div>
		</div>
	</div>
</div>

<h5 class="text-uppercase strong innerTB margin-none">30 Search results</h5>
<div class="panel-group accordion accordion-2" id="tabAccountAccordion">

    <!-- Accordion Item -->
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title"><a class="accordion-toggle glyphicons right_arrow" data-toggle="collapse" data-parent="#tabAccountAccordion" href="#collapse-1-1"><i></i>Lorem ipsum dolor sit amet?</a></h4>
        </div>
        <div id="collapse-1-1" class="panel-collapse collapse">
            <div class="panel-body">
            	<div class="row">	
					<div class="col-md-2 center">
						<a href="" class="thumb"><img data-src="holder.js/150x100" alt="Image" class="img-responsive" /></a>
					</div>
					<div class="col-md-10">
						<h5 class="strong text-uppercase">What is Lorem Ipsum?</h5>
						<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
						<p class="margin-none strong"><a href="" class="glyphicons single chevron-right"><i></i>read more</a></p>
					</div>
				</div>
			</div>
        </div>
    </div>
    <!-- // Accordion Item END -->

    <!-- Accordion Item -->
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title"><a class="accordion-toggle glyphicons right_arrow" data-toggle="collapse" data-parent="#tabAccountAccordion" href="#collapse-2-1"><i></i>Quisque porttitor elit ac mauris?</a></h4>
        </div>
        <div id="collapse-2-1" class="panel-collapse collapse in">
            <div class="panel-body">
            	<div class="row">	
					<div class="col-md-2 center">
						<a href="" class="thumb"><img data-src="holder.js/150x100" alt="Image" class="img-responsive" /></a>
					</div>
					<div class="col-md-10">
						<h5 class="strong text-uppercase">What is Lorem Ipsum?</h5>
						<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
						<p class="margin-none strong"><a href="" class="glyphicons single chevron-right"><i></i>read more</a></p>
					</div>
				</div>
			</div>
        </div>
    </div>
    <!-- // Accordion Item END -->

    <!-- Accordion Item -->
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title"><a class="accordion-toggle glyphicons right_arrow" data-toggle="collapse" data-parent="#tabAccountAccordion" href="#collapse-3-1"><i></i>Vivamus eros tortor consequat sed?</a></h4>
        </div>
        <div id="collapse-3-1" class="panel-collapse collapse">
            <div class="panel-body">
            	<div class="row">	
					<div class="col-md-2 center">
						<a href="" class="thumb"><img data-src="holder.js/150x100" alt="Image" class="img-responsive" /></a>
					</div>
					<div class="col-md-10">
						<h5 class="strong text-uppercase">What is Lorem Ipsum?</h5>
						<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
						<p class="margin-none strong"><a href="" class="glyphicons single chevron-right"><i></i>read more</a></p>
					</div>
				</div>
			</div>
        </div>
    </div>
    <!-- // Accordion Item END -->

    <!-- Accordion Item -->
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title"><a class="accordion-toggle glyphicons right_arrow" data-toggle="collapse" data-parent="#tabAccountAccordion" href="#collapse-4-1"><i></i>Etiam suscipit leo tincidunt mi volutpat?</a></h4>
        </div>
        <div id="collapse-4-1" class="panel-collapse collapse">
            <div class="panel-body">
            	<div class="row">	
					<div class="col-md-2 center">
						<a href="" class="thumb"><img data-src="holder.js/150x100" alt="Image" class="img-responsive" /></a>
					</div>
					<div class="col-md-10">
						<h5 class="strong text-uppercase">What is Lorem Ipsum?</h5>
						<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
						<p class="margin-none strong"><a href="" class="glyphicons single chevron-right"><i></i>read more</a></p>
					</div>
				</div>
			</div>
        </div>
    </div>
    <!-- // Accordion Item END -->

</div>
<ul class="pagination margin-none">
    <li class="disabled"><a href="#">&lt;</a></li>
    <li class="active"><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">&gt;</a></li>
</ul>

Code

@import "http://localhost/shared/components/common/forms/elements/bootstrap-datepicker/assets/lib/css/bootstrap-datepicker.css";
@import "http://localhost/shared/components/common/forms/elements/bootstrap-datepicker/assets/custom/less/bootstrap-datepicker.less";
@import "http://localhost/shared/components/common/forms/elements/uniform/assets/lib/css/uniform.default.css";
@import "http://localhost/shared/components/common/forms/elements/uniform/assets/custom/less/uniformjs.less";
@import "http://localhost/shared/components/common/widgets/accordions/assets/less/accordions.less";
@import "assets/components/common/ui/pagination/pagination-bootstrap/assets/pagination.less";
@import "assets/components/core/less/widgets.less";
@import "assets/components/common/ui/buttons/assets/buttons.less";
@import "assets/components/core/less/gallery.less";

Usage

  1. Create a new LESS file (eg. styles.less)
  2. Copy & paste the above imports in the LESS file.
  3. Place the file in your project's document root.
  4. Load the LESS file into the <head> section of your HTML document, before any JavaScript files: 

    <link type="stylesheet/less" href="styles.less" />

    NOTE  All the styles from the CORE package also need to be imported in this file, before the component imports.

  5. If you'd like to include other components on the same page, don't create multiple LESS files, but add all the imports in one file. You can create a LESS file for each page with just the resources used for that specific page, or you could create and use a single LESS file for the entire project.
  6. In production, compile the LESS file and use the resulting minified CSS file in the HTML document.

Scripts

BODY You should include the following scripts at the end of the HTML document, right before the closing </body> tag.

<script src="assets/components/common/forms/elements/bootstrap-datepicker/assets/lib/js/bootstrap-datepicker.js?v=v1.0.2&sv=v0.0.1"></script>
<script src="assets/components/common/forms/elements/bootstrap-datepicker/assets/custom/js/bootstrap-datepicker.init.js?v=v1.0.2&sv=v0.0.1"></script>
<script src="assets/components/common/forms/elements/uniform/assets/lib/js/jquery.uniform.min.js?v=v1.0.2&sv=v0.0.1"></script>
<script src="assets/components/common/forms/elements/uniform/assets/custom/js/uniform.init.js?v=v1.0.2&sv=v0.0.1"></script>
<script src="assets/components/plugins/holder/holder.js?v=v1.0.2&sv=v0.0.1"></script>

search-media

Live Example
30 Search results
<div class="widget widget-heading-simple widget-body-simple text-right">
	<form class="input-group">
	  	<input type="text" class="form-control" placeholder="Type your keywords .. " />
	  	<span class="input-group-btn"><button type="submit" class="btn btn-inverse">Search</button></span>
	</form>
</div>
<div class="widget widget-heading-simple widget-body-white margin-none">
	<div class="widget-body">
		<h5 class="text-uppercase strong separator bottom">30 Search results</h5>
		
		<!-- Gallery Layout -->
		<div class="gallery gallery-2">
			<ul class="row" data-toggle="modal-gallery" data-target="#modal-gallery" id="gallery-4" data-delegate="#gallery-4">
								<li class="col-md-3 hidden-phone"><a class="thumb" href="../assets/images/gallery-2/8.jpg" data-gallery="gallery"><img src="../assets/images/gallery-2/8.jpg" alt="photo" class="img-responsive" /></a></li>
								<li class="col-md-3 hidden-phone"><a class="thumb" href="../assets/images/gallery-2/7.jpg" data-gallery="gallery"><img src="../assets/images/gallery-2/7.jpg" alt="photo" class="img-responsive" /></a></li>
								<li class="col-md-3 hidden-phone"><a class="thumb" href="../assets/images/gallery-2/6.jpg" data-gallery="gallery"><img src="../assets/images/gallery-2/6.jpg" alt="photo" class="img-responsive" /></a></li>
								<li class="col-md-3 hidden-phone"><a class="thumb" href="../assets/images/gallery-2/5.jpg" data-gallery="gallery"><img src="../assets/images/gallery-2/5.jpg" alt="photo" class="img-responsive" /></a></li>
								<li class="col-md-3 hidden-phone"><a class="thumb" href="../assets/images/gallery-2/4.jpg" data-gallery="gallery"><img src="../assets/images/gallery-2/4.jpg" alt="photo" class="img-responsive" /></a></li>
								<li class="col-md-3"><a class="thumb" href="../assets/images/gallery-2/3.jpg" data-gallery="gallery"><img src="../assets/images/gallery-2/3.jpg" alt="photo" class="img-responsive" /></a></li>
								<li class="col-md-3"><a class="thumb" href="../assets/images/gallery-2/2.jpg" data-gallery="gallery"><img src="../assets/images/gallery-2/2.jpg" alt="photo" class="img-responsive" /></a></li>
								<li class="col-md-3"><a class="thumb" href="../assets/images/gallery-2/1.jpg" data-gallery="gallery"><img src="../assets/images/gallery-2/1.jpg" alt="photo" class="img-responsive" /></a></li>
							</ul>
		</div>
		<!-- // Gallery Layout END -->
		
		<div class="separator"></div>
		<ul class="pagination margin-none">
	        <li class="disabled"><a href="#">&lt;</a></li>
	        <li class="active"><a href="#">1</a></li>
	        <li><a href="#">2</a></li>
	        <li><a href="#">3</a></li>
	        <li><a href="#">&gt;</a></li>
	    </ul>
		
	</div>
</div>




<!-- Blueimp Gallery -->
<div id="blueimp-gallery" class="blueimp-gallery blueimp-gallery-controls">
    <div class="slides"></div>
    <h3 class="title"></h3>
    <a class="prev no-ajaxify">‹</a>
    <a class="next no-ajaxify">›</a>
    <a class="close no-ajaxify">×</a>
    <a class="play-pause no-ajaxify"></a>
    <ol class="indicator"></ol>
</div>
<!-- // Blueimp Gallery END -->

Code

@import "http://localhost/shared/components/common/gallery/blueimp-gallery/assets/lib/css/blueimp-gallery.min.css";
@import "assets/components/common/gallery/blueimp-gallery/assets/custom/blueimp-gallery.less";
@import "assets/components/core/less/gallery.less";
@import "assets/components/common/ui/pagination/pagination-bootstrap/assets/pagination.less";
@import "assets/components/core/less/widgets.less";
@import "assets/components/core/less/forms.less";
@import "assets/components/common/ui/buttons/assets/buttons.less";

Usage

  1. Create a new LESS file (eg. styles.less)
  2. Copy & paste the above imports in the LESS file.
  3. Place the file in your project's document root.
  4. Load the LESS file into the <head> section of your HTML document, before any JavaScript files: 

    <link type="stylesheet/less" href="styles.less" />

    NOTE  All the styles from the CORE package also need to be imported in this file, before the component imports.

  5. If you'd like to include other components on the same page, don't create multiple LESS files, but add all the imports in one file. You can create a LESS file for each page with just the resources used for that specific page, or you could create and use a single LESS file for the entire project.
  6. In production, compile the LESS file and use the resulting minified CSS file in the HTML document.

Scripts

BODY You should include the following scripts at the end of the HTML document, right before the closing </body> tag.

<script src="assets/components/common/gallery/blueimp-gallery/assets/lib/js/blueimp-gallery.min.js?v=v1.0.2&sv=v0.0.1"></script>
<script src="assets/components/common/gallery/blueimp-gallery/assets/lib/js/jquery.blueimp-gallery.min.js?v=v1.0.2&sv=v0.0.1"></script>

search-simple

Live Example
30 Search results
Image
What is Lorem Ipsum?

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. read more

Image
What is Lorem Ipsum?

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. read more

Image
What is Lorem Ipsum?

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. read more

<div class="widget widget-heading-simple widget-body-simple text-right">
	<form class="input-group">
	  	<input type="text" class="form-control" placeholder="Type your keywords .. " />
	  	<span class="input-group-btn"><button type="submit" class="btn btn-inverse">Search</button></span>
	</form>
</div>

<h5 class="text-uppercase strong innerAll border-bottom">30 Search results</h5>

<div class="media">	
	<a href="" class="pull-left"><img data-src="holder.js/100x100" alt="Image" class="img-responsive" /></a>
	<div class="media-body innerTB half">
		<h5 class="strong text-uppercase">What is Lorem Ipsum?</h5>
		<p class="margin-none">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. <a href=""><i class="fa fa-fw fa-arrow-right"></i> read more</a></p>
	</div>
</div>
<div class="innerAll border-bottom"></div>
<div class="media">	
	<a href="" class="pull-right"><img data-src="holder.js/100x100" alt="Image" class="img-responsive" /></a>
	<div class="media-body innerTB half">
		<h5 class="strong text-uppercase">What is Lorem Ipsum?</h5>
		<p class="margin-none">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. <a href=""><i class="fa fa-fw fa-arrow-right"></i> read more</a></p>
	</div>
</div>
<div class="innerAll border-bottom"></div>
<div class="media">	
	<a href="" class="pull-left"><img data-src="holder.js/100x100" alt="Image" class="img-responsive" /></a>
	<div class="media-body innerTB half">
		<h5 class="strong text-uppercase">What is Lorem Ipsum?</h5>
		<p class="margin-none">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. <a href=""><i class="fa fa-fw fa-arrow-right"></i> read more</a></p>
	</div>
</div>
<div class="separator"></div>
<ul class="pagination margin-none">
    <li class="disabled"><a href="#">&lt;</a></li>
    <li class="active"><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">&gt;</a></li>
</ul>

Code

@import "assets/components/common/ui/pagination/pagination-bootstrap/assets/pagination.less";
@import "assets/components/core/less/widgets.less";
@import "assets/components/common/ui/buttons/assets/buttons.less";
@import "assets/components/core/less/gallery.less";
@import "assets/components/core/less/forms.less";

Usage

  1. Create a new LESS file (eg. styles.less)
  2. Copy & paste the above imports in the LESS file.
  3. Place the file in your project's document root.
  4. Load the LESS file into the <head> section of your HTML document, before any JavaScript files: 

    <link type="stylesheet/less" href="styles.less" />

    NOTE  All the styles from the CORE package also need to be imported in this file, before the component imports.

  5. If you'd like to include other components on the same page, don't create multiple LESS files, but add all the imports in one file. You can create a LESS file for each page with just the resources used for that specific page, or you could create and use a single LESS file for the entire project.
  6. In production, compile the LESS file and use the resulting minified CSS file in the HTML document.

Scripts

BODY You should include the following scripts at the end of the HTML document, right before the closing </body> tag.

<script src="assets/components/plugins/holder/holder.js?v=v1.0.2&sv=v0.0.1"></script>

search-users

Live Example
30 Search results
Photo Full name Location Membership Actions
Image Lorem Ipsum Dolor Romania view on map Accepted View
Image John Doe United States view on map Accepted View
Image Jane Doe Europe view on map Rejected Accept
Image Lorem Dolor Asia view on map Rejected Accept 
<div class="widget widget-heading-simple widget-body-simple text-right">
	<form class="input-group">
	  	<input type="text" class="form-control" placeholder="Type your keywords .. " />
	  	<span class="input-group-btn"><button type="submit" class="btn btn-inverse">Search</button></span>
	</form>
</div>
<div class="widget widget-heading-simple widget-body-white margin-none">
	<h5 class="text-uppercase strong innerAll border-bottom margin-none">30 Search results</h5>
	<table class="table table-vertical-center border-bottom">
		<thead>
			<tr>
				<th class="center">Photo</th>
				<th class="center">Full name</th>
				<th class="center">Location</th>
				<th class="center">Membership</th>
				<th class="center">Actions</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td class="center"><img data-src="holder.js/50x50/dark" alt="Image" /></td>
				<td class="strong center">Lorem Ipsum Dolor</td>
				<td class="center">Romania <a href="" class="innerL text-underline">view on map <i class="icon-map-marker"></i></a></td>
				<td class="center"><span class="label label-success"><i class="icon-ok"></i> Accepted</span></td>
				<td class="center"><a href="" class="btn btn-xs btn-primary">View <i class="icon-eye-open"></i></a></td>
			</tr>
			<tr>
				<td class="center"><img data-src="holder.js/50x50/dark" alt="Image" /></td>
				<td class="strong center">John Doe</td>
				<td class="center">United States <a href="" class="innerL text-underline">view on map <i class="icon-map-marker"></i></a></td>
				<td class="center"><span class="label label-success"><i class="icon-ok"></i> Accepted</span></td>
				<td class="center"><a href="" class="btn btn-xs btn-primary">View <i class="icon-eye-open"></i></a></td>
			</tr>
			<tr>
				<td class="center"><img data-src="holder.js/50x50/dark" alt="Image" /></td>
				<td class="strong center">Jane Doe</td>
				<td class="center">Europe <a href="" class="innerL text-underline">view on map <i class="icon-map-marker"></i></a></td>
				<td class="center"><span class="label label-danger"><i class="icon-remove"></i> Rejected</span></td>
				<td class="center"><a href="" class="btn btn-xs btn-success">Accept <i class="icon-ok"></i></a></td>
			</tr>
			<tr>
				<td class="center"><img data-src="holder.js/50x50/dark" alt="Image" /></td>
				<td class="strong center">Lorem Dolor</td>
				<td class="center">Asia <a href="" class="innerL text-underline">view on map <i class="icon-map-marker"></i></a></td>
				<td class="center"><span class="label label-danger"><i class="icon-remove"></i> Rejected</span></td>
				<td class="center"><a href="" class="btn btn-xs btn-success">Accept <i class="icon-ok"></i></a></td>
			</tr>
		</tbody>
	</table>
	<ul class="pagination margin-none">
        <li class="disabled"><a href="#">&lt;</a></li>
        <li class="active"><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
        <li><a href="#">&gt;</a></li>
    </ul>
</div>

Code

@import "assets/components/common/tables/classic/assets/less/tables.less";
@import "assets/components/common/ui/pagination/pagination-bootstrap/assets/pagination.less";
@import "assets/components/core/less/widgets.less";
@import "assets/components/common/ui/buttons/assets/buttons.less";
@import "assets/components/core/less/gallery.less";
@import "assets/components/core/less/forms.less";
@import "assets/components/core/less/labels.less";

Usage

  1. Create a new LESS file (eg. styles.less)
  2. Copy & paste the above imports in the LESS file.
  3. Place the file in your project's document root.
  4. Load the LESS file into the <head> section of your HTML document, before any JavaScript files: 

    <link type="stylesheet/less" href="styles.less" />

    NOTE  All the styles from the CORE package also need to be imported in this file, before the component imports.

  5. If you'd like to include other components on the same page, don't create multiple LESS files, but add all the imports in one file. You can create a LESS file for each page with just the resources used for that specific page, or you could create and use a single LESS file for the entire project.
  6. In production, compile the LESS file and use the resulting minified CSS file in the HTML document.

Scripts

BODY You should include the following scripts at the end of the HTML document, right before the closing </body> tag.

<script src="assets/components/plugins/holder/holder.js?v=v1.0.2&sv=v0.0.1"></script>