Heading

    <label>Simple</label>
    <button class="button -primary touch">
      <span>Bouton</span>
    </button>
    <button class="button touch">
      <span>Bouton</span>
    </button>
    <button class="button touch">
      <i class="icon -sun"></i>
      <span>Bouton</span>
    </button>
    <button class="button touch toggle-loading-bar">
      <span>Bouton</span>
      <i class="icon -arrow-right"></i>
    </button>
    <label>With -round</label>
    <button class="button touch -round">
      <i class="icon -sun"></i>
      <span>Button</span>
    </button>
    <label>With -disabled</label>
    <input type="submit" value="button" disabled class="button"/>

     window.setInterval(function(){
      $(".toggle-loading-bar").each(function(){
    		$(this).toggleClass("-loading-bar");
    	});
    }, 3000);

<label>Simple</label>
<div class="checkbox">
	<input id="checkbox2" type="checkbox"/>
	<label for="checkbox2">
		<span>Apples</span>
	</label>
</div>
<label>Checked</label>
<div class="checkbox">
	<input id="checkbox3" type="checkbox" checked/>
	<label for="checkbox3">
		<span>Lemons</span>
	</label>
</div>
<label>Disabled</label>
<div class="checkbox">
<input id="checkbox1" type="checkbox" disabled="disabled"/>
	<label for="checkbox1">
		<span>Tomatoes</span>
	</label>
</div>

<label>Simple</label>
<hr/>
<hr class="-lines" />
<hr class="-dashed -half -center" />
<hr class="-double  -half" />
<hr class="-gradient -tiny" />
<hr class="-triangle -quart" />
<label>With data-title</label>
<hr data-title="another title" />
<hr class="-title-left" data-title="yet another title" />
<hr class="-title-right" data-title="title right" />
<div class="hr"><span><i class="icon -heart"></i></span></div>
<div class="hr"><button class="button"><i class="icon -top-arrow"></i>Go to top?</button></div>

 

<label>Simple</label>
<input type="text" placeholder="test"/>
<label>With -round -large</label>
<input class="-round -large" type="text" placeholder="test" required />

 

    <label>Simple</label>
    <blockquote>The saddest aspect of life right now is that science gathers knowledge faster than society gathers wisdom.</blockquote>
    <label>With -pullquote</label>
    <blockquote class="-pullquote">
      <p>The saddest aspect of life right now is that science gathers knowledge faster than society gathers wisdom.</p>
      <footer>Isaac Asimov</footer>
    </blockquote>

 

<label>Simple</label>
<div class="radio -primary">
	<input id="radio1" type="radio" name='radio-group' />
	<label for="radio1">Apples</label>
</div>
<label>Checked</label>
<div class="radio">
	<input id="radio2" type="radio" name='radio-group' checked='checked' />
	<label for="radio2">Lemons</label>
</div>
<label>Disabled</label>
<div class="radio">
	<input id="radio3" type="radio" name='radio-group' disabled="disabled"/>
	<label for="radio3">Tomatoes</label>
</div>

 

