index.html
<!DOCTYPE html>
<html>
<head>
<title>Papillon, the beautiful CSS framework</title>
<meta charset="UTF-8">
<meta name="Content-Language" content="en">
<meta name="Description" content="Papillon CSS, a powerful yet easy to use front-end framework for faster and easier web development.">
<meta name="Keywords" content="css framework, css, framework, css3, html5, javascript, papillon css, Romain Arnaud">
<meta name="Subject" content="Papillon CSS Framework">
<meta name="Author" content="Romain Arnaud">
<meta name="Publisher" content="Romain Arnaud">
<meta name="Identifier-Url" content="http://romainarnaud.fr">
<meta name="Geography" content="Montpellier, France, 34000">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href='https://fonts.googleapis.com/css?family=Ubuntu' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="src/min/papillon.min.css">
<script src="src/js/misc.js"></script>
<script src="src/js/papillon.js"></script>
<script src="src/js/dom.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<link href='https://fonts.googleapis.com/css?family=Source+Code+Pro' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-68620829-3', 'auto');
ga('send', 'pageview');
</script>
</head>
<body>
<header>
<img src="logo.svg"></img>Papillon
<small>( pa.pi.jõ )<br/>The beautiful, easy to use CSS framework</small>
</header>
<nav class="top">
<div class="toggle"></div>
<div class="links">
<a href="./demo">Demo</a>
<a href="./doc">Documentation</a>
<a href="getting-started.html">Getting started</a>
<a href="https://github.com/Rominou34/papillon">GitHub</a>
</div>
</nav>
<main>
<div class="container">
<h1 class="text-center">Beautiful CSS. Easily. Quickly.</h1>
</div>
<div class="container-lg stack-lg soft-col">
<div class="container stack-sm soft-col col-6">
<div class="col-6">
<h3 class="text-center">Easy</h3>
<p class="text-center">
Papillon comes with a clear syntax, easy to understand so you
actually spend your time coding
</p>
</div>
<div class="col-6">
<h3 class="text-center">Powerful</h3>
<p class="text-center">
Even though it's easy to use, Papillon ships with a lot of
features allowing you to create beautiful websites as you can
see in the <a href="./demo">demo</a>.
</p>
</div>
</div>
<div class="container stack-sm soft-col col-6">
<div class="col-6">
<h3 class="text-center">Responsive</h3>
<p class="text-center">
In 2016, it's purely unthinkable to develop computers-only
websites. Every feature of Papillon is designed to look great
on every screen size
</p>
</div>
<div class="col-6">
<h3 class="text-center">Complete</h3>
<p class="text-center">
Papillon is built using the CSS preprocessor
<a href="http://sass-lang.com/">SASS</a>. Quickly get started by
downloading the compiled CSS or build it yourself by downloading
and compiling the original source code
</p>
</div>
</div>
</div>
<div class="container-lg">
<h1 class="text-center">Quick tour</h1>
<section>
<h2 class="section-header">Grid and containers</h2>
<p>Papillon relies on containers and two classes, <code>.soft-col</code>
and <code>.soft-row</code> in order to have a fully responsive column system<br/>
More classes can be used to control the behaviour of your columns, if you want them
to stack or not depending on the screen size.
</p>
<div class="showcase">
<div class="container soft-col stack-sm text-center">
<div class="soft-col stack-lg col-6">
<div class="col-4 border bg-subtle">1.1</div>
<div class="col-4 border bg-subtle">1.2</div>
<div class="col-4 border bg-subtle">1.3</div>
</div>
<div class="soft-col stack-lg col-6">
<div class="col-4 border bg-subtle secondary">2.1</div>
<div class="col-4 border bg-subtle secondary">2.2</div>
<div class="col-4 border bg-subtle secondary">2.3</div>
</div>
</div>
</div>
</section>
<section>
<h2 class="section-header">Buttons</h2>
<p>The main goal of Papillon is to change the ugly default aspect of pretty
much every HTML element, and buttons are part of the party.<br/>
This is the default look for the <code><button></code> element,
but you can also use the <code>.button</code> class to enable it on a link
or a submit input.
</p>
<div class="showcase">
<h3>Basic buttons</h3>
<button>Default</button>
<button class="primary">Primary</button>
<button class="secondary">Secondary</button>
<button class="info">Info</button>
<button class="success">Success</button>
<button class="warning">Warning</button>
<button class="danger">Danger</button>
<h3>Modifier classes</h3>
<button class="primary large">Large primary</button>
<button class="secondary outline">Outline secondary</button>
<button class="warning btn-round">Round warning</button>
<button class="large danger btn-round outline">Large round outline danger</button>
<h3>Loading and disabled states</h3>
<button class="loading primary"></button>
<button class="large loading secondary"></button>
<button class="success large" disabled>Disabled</button>
<button class="outline btn-round loading"></button>
</div>
</section>
<section>
<h2 class="section-header">Custom elements</h2>
<p>Papillon isn't only CSS, it also ships with some JS. By importing
<code>papillon.min.js</code> into your website, some of it will automatically
run at the start ( such as the function validating inputs on a form ), while
the rest are only function provided by the framework that you can use
in order to gain time
</p>
<h3>How do I use them ?</h3>
<p>Just create on instance of <code>Papillon()</code> that you will
use to run the functions:
<pre>
<code>var p = new Papillon();</code>
</pre>
</p>
<h3>Example</h3>
<p>Here is an example of a function shipped in <code>papillon.min.js</code>.<br/>
Called "notification", this function allows you to easily create a notification
of 4 differents types ( info, success, warnig, danger ), appearing on the bottom
right corner of the screen.<br/>
<strong>Example use:</strong>
<pre>
<code>p.notification("success","Congratulations on being awesome ;)");</code>
</pre>
<button class="large success" onclick="p.notification('success','Congratulations on being awesome ;)');">
Run
</button>
<i><strong>Note:</strong> For now, you can't close notifications and nothing happen
when you click on them but it will be added in the near future</i>
</p>
</div>
<hr/>
<div class="container stack-lg col-12 soft-col text-center">
<div class="col-4">
<h4>Want to take a look ?</h4>
<a href="./demo" class="button primary large">
Look at the demo
</a>
<p>
<br/>
Happily, I provided some demo pages so you can see the extent of
its power
</p>
</div>
<div class="col-4">
<h4>Want to try it out ?</h4>
<a href="https://github.com/Rominou34/papillon" class="button primary large">
Check out the GitHub
</a>
<p>
<br/>
Everything regarding the download, informations or even the
ability to contribute can be found on the GitHub of the project
</p>
</div>
<div class="col-4">
<h4>Want to check out the doc ?</h4>
<a href="./doc" class="button primary large">
Documentation
</a>
<p>
<br/>
The documentation isn't there yet, I will start working on it soon.
</p>
</div>
<div class="col-12 margin-lg">
<i><b>Note:</b> The framework is still in development so
watch the repo if you want to be aware of the latest features</i>
</div>
</div>
</main>
<footer>
Papillon CSS 2016<br/>
Romain Arnaud
</footer>
<script>var p = new Papillon();</script>
</body>
</html>