Components - Documentation

Tabs
Breadcrumb
Pagination
Messages boxes
Dropdown
Carousel
Modals
Hints
Back to top button
Swipe plugin
Date picker

You can add tabs to your site.

Example :

Dog 1
Dog 2
Dog 3

<ul class="tabs">
	<li class="active"><a href="#tab1">Dog 1</a></li>
	<li><a href="#tab2">Dog 2</a></li>
	<li><a href="#tab3">Dog 3</a></li>
</ul>
<div class="tabs-content">
	<div id="tab1">
		<img src="img/1.jpg"/>
	</div>
	<div id="tab2">
		<img src="img/2.jpg"/>
	</div>
	<div id="tab3">
		<img src="img/3.jpg"/>
	</div>
</div>

You can add breadcrumb to your site using an ul with the class .breadcrumb.

Example :
or

<ul class="breadcrumb">
	<li><a href="#">Home</a></li>
	<li><a href="#">Animals</a></li>
	<li><a href="#">Dogs</a></li>
	<li><a href="#">Mops</a></li>
</ul>
or
<ul class="breadcrumb">
	<li><a href="#">Home</a></li>
	<li><a href="#">Animals</a></li>
	<li><a href="#">Dogs</a></li>
	<li class="active">Mops</li>
</ul>

Pagination

You can add pagination to your website using a list ul inside a div having the class .pagination.

Example :

Demo 1
Demo 2

<div class="pagination">
	<ul>
		<li class="disabled">&laquo;</li>
		<li class="active">1</li>
		<li><a href="#">2</a></li>
		<li><a href="#">3</a></li>
		<li><a href="#">4</a></li>
		<li><a href="#">5</a></li>
		<li><a href="#">&raquo;</a></li>
	</ul>
</div>

<div class="pagination">
	<ul>
		<li><a href="#">1</a></li>
		<li><a href="#">2</a></li>
		<li><a href="#">3</a></li>
		<li class="disabled">...</li>
		<li><a href="#">17</a></li>
		<li class="active">18</li>
		<li><a href="#">19</a></li>
	</ul>
</div>

Message boxes & others

You can add styles for info, warning and error elements, by adding the classes .info, .warning and .error on them.

Example :
Divs:

I'm an info

I'm a warning

I'm an error

I'm a success

Forms:

The dropdown is a small jQuery plugin helping you to create menus when clicking an element.
If you want to create a dropdown link, add data-dropdown with the reference to your dropdown list.
It can also used on select elements in order to improve their usablility, you just have to add the class .dropdown.

Settings :

Parameter	Information	Default value
columns	Number of columns. You can define it by setting "data-columns".	1 (3 for select elements)
scroll	Allow scrolling on the items. If false, the dropdown will show all the items. You can define it by setting "data-scroll".	false (true for select elements)
width	Width of the dropdown. You can define it by setting "data-width" (px\|'auto'\|'parent').	auto (parent for select elements)

Demo 1
Demo 2
Demo 3

Simple dropdown

<a href="#" data-dropdown="#dropdown1">Simple dropdown</a>
<ul class="dropdown" id="dropdown1">
	<li><a href="http://www.google.fr" rel="nofollow">Google</a></li>
	<li><a href="http://www.facebook.com" rel="nofollow">Facebook</a></li>
	<li><a href="http://twitter.com" rel="nofollow">Twitter</a></li>
	<li><a href="#" class="remove_btn" onclick="alert('deleted');">Delete</a></li>
</ul>

2 columns dropdown

<a href="#" data-dropdown="#dropdown2" data-columns="2">2 columns dropdown</a>
<ul class="dropdown" id="dropdown2">
	<li><a href="http://www.google.fr" rel="nofollow">Google</a></li>
	<li><a href="http://www.facebook.com" rel="nofollow">Facebook</a></li>
	<li><a href="http://twitter.com" rel="nofollow">Twitter</a></li>
	<li><a href="#" class="remove_btn" onclick="alert('deleted');">Delete</a></li>
</ul>

Dropdown for a select element.

<select name="birthdate_month" class="dropdown">
	<option value="1">January</option>
	<option value="2">February</option>
	<option value="3">March</option>
	<option value="4">April</option>
	<option value="5">May</option>
	<option value="6">June</option>
	<option value="7">July</option>
	<option value="8">August</option>
	<option value="9">September</option>
	<option value="10">October</option>
	<option value="11">November</option>
	<option value="12">December</option>
</select>

You can easily create slideshows. Create a div.carousel containing one <ul> and a set of li.
You can add a carousel caption inside the li with a div.carousel-caption.

You can choose between slide and fade transition mode.

Slide
Fade