<label>Simple</label>
<div class="tag"><span>Html</span></div>
<div class="tag"><span><i class="icon -sun"></i>Test</span></div>
<div class="tag"><img src="images/joe.jpg"/><span>Joe</span></div>
<br/>
<label>With -square</label>
<div class="tag -square -uppercase -blur"><span>Thibaud</span></div>
<div class="tag -square -uppercase -blur"><i class="icon -user"></i><span>Thibaud</span></div>
<br/>
<label>With -round</label>
<div class="tag -round"><span>2</span></div>
<div class="tag -round"><span>Thibaud</span></div>
<div class="tag -round -no-border"><img src="images/joe.jpg"/><span> Joe </span></div>
<label>With -ticket</label>
<div class="tag -ticket"><span>Html</span></div>
<div class="tag -ticket"><span>Js</span></div>
<label>With -pointing</label>
<div class="tag -pointing"><span>42</span></div>
<div class="tag -pointing -bottom"><span>42</span></div>
<div class="tag -pointing -left"><span>42</span></div>
<div class="tag -pointing -right"><span>42</span></div>
<label>With -empty</label>
<div class="tag -round -empty"></div>
<div class="tag -circular -empty"></div>
<br/>
<label>With -corner</label>
<div class="tag -corner -top-left"><span> 32 </span></div>
<div class="tag -corner -top-left"><i class="icon -sun"></i></div>
<div class="tag -corner -top-right"><span> 3 </span></div>
<div class="tag -corner -top-right"><i class="icon -sun"></i></div>

     $(".toggle-active").click(function(){
    	$(this).toggleClass("-line-primary");
    });

    <label>Simple</label>
    <label>
      <i class="icon -sun"></i>
      With icon
    </label>
    <label class="-step">
      <span>1</span>
      With -step
    </label>
    <label class="-step -complete toggle-complete">
      <span>2</span>
      With -step -complete
    </label>

 

    <label>With -small</label>
    <div class="progress -small">
      <div class="bar"></div>
    </div>
    <div class="progress -small -wick">
      <div style="width:30%" class="bar"></div>
    </div>
    <label>With -inner</label>
    <div class="progress -inner">
      <div style="width:50%" class="bar">
        <span>60 %</span>
      </div>
    </div>
    <div class="progress -inner -round">
      <div style="width:60%" class="bar ">
        <span>80 %</span>
      </div>
    </div>
    <label>With animation</label>
    <div class="progress -round -active">
      <div style="width:70%" class="bar">
        <span>70 %</span>
      </div>
    </div>
    <div class="progress -dashed">
      <div style="width:100%" class="bar">
        <span>100 %</span>
      </div>
    </div>

     var getRandomInt = function(min, max) { return Math.floor(Math.random() * (max - min + 1)) + min; }
    window.setInterval(function(){
    	$(".progress .bar").each(function() {
    		let progressValue = getRandomInt(0,100);
    		$(this).css("width",  progressValue+ "%");
    		$(this).find("span").text(progressValue+"%");
    	});
    }, 3000);

    <div class="rating -activable -thumb-up">
      <div class="level"></div>
    </div>
    <div class="rating -activable -thumb-down">
      <div class="level"></div>
    </div>
    <div class="rating -activable -heart">
      <div class="level touch -visible -active"></div>
      <div class="level touch -visible -active"></div>
      <div class="level touch -visible"></div>
      <div class="level touch -visible"></div>
      <div class="level touch -visible"></div>
    </div>
    <div class="rating -star -warning">
      <div class="level -active"></div>
      <div class="level -active"></div>
      <div class="level -active"></div>
      <div class="level"></div>
      <div class="level"></div>
    </div>

     $('.rating.-activable .level').hover(function() {
      $(this).addClass('-to-active');
      $(this).parent().find('.level:lt(' + $(this).index() + ')').addClass('-to-active');
      $(this).parent().find('.level:gt(' + $(this).index() + ')').addClass('-to-not-active');
    }).mouseout(function() {
      $(this).parent().find('.level').removeClass('-to-active');
      $(this).parent().find('.level:gt(' + $(this).index() + ')').removeClass('-to-not-active');
    }).click(function() {
      $(this).removeClass('-to-active').addClass('-active');
    	$('.rating .level').removeClass("-activating");
    	$(this).addClass("-activating");
      $(this).parent().find('.level:lt(' + $(this).index() + ')').removeClass('-to-not-active').addClass('-active');
      $(this).parent().find('.level:gt(' + $(this).index() + ')').removeClass('-to-not-active').removeClass('-active');
    });

<label>Simple</label>
<div class="toggle">
	<input id="toggle1" type="checkbox">
	<label for="toggle1"><span>Apples</span></label>
</div>
<label>Checked</label>
<div class="toggle -round touch">
	<input id="toggle2" type="checkbox" checked="checked">
	<label for="toggle2"><span>Lemons</span></label>
</div>
<label>Disabled</label>
<div class="toggle -round">
	<input id="toggle3" type="checkbox" checked="checked" disabled>
	<label for="toggle3"><span>Tomatoes</span></label>
</div>

 

    <div class="video toggle-video">
	<div class="video-box">
		<div class="play"></div>
		<img class="video-cover" src="images/background/leaf.jpg"/>
	</div>
	<iframe width="400" height="300" src="https://www.youtube.com/embed/cSC95AiLlM0" frameborder="0" allowfullscreen></iframe>
