preview/index.html
<!DOCTYPE html>
<html>
<head>
<title>Papillon CSS</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href='../src/min/test.css' rel='stylesheet' type='text/css'>
<!--<link href='../src/min/soft.min.css' rel='stylesheet' type='text/css'>!-->
<script src="../src/js/misc.js"></script>
<script src="../src/js/papillon.js"></script>
<script src="../src/js/dom.js"></script>
<link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Ubuntu' rel='stylesheet' type='text/css'>
<link href="https://fonts.googleapis.com/css?family=Cutive+Mono" rel="stylesheet">
<link href='https://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>
<!--<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">!-->
</head>
<body>
<header>
<img src="../logo.svg"></img>Papillon
<small>( pa.pi.jõ )</small>
</header>
<nav class="top" data-follow>
<div class="toggle right"></div>
<div class="links">
<div class="submenu" data-toggle="click">
<span>
Home
</span>
<div class="dropdown">
<span class="category">Category</span>
<a href="#">Containers</a>
<a href="#">Elements</a>
<a href="#">Design</a>
</div>
</div>
<div class="submenu" data-toggle="click">
<span>
Home 2
</span>
<div class="dropdown">
<a href="#">Bla</a>
<a href="#">Bli</a>
<a href="#">Blu</a>
</div>
</div>
<a href="#">Sweet</a>
<a href="#">Home</a>
</div>
</nav>
<!--
<nav class="side">
<div class="toggle"></div>
<div class="links">
<a href="#"><span> T </span>Salut</a>
<a href="#"><span> U </span>PD</a>
<a href="#"><span> V </span>Pleb</a>
<a href="#"><span> J </span>John Cena !! </a>
<a href="#"><span> B </span>Bulldong</a>
</div>
</nav>!-->
<div class="container-lg soft-col stack-md" id="content">
<div class="col-9 padding-lg">
<h1>
<a href="#h1-test" id="h1-test">
H1 Title</a>
<small>Second</small>
</h1>
<h2>
H2 Title
<small>Second</small>
</h2>
<h3>
H3 Title
<small>Second</small>
</h3>
<h4>
H4 Title
<small>Second</small>
</h4>
<h5>
H5 Title
<small>Second</small>
</h5>
<h6>
H6 Title
<small>Second</small>
</h6>
<!--<div class="soft-notif">You got a message</div>!-->
<h1 class="section-title">Section title</h1>
<img src="img.png" alt="Image de test" style="width: 200px"></img>
<div class="container-md force-hor text-center">
<div class="soft-row">
<div class="soft-col col-4">
<div class="col-3 border bg-subtle">Stack</div>
<div class="col-6 border bg-subtle">Stack</div>
<div class="col-3 border bg-subtle">Stack<br/>Stack</div>
</div>
<div class="col-2 border bg-subtle">Horiz</div>
<div class="col-2 border bg-subtle">Horiz</div>
<div class="col-2 border bg-subtle">Horiz</div>
<div class="col-2 border bg-subtle">Horiz</div>
</div>
<div class="soft-row">
<div class="col-4 border bg-subtle">Horiz</div>
<div class="col-4 border bg-subtle">Horiz</div>
<div class="col-4 border bg-subtle">Horiz</div>
</div>
</div>
<div id="heartbeat" class="animation-heartbeat">
</div>
<div id="prog" class="container-md text-center" style="height: 25px">
</div>
<div class="container-md text-center">
<div class="soft-col">
<div class="soft-row col-4">
<div class="col-8 border">1</div>
<div class="col-4 border">Test<br/>Test</div>
</div>
<div class="soft-row col-4">
<div class="col-7 border">1</div>
<div class="col-5 border">Test<br/>Test</div>
</div>
<div class="soft-row col-4">
<div class="col-6 border">1</div>
<div class="col-6 border">Test<br/>Test</div>
</div>
</div>
</div>
<div class="container-sm text-center">
<div class="soft-col">
<div class="soft-row">
<div class="col-4 col-offset-4 soft-tooltip">
<div class="tooltip top"><div>Tooltip !<br/>top</div></div>
<div class="tooltip right"><div>Tooltip !<br/>right</div></div>
<div class="tooltip bottom"><div>Tooltip !<br/>bottom</div></div>
<div class="tooltip left"><div>Tooltip !<br/>left</div></div>
1</div>
</div>
<div class="col-9 border"><button class="green fullWidth fullHeight">This is a button</button></div>
<div class="col-3 border">5</div>
</div>
</div>
<div class="container-sm text-center">
<div class="soft-col">
<div class="col border">Hi boys</div>
<div class="col border">Hi girls *tips fedora*</div>
<div class="col border">Hello I'm Rominou</div>
<div class="col border">Higebbbbbbbbbbbbbbb</div>
<div class="col border">Higrgregregergerg</div>
<div class="col border">Hiiiiiiiiiiiiiiiiiiiiiiiii</div>
<div class="col border">Hibbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
</div>
</div>
<div class="container-md soft-col">
<div class="soft-row col-12">
<div class="soft-col col-6">
<div class="col-6 border">Test</div>
<div class="col-6 border">Test</div>
</div>
<div>Hi</div>
</div>
<div class="soft-row col-12">
<div>Hello there</div>
<div>Hey guys</div>
</div>
</div>
<hr/>
<div class="showcase">
<div class="col-4 col-offset-4 soft-tooltip text-center" style="margin: 10px;">
<div class="tooltip top">
<div>Top !!!!!!!!!!!!</div>
</div>
<div class="tooltip right">
<div>Right !!!!!!!!!!!!!!!!!</div>
</div>
<div class="tooltip bottom">
<div>Bottom !!!!!!!!!!!!!!!!!!!!</div>
</div>
<div class="tooltip left">
<div>Left !!!!!!!!!!!!!!!!!!!!!!!</div>
</div>
Hover me !
</div>
</div>
<a id="test-fade" href="#test-fade">Test</a>
<a href="#">This is a link</a><br/>
<a href="#" target="_blank">Target blank</a><br/>
<span>This is a span</span>
<p>This is a paragraph with <code>some code</code></p>
<p>This is another paragraph</p>
<span class="spoiler">Your waifu is shit</span>
<div class="container">
<div class="spoiler-block">
<button>Toggle</button>
<div class="spoiler-content">Your waifu is fucking trash</div>
</div>
</div>
<!-- BUTTONS !-->
<button>This is a button</button>
<button class="success">Button</button>
<button class="primary">Button</button>
<button class="secondary">Secondary</button>
<button class="danger">Button</button>
<button class="warning">Button</button>
<button class="black">Button</button>
<button disabled>Disabled button</button>
<button class="outline">Button</button>
<button class="primary outline large">Button</button>
<button class="secondary outline large">Button</button>
<button class="success outline large">Button</button>
<button class="info outline large">Button</button>
<button class="danger outline large">Button</button>
<button class="warning outline large">Button</button>
<button class="black outline large">Button</button>
<button class="primary loading"></button>
<button class="primary loading large"></button>
<button class="danger loading"></button>
<h3>Liens</h3>
<a class="button" href="#">Button</a>
<a class="button btn-round danger" href="#">Button</a>
<a class="button btn-round primary" href="#">Button</a>
<a class="button btn-round large" href="#">Button</a>
<a class="button btn-round primary loading" href="#"></a>
<a class="button btn-round disabled" href="#">Button</a>
<button class="success" disabled>Button</button>
<button class="primary" disabled>Button</button>
<button class="danger" disabled>Button</button>
<button class="warning" disabled>Button</button>
<button class="black" disabled>Button</button>
<table class="text-center reactive">
<thead>
<td>Classical</td>
<td>Table</td>
<td>Design</td>
</thead>
<tbody>
<tr>
<td>Body</td>
<td>Body</td>
<td>Body</td>
</tr>
<tr>
<td>Body</td>
<td>Body</td>
<td>Body</td>
</tr>
<tr>
<td>Body</td>
<td>Body</td>
<td>Body</td>
</tr>
</tbody>
<tfoot>
<td>Foot</td>
<td>Foot</td>
<td>Foot</td>
</tfoot>
</table>
<table class="flat reactive text-center">
<thead>
<td>Flat</td>
<td>Table</td>
<td>Design</td>
</thead>
<tbody>
<tr>
<td>Body</td>
<td>Body</td>
<td>Body</td>
</tr>
<tr>
<td>Body</td>
<td>Body</td>
<td>Body</td>
</tr>
<tr>
<td>Body</td>
<td>Body</td>
<td>Body</td>
</tr>
</tbody>
<tfoot>
<td>Foot</td>
<td>Foot</td>
<td>Foot</td>
</tfoot>
</table>
<table class="flat alt text-center">
<thead>
<td>Flat</td>
<td>Table</td>
<td>Design</td>
<td>( Alternating )</td>
</thead>
<tbody>
<tr>
<td>Body</td>
<td>Body</td>
<td>Body</td>
<td>Body</td>
</tr>
<tr>
<td>Body</td>
<td>Body</td>
<td>Body</td>
<td>Body</td>
</tr>
<tr>
<td>Body</td>
<td>Body</td>
<td>Body</td>
<td>Body</td>
</tr>
<tr>
<td>Body</td>
<td>Body</td>
<td>Body</td>
<td>Body</td>
</tr>
</tbody>
<tfoot>
<td>Foot</td>
<td>Foot</td>
<td>Foot</td>
<td>Foot</td>
</tfoot>
</table>
<table class="min text-center">
<thead>
<td>Minimalistic</td>
<td>Table</td>
<td>Design</td>
</thead>
<tbody>
<tr>
<td>Body</td>
<td>Body</td>
<td>Body</td>
</tr>
<tr>
<td>Body</td>
<td>Body</td>
<td>Body</td>
</tr>
<tr>
<td>Body</td>
<td>Body</td>
<td>Body</td>
</tr>
</tbody>
<tfoot>
<td>Foot</td>
<td>Foot</td>
<td>Foot</td>
</tfoot>
</table>
<div class="container">
<form method="get">
<div class="input-col center">
<label>Name</label>
<input type="text" placeholder="Your name here" required/>
</div>
<div class="input-row">
<label>Surname</label>
<input type="text" placeholder="Your surname here" required/>
</div>
<div class="input-group">
<label>Choose this ?</label>
<input type="checkbox"/>
</div>
<div class="input-group">
<label>Choose a colour</label>
<input type="color"/>
</div>
<div class="input-group">
<label>Pick your birthday</label>
<input type="date"/>
</div>
<div class="input-group">
<label>Email</label>
<input type="email"/>
</div>
<div class="input-group">
<label>Send nudes</label>
<input type="file"/>
</div>
<div class="input-group">
<label>How old are you ?</label>
<input type="number"/>
</div>
<div class="input-group">
<label>hunter2</label>
<input type="password"/>
</div>
<div class="input-group">
<label>Who the best</label>
<input type="radio" name="rfm"/>
<input type="radio" name="rfm"/>
<input type="radio" name="rfm"/>
</div>
<div class="input-group">
<label>Range rover</label>
<input type="range"/>
</div>
<div class="input-group">
<label>we google now</label>
<input type="search"/>
</div>
<div class="input-group">
<label>hi bb got a 06 ?</label>
<input type="tel"/>
</div>
<div class="input-group">
<label>THE CLOCK</label>
<input type="time"/>
</div>
<div class="input-group">
<label>rominou.moe</label>
<input type="url"/>
</div>
<input class="button" type="submit" value="Submit">
</form>
</div>
<div class="container"></div>
<article class="first-letter-big first-letter-spacing">Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Vestibulum lobortis massa a tristique ultricies. Nullam non ex erat.<br/>
To search something use <kbd>Ctrl</kbd>+<kbd>F</kbd>
<br/>
<pre>
<code data-lang="Python">
Here is some sweet html code {
Actually this isn't HTML kappa
Kappa pride boys
}
</code>
</pre>
<pre>
<code data-lang="HTML">
Test you bitch
</code>
</pre>
Sed eu nisl a velit efficitur tristique. Duis bibendum mattis metus,
dignissim mattis eros eleifend vel. Maecenas faucibus, sem in gravida
varius, nisi quam dictum velit, eget fermentum sapien est eget risus.
<blockquote class="reverse">
This is a truly verified quote inserted right into the text
<footer>Rominou <cite>le magnifique</cite></footer>
</blockquote>
Nulla est nunc, scelerisque ut lorem lacinia, ultrices mattis arcu.
Cras felis urna, iaculis at elementum sit amet, accumsan molestie enim.
Suspendisse potenti. Suspendisse potenti. Integer pretium massa augue.
Vivamus hendrerit eu nisl a tempor. Curabitur rhoncus diam ornare
tempus lacinia. Nullam consectetur, arcu vel tincidunt laoreet, massa
neque eleifend ipsum, vitae efficitur est est ac turpis. Quisque at
hendrerit nisl.
</article>
<div class="notif-container">
</div>
<!--<soft-popup warning>
<span>Important message</span>
Blablabla<br/>
Some useless text
</soft-popup>!-->
</div>
<div class="col-3">
<nav class="aside">
<span class="category">Category</span>
<a href="#" class="current">Test</a>
<a href="#">Test 2</a>
<a href="#">Test 3</a>
<div class="submenu">
<span class="current">Submenu</span>
<div class="dropdown">
<a href="#">drop</a>
<a href="#" class="current">down</a>
</div>
</div>
</nav>
</div>
</div>
<!--<aside>
This is the aside
</aside>!-->
<footer>
Soft CSS 2016<br/>
Romain ARNAUD
</footer>
<script>
var p = new Papillon();
</script>
</body>
</html>