First caption

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
Second caption

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
Third caption

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

<div class="carousel" data-mode="slide" data-indicators="false" data-delay="3000" data-stoponhover="false">
   <ul>
      <li>
         <img src="img/slider1.jpg"/>
         <div class="carousel-caption">
            <h4>First caption</h4>
            <p>Cras justo odio...</p>
         </div>
      </li>
      ...
   </ul>
</div>

First caption

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
Second caption

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
Third caption

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

<div class="carousel" data-mode="fade" data-arrows="false" data-auto="false">
   <ul>
      <li>
         <img src="img/slider1.jpg"/>
         <div class="carousel-caption">
            <h4>First caption</h4>
            <p>Cras justo odio...</p>
         </div>
      </li>
      ...
   </ul>
</div>

You can also use directly the jQuery plugin.

Settings :

Parameter	Information	Default value
mode	Transition mode (slide or fade)	slide
arrows	Display arrows	true
indicators	Display indicators	false
auto	Automatically change slides	true
delay	Delay between automatic slide changes (in ms)	5000
stoponhover	Stop auto transition if mouse is hover the carousel	true

Modals allows to show dynamic dialogs on the page.

Demo 1
Demo 2

Simple modal

<a class="btn" href="#" data-modal="#modal_target1">Simple modal</a>
   <div class="modal span5" id="modal_target1">
      <div class="modal-title"><h5>My modal title</h5> <div class="close">&times;</div></div>
      <div class="modal-content">Test hello</div>
      <div class="modal-footer"><input type="button" class="btn" value="Cancel" onclick="javascript:$('#modal_target1').trigger('close');"/> <input type="button" class="btn blue" value="Submit" onclick="javascript:$('#modal_target1').trigger('close');"/></div>
   </div>

Ajax modal

<a class="btn" href="ajax.html" data-modal="ajax" data-title="Ajax Modal">Ajax modal</a>

Ministrap provides simple jQuery hints. It's very easy to use, you just have to add the class .hint to your element, and add an attribute data-hint with the content of the hint. You can customize your hint with data-hint-position, data-hint-presistent and data-hint-class.

Examples :

Hint	Code
My link	<a href="#" data-hint="My normal hint">My link</a>
My link	<a href="#" data-hint-position="bottom" data-hint-permanent="true" data-hint-class="info" data-hint="My bottom info permanent hint">My link</a>
My link	<a href="#" data-hint-position="left" data-hint-class="error" data-hint="My error left hint">My link</a>
My link	<a href="#" data-hint-position="right" data-hint-permanent="true" data-hint="My right permanent hint">My link</a>
My link	<a href="#" class="btn" data-hint-position="top" data-hint-class="success" data-hint="My success hint">My link</a>

Just add <div class="to-top"></div> to your code. The miniSwipe plugin offers a simple way to add swipe movements on any element of the Webpage. It works on any browser supporting the Touch Events (safari mobile, chrome mobile, etc.).

To add a swipe action on an element, apply the miniSwipe plugin on the element on which the touch action will be done, and provide the functions that must be called to their corresponding parameter: swipeUp, swipeDown, swipeLeft and/or swipeRight.

Example (works on tablets and touch-screen mobiles) :

Swipe me

<div id="swipe_demo" style="width:150px;height:150px;background:#ddd;border:1px solid #aaa;">Swipe me </div>
<script type="text/javascript">
  $(document).ready(function(){
    $('#swipe_demo').miniSwipe({
      swipeUp: function(){ $(this).text($(this).text()+'UP ') },
      swipeDown: function(){ $(this).text($(this).text()+'DOWN ') },
      swipeLeft: function(){ $(this).text($(this).text()+'LEFT ') },
      swipeRight: function(){ $(this).text($(this).text()+'RIGHT ') }
    });
  });
</script>

The miniDatePicker plugin adds to date, time or datetime inputs, a little picker displayed on a popup allowing an easier selecting. The plugin automatically handles the browser language.

Paramètres :

Parameter	Information	Default value
type	Type of the input (date\|time\|datetime)	date
language	The display language for the date/time	automatic

Demo 1
Demo 2
Demo 3

Date:

Date: <input type="text" class="date-picker"/>

Time in french:

Time in french: <input type="text" class="date-picker" data-type="time" data-language="fr"/>

Date and time in russian:

Date and time in russian: <input type="text" class="date-picker" data-type="datetime" data-language="ru"/>

Tabs

Breadcrumb

Pagination

Message boxes & others

Dropdown

Carousel

First caption

Second caption

Third caption

First caption

Second caption

Third caption

Modals

My modal title

Hints

Back to top button

Swipe plugin

Date picker