</div>

$(".toggle-video").click(function(){
			$(this).addClass("-activating");
			window.setTimeout(function(){
				$(".toggle-video").addClass("-active");
				$(".toggle-video").removeClass("-activating");
			}, 150);
		});
		window.setInterval(function(){
			$(".toggle-video").removeClass("-active");
		}, 3000);

    <label>Simple</label>
    <div class="bubble">
        <img src="images/joe.jpg"/>
        <div class="content">
            <div class="header">
                <span class="name">Joe</span>
                <span class="date">17h34</span>
                <div class="admin">
                    <i class="icon -pencil"></i>
                </div>
            </div>
            <p>Hello Elliot, how are u ?</p>
        </div>
    </div>
    <label>With -mine</label>
    <div class="bubble -mine toggle-bounce">
        <img src="images/elliot.jpg"/>
        <div class="content">
            <div class="header">
                <span class="name">Elliot</span>
                <span class="date">17h36</span>
                <div class="admin">
                    <i class="icon -pencil"></i>
                </div>
            </div>
            <p>Hey! I'm fine, and you?</p>
        </div>
    </div>
    <label>With -minimalist</label>
    <div class="bubble -minimalist">
        <img src="images/elliot.jpg"/>
        <div class="content">
            <div class="header">
                <span class="name">Elliot</span>
                <span class="date">17h36</span>
                <div class="admin">
                    <i class="icon -pencil"></i>
                </div>
            </div>
            <p>Lorem ipsum dolor ascim emet dolor ipsum orem isma ole orem ipsum dolor ascim emet dolor ipsum orem isma ole</p>
        </div>
    </div>
    <div class="bubble -minimalist">
        <img src="images/elliot.jpg"/>
        <div class="content">
            <div class="header">
                <span class="name">Elliot</span>
                <span class="date">17h36</span>
                <div class="admin">
                    <i class="icon -pencil"></i>
                </div>
            </div>
            <p>Hey! I'm fine, and you?</p>
            <p>Are u there ?</p>
        </div>
    </div>
     window.setInterval(function() {
      $(".toggle-bounce").toggleClass("hide");
    }, 3000);

    <div class="background center -visible -fixed">
      <div class="filter"></div>
      <div class="gradient"></div>
      <div class="image" style="background-image:url(images/background/animated/dog.gif);"></div>
      <div class="content center-wrapper"><h5>Title</h5></div>
    </div>

 

    <label>Simple</label>
    <figure class="filter -nashville -example">
      <img class="rotate-img" src="images/background/leaf.jpg">
      <figcaption>
        <h6 class="title">Title</h6>
        <span class="desc">Dzongsar, Tibet 2004</span>
      </figcaption>
    </figure>
    <br/>
    <label>With filter -seventies</label>
    <figure class="filter -seventies -example">
      <img class="rotate-img" src="images/background/leaf.jpg">
      <figcaption>
        <h6 class="title">Title</h6>
        <span class="desc">Dzongsar, Tibet 2004</span>
      </figcaption>
    </figure>

 

<label>With right tag</label>
<fieldset class="-has-icon">
	<i class="icon -lock"></i>
	<input type="password" placeholder="Password" />
	<div class="tag visible -line-danger -left -pointing">
		<span>Password incorrect</span>
	</div>
</fieldset>
<fieldset class="-has-icon -large -has-tag">
	<i class="icon -lock"></i>
	<label>With sub tag</label>
	<input type="password" placeholder="Password" />
	<div class="tag visible -line-danger -large -top -pointing">
		<span>Votre password est inccorect</span>
	</div>
</fieldset>

 

    <div class="dropdown toggle-dropdown">
      <div class="merge -large -horizontal">
        <input type="text" id="job-input" placeholder="Dernier métier que vous ayez exercé..."/>
        <button class="button -primary toggle-loading"><span>Go !</span></button>
      </div>
      <div class="results">
        <ul>
          <li class="touch">Aide-soignant</li>
          <li class="touch">A<span class="highlight">id</span>e-soignante</li>
          <li class="touch">Aide-soignante2</li>
          <li class="touch">Aide-soignante3</li>
          <li class="touch">Aide-soignante3</li>
          <li class="touch">Aide-soignante3</li>
          <li class="touch">Aide-soignante3</li>
        </ul>
      </div>
    </div>

     $(".toggle-dropdown").focusin(function() {
    	$(this).addClass("-visible");
    });
    $(".toggle-dropdown input").blur(function() {
    	$(this).parent().removeClass("-visible");
    	$(this).parent().parent().removeClass("-visible");
    });

    <label>Simple</label>
    <div class="card">
      <div class="progress -small">
        <div class="bar"></div>
      </div>
      <p>The saddest aspect of life right now is that science gathers knowledge faster than society gathers wisdom.</p>
    </div>
    <label>With color</label>
    <div class="card -primary">
      <header class="header">
        <h5>Header Title</h5>
      </header>
      <p>The saddest aspect of life right now is that science gathers knowledge faster than society gathers wisdom.</p>
      <footer class="footer merge -large -horizontal">
        <button class="button">Accept</button>
        <button class="button">Decline</button>
      </footer>
    </div>

 

    <label>Simple</label>
    <div class="message">
      <h5><i class="icon -sun"></i>Title</h5>
      <p>The saddest aspect of life right now is that science gathers knowledge faster than society gathers wisdom.</p>
    </div>
    <label>With -with-intent -line-primary</label>
    <div class="message -with-intent -line-primary">
      <i class="icon status -sun"></i>
      <h5>Title</h5>
      <p>The saddest aspect of life right now is that science gathers knowledge faster than society gathers wisdom.</p>
    </div>

 

    <div class="shape one"></div>
    <div class="shape two"></div>

 

<label>Simple</label>
<table>
	<thead>
		<tr>
			<th>Name</th>
			<th>Age</th>
			<th>Sex</th>
			<th>Location</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>Thibaud Frere</td>
			<td>24</td>
			<td>Male</td>
			<td>Paris</td>
		</tr>
		<tr>
			<td>Anthony Lacroix</td>
			<td>26</td>
			<td>Male</td>
			<td>Metz</td>
		</tr>
	</tbody>
</table>
    <br/>
    <label>Simple</label>
<table class="-quad">
	<thead>
		<tr>
			<th class="empty shrink"></th>
			<th>Age</th>
			<th>Sex</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td class="shrink"><button class="button -line-primary -no-border -no-gradient"><i class="icon -cross"></i></button></td>
			<td>24</td>
			<td>Male</td>
		</tr>
		<tr>
			<td class="shrink"><button class="button -line-primary -no-border -no-gradient"><i class="icon -cross"></i></button></td>
			<td>26</td>
			<td>Male</td>
		</tr>
	</tbody>
</table>

 

    <label>Simple</label>
    <ul class="list">
      <li class="item touch">
        <img class="head grey -circle" src="images/joe.jpg"/>
        <div class="content">
          <h6 class="title">With circle image</h6>
          <p class="desc">Lorem ipsum dolor</p>
        </div>
      </li>
      <li class="item -has-notif touch">
        <i class="head _bg-grey-lighten-2 icon -sun"></i>
        <div class="content">
          <h6 class="title">With icon</h6>
          <p class="desc">Lorem ipsum dolor</p>
        </div>
        <div class="tag notif -corner -top-right -primary">
          <span> 32 </span>
        </div>
      </li>
      <li class="item touch -has-notif">
        <img class="head grey -circle" src="images/joe.jpg"/>
        <div class="content">
          <h6 class="title">With tags</h6>
          <div class="desc">
            <div class="tag">
              <i class="icon -sun"></i>
              <span>Thibaud</span>
            </div>
				<div class="tag">
              <i class="icon -sun"></i>
              <span>Anthony</span>
            </div>
          </div>
        </div>
      </li>
      <li class="item touch -headless">
        <div class="content">
          <h6 class="title">Headless with chevron</h6>
          <p class="desc">Lorem ipsum dolor</p>
        </div>
        <div class="action">
          <i class="icon -chevron-right"></i>
        </div>
      </li>
    </ul>

 

    <div class="tip -bottom"><button class="button"><i class="icon -sun"></i><span>Hover me</span></button><div class="tag -pointing -top"><span>This is a tip</span></div></div>

     $('.tip').mouseover(function(){
    	$(this).addClass("-visible");
    });
    $('.tip').mouseout(function(){
    	$(this).removeClass("-visible");
    });

    <div class="isolate">
      <div>
        <input type="text" placeholder="Coucou"/>
      </div>
    </div>

     $(".isolate input").focus(function(){
    	var $element = $(this).closest(".isolate");
    	$element.addClass("-activating");
    	window.setTimeout(function(){
    		$element.addClass("-active");
    	}, 50);
    });
    $(".isolate input").blur(function(){
    	var $element = $(this).closest(".isolate");
    	$element.removeClass("-active");
    	window.setTimeout(function(){
    		$element.removeClass("-activating");
    	}, 150);
    });

    <div class="card level-1 toggle-level"><p>Ground</p></div>
    <div class="card level-2 toggle-level"><p>Level 2</p></div>
    <div class="card level-3 toggle-level"><p>Level 3</p></div>
    <div class="card level-4 toggle-level"><p>Level 4</p></div>
    <div class="card level-5 toggle-level"><p>Level 5</p></div>
    <div class="card level-6 toggle-level"><p>Level 6</p></div>

 

    <label>Button</label>
    <button class="button loading toggle-loading touch">
      <i class="icon -sun"></i>
      <span>Bouton</span>
    </button>
    <label>Card</label>
    <div class="card loading toggle-loading -primary">
      <p>The saddest aspect of life right now is that science gathers knowledge faster than society gathers wisdom.</p>
    </div>
    <label>Entire list</label>
    <ul class="list loading toggle-loading">
      <li class="item touch">
        <img class="head grey -circle" src="images/joe.jpg"/>
        <div class="content">
          <h6 class="title">Item</h6>
          <p class="desc">bla blbla blalabla</p>
        </div>
      </li>
    </ul>
    <label>List item</label>
    <ul class="list">
      <li class="item touch loading toggle-loading">
        <img class="head grey -circle" src="images/joe.jpg"/>
        <div class="content">
          <h6 class="title">Item</h6>
          <p class="desc">bla blbla blalabla</p>
        </div>
      </li>
      <li class="item touch">
        <img class="head grey -circle" src="images/joe.jpg"/>
        <div class="content">
          <h6 class="title">Item</h6>
          <p class="desc">bla blbla blalabla</p>
        </div>
      </li>
    </ul>

     window.setInterval(function() {
    	$(".toggle-loading").each(function() {
    		$(this).toggleClass("loading");
    	});
    }, 3000);

    <label>Simple</label>
    <figure class="filter -grayscale -example">
      <img src="images/background/leaf.jpg">
      <figcaption>
        <h6 class="title">Title</h6>
        <span class="desc">Dzongsar, Tibet 2004</span>
      </figcaption>
    </figure>
    <br/>
    <label>With filter -blur</label>
    <figure class="filter -blur -example">
      <img src="images/background/leaf.jpg">
      <figcaption>
        <h6 class="title">Title</h6>
        <span class="desc">Dzongsar, Tibet 2004</span>
      </figcaption>
    </figure>

 

<label>Horizontal</label>
<div class="merge -horizontal">
	<fieldset class="-has-icon">
		<i class="icon -lock"></i>
		<input type="password" placeholder="Password" />
	</fieldset>
	<button class="button -primary -icon-only -no-gradient">
		<i class="icon -pencil"></i>
	</button>
	<button class="button -primary -icon-only -no-gradient">
		<i class="icon -cross"></i>
	</button>
</div>
<div class="merge -horizontal">
  <input class="-round" type="password" placeholder="Password" />
  <button class="button loading -primary -round -only-icon toggle-loading ">
    <i class="icon -sun"></i>
  </button>
</div>
<div class="merge -large -horizontal">
	<button class="button -small -icon-only loading toggle-loading toggle-fail">
		<i class="icon -sun"></i>
	</button>
	<button class="button -small -icon-only">
		<i class="icon -sun"></i>
	</button>
	<button class="button -small -icon-only">
		<i class="icon -moon"></i>
	</button>
</div>
<label>Vertical</label>
<div class="merge -large -vertical">
	<fieldset class="">
		<input type="password" placeholder="Password" />
	</fieldset>
	<fieldset class="-has-icon -right">
		<i class="icon -eye"></i>
		<input type="password" placeholder="Password" />
	</fieldset>
	<button class="button loading -primary toggle-loading toggle-success">
		<span>Se connecter</span>
	</button>
</div>

    <div class="radio -primary touch ">
      <input id="radio4" type="radio" name='radio-group' />
      <label for="radio4"<span>Apples</span></label>
    </div>
    <div class="radio -primary touch ">
      <input id="radio5" type="radio" name='radio-group' checked/>
      <label for="radio5"<span>Apples</span></label>
    </div>
    <br/>
    <div class="checkbox touch ">
      <input id="checkbox4" type="checkbox"/>
      <label for="checkbox4">
        <span>Lemons</span>
      </label>
    </div>
    <br/>
    <div class="toggle -round touch ">
      <input id="toggle4" type="checkbox">
      <label for="toggle4"><span>Tomatoes</span></label>
    </div>
    <div class="card touch">
      <p> Hello world </p>
    </div>
    <button class="button touch">
    <i class="icon -sun"></i>
    <span>Bouton</span>
    </button>
    <button class="button touch -no-border">
    <i class="icon -sun"></i>
    <span>Bouton</span>
    </button>
    <button class="button touch -no-border -icon-only -visible">
    <i class="icon -sun"></i>
    </button>

     $(".touch, .button:not(.-loading):not(.-disabled):not([disabled])").click(function(e){
    var elem, d, x, y;
      console.log(2);
      if($(this).find(".touch-elem").length === 0)
        $(this).prepend("
");
      elem = $(this).find(".touch-elem");
      elem.removeClass("animate");
      if(!elem.height() && !elem.width()){
          d = Math.max($(this).outerWidth(), $(this).outerHeight());
          elem.css({height: d, width: d});
      }
      x = e.pageX - $(this).offset().left - elem.width()/2;
      y = e.pageY - $(this).offset().top - elem.height()/2;
      elem.css({top: y + 'px', left: x + 'px'}).addClass("animate");
    });

<button class="button open-panel">Open panel</button>
<div class="panel -panel -left">
      <div class="overlay close-panel"></div>
      <div class="content">
        <div class="content-wrapper">
			<header class="header">
				<h5>Panel title</h5>
				<div class="close-button close-panel">
				<i class="icon -cross"></i>
				</div>
			</header>
        </div>
      </div>
    </div>

 $(".open-panel").click(function(){
			$(".panel").addClass("-opening");
			window.setTimeout(function(){
				$(".panel").addClass("-open");
				$(".panel").removeClass("-opening");
			}, 350);
		});
		$(".close-panel").click(function(){
			$(".panel").addClass("-closing");
			window.setTimeout(function(){
				$(".panel").removeClass("-open");
				$(".panel").removeClass("-closing");
			}, 350);
		});

    <button class="button open-modal">Open modal</button>
    <div class="modal">
      <div class="overlay close-modal"></div>
      <div class="content">
        <div class="card content-wrapper">
          <header class="header">
				<h5>Modal title</h5>
				<div class="close-button close-modal">
					<i class="icon -cross"></i>
				</div>
			</header>
          <p>The saddest aspect of life right now is that science gathers knowledge faster than society gathers wisdom.</p>
			<footer class="footer merge -large -horizontal">
        <button class="button">Accept</button>
        <button class="button">Decline</button>
      </footer>
		</div>
      </div>
    </div>

$(".open-modal").click(function() {
			$(".modal").addClass("-opening");
			window.setTimeout(function() {
				$("body").addClass("no-scroll");
				$(".modal").addClass("-open");
				$(".modal").removeClass("-opening");
			}, 600);
		});
		$(".close-modal").click(function() {
			$(".modal").addClass("-closing");
			window.setTimeout(function() {
				$(".modal").removeClass("-open");
				$(".modal").removeClass("-closing");
				$("body").removeClass("no-scroll");
			}, 350);
		});