demo/index.html
<!DOCTYPE html>
<html>
<head>
<title>Papillon - Demo</title>
<meta charset="UTF-8">
<head>
<meta name="Content-Language" content="en">
<meta name="Description" content="Soft 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, soft css, Romain Arnaud">
<meta name="Subject" content="Soft 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/test.css" id="main-style">
<script src="../src/js/misc.js"></script>
<script src="../src/js/dom.js"></script>
<script src="../src/js/papillon.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'>
</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" data-follow>
<div class="toggle"></div>
<div class="links">
<div class="submenu" data-toggle="click">
<span>Content</span>
<div class="dropdown">
<a href="#section-titles">Titles</a>
<a href="#section-containers">Containers</a>
<a href="#section-buttons">Buttons</a>
<a href="#section-custom">Custom elements</a>
<a href="#section-modifiers">Modifiers</a>
<a href="#section-animations">Animations</a>
<a href="#section-progress">Progress</a>
</div>
</div>
<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>
<!-- TITLES !-->
<h1 class="section-header" id="section-titles">Titles</h1>
<div class="showcase">
<h1>
H1 Title
<small>Secondary text</small>
</h1>
<h2>
H2 Title
<small>Secondary text</small>
</h2>
<h3>
H3 Title
<small>Secondary text</small>
</h3>
<h4>
H4 Title
<small>Secondary text</small>
</h4>
<h5>
H5 Title
<small>Secondary text</small>
</h5>
<h6>
H6 Title
<small>Secondary text</small>
</h6>
</div>
<!-- CONTAINERS !-->
<h1 class="section-header" id="section-containers">Containers</h1>
<div class="showcase">
<div class="container-lg bg-subtle border text-center">
This is a large container ( 1200 px )
</div>
<div class="container-md bg-subtle border text-center">
This is a medium container ( 960 px )
</div>
<div class="container-sm bg-subtle border text-center">
This is a small container ( 750 px )
</div>
</div>
<!-- GRID LAYOUT !-->
<h1 class="section-header">Grid Layout</h1>
<div class="container-lg">
<div>
With Soft CSS, you can organize your components using a responsive
grid layout. <del>A lot</del> Pretty much all other CSS frameworks
can do that, but Soft CSS is different because it's easy to use,
and you have full control over it.
</div>
</div>
<div class="container-lg">
<div>
The layout is based on a 12-tiles grid, in which you put columns which
take a certain number of tiles. For example you can put 4 columns of
3 tiles each. If you want them to stack under a certain width, use the
class <code>.stack-lg</code>, <code>.stack-md</code> or
<code>.stack-sm</code> depending on the threshold width you need and
assign the <code>.soft-col</code> class to the container.
</div>
</div>
<div class="showcase">
<div class="container-lg text-center soft-col stack-lg">
<div class="col-3 border bg-subtle">Column</div>
<div class="col-3 border bg-subtle">Column</div>
<div class="col-3 border bg-subtle">Column</div>
<div class="col-3 border bg-subtle">Column</div>
</div>
</div>
<div class="container-lg">
If you don't want them to stack like that, put them in a
<code>.soft-row</code> instead of a <code>.soft-col</code>
</div>
<div class="showcase">
<div class="container-lg stack-lg text-center soft-row">
<div class="col-3 border bg-subtle">Column</div>
<div class="col-3 border bg-subtle">Column</div>
<div class="col-3 border bg-subtle">Column</div>
<div class="col-3 border bg-subtle">Column</div>
</div>
</div>
<div class="container-lg">
<div>
The nice thing is that you can use one inside of the other, so you
can stack responsive rows inside of a column, like in the example
below, where the global container is <code>.soft-row.stack-lg</code>,
containing 4 columns that won't stack. However, the first column
is a <code>.soft-col</code> containing 3 other columns that will stack.
<br/>So you get 3 columns that will stack when the display narrows + 3
columns that will never stack.
</div>
</div>
<div class="showcase">
<div class="container-lg force-hor text-center soft-row stack-lg">
<div class="soft-col col-4">
<div class="col-3 border bg-subtle">This column ...</div>
<div class="col-6 border bg-subtle">... and this one ...</div>
<div class="col-3 border bg-subtle">... and this one will stack</div>
</div>
<div class="col-2 border bg-subtle">This column ...</div>
<div class="col-3 border bg-subtle">... and this one ...</div>
<div class="col-3 border bg-subtle">... and this one will not</div>
</div>
</div>
<div class="container-lg">
<div>
And in reverse mode, you can stack rows which each contain multiple
columns
</div>
</div>
<div class="showcase">
<div class="container-md text-center soft-col stack-md">
<div class="soft-row col-4">
<div class="col-8 border bg-subtle">We will always</div>
<div class="col-4 border bg-subtle">stay together <3 </div>
</div>
<div class="soft-row col-4">
<div class="col-7 border bg-subtle">Don't go below me plz</div>
<div class="col-5 border bg-subtle">k dude chill</div>
</div>
<div class="soft-row col-4">
<div class="col-6 border bg-subtle">I don't know what text</div>
<div class="col-6 border bg-subtle">I will put here</div>
</div>
</div>
</div>
<div class="container-lg">
<div>
And finally, if you put tiles that are too big together, they will
wrap on a new line
</div>
</div>
<div class="showcase">
<div class="container-md text-center">
<div class="soft-col">
<div class="col-4 border bg-subtle">4</div>
<div class="col-4 border bg-subtle">4</div>
<div class="col-4 border bg-subtle">4</div>
<div class="col-4 border bg-subtle">4</div>
<div class="col-4 border bg-subtle">4</div>
<div class="col-4 border bg-subtle">4</div>
<div class="col-4 border bg-subtle">4</div>
</div>
</div>
</div>
<!-- BUTTONS !-->
<h1 class="section-header" id="section-buttons">Buttons</h1>
<div class="container-lg">
Soft CSS comes with a pack of redefined buttons, with a better and
more modern design than the default ones, and a bit of choice for the
colors. You can use it either by creating a button (
<code><button></code> ) or by using the class <code>.button</code>
on a link.
</div>
<div class="showcase">
<div class="container">
<button>Default button</button>
<a href="#" class="button primary">Primary link</a>
<button class="secondary">Secondary button</button>
<a href="#" class="button danger">Danger link</a>
<button class="warning">Warning button</button>
<button class="black">Black button</button>
</div>
You can use the class <code>.large</code> to mark a bigger button
<div class="container-lg">
<button class="large">Default button</button>
<button class="primary large">Large Primary</button>
<a href="#" class="button secondary large">Large Secondary link</a>
<button class="danger large">Large Danger</button>
<button class="warning large">Warning</button>
<button class="black large">Black</button>
</div>
And you can also use <code>.loading</code> and <code>.disabled</code>
<div class="container-md">
<button class="loading"></button>
<button class="primary loading"></button>
<button class="danger large loading"></button>
<button disabled>Disabled :s</button>
</div>
</div>
<!-- CUSTOM ELEMENTS !-->
<h1 class="section-header" id="section-custom">Custom Elements</h1>
<h2><small>( Or the components that make Soft CSS unique )</small></h2>
<div class="container-lg">
So while developping Soft CSS, I realized that the number of classes
started to grow really fast, and that at one point everybody using
the framework would be lost while reading the doc.<br/>
Then I learned about the ability to create custom HTML elements<br/>
So, when you're using Soft CSS and you want to create a popup alert
masking the whole screen, you don't need to do some ugly code like
this:<br/>
<pre><code data-lang="HTML">
<div class="popup alert">
<h2 class="popup-header">ALERT</h2>
<p>Alert message</p>
</div>
</code></pre>
<br/>
Instead, you use the custom element <code>soft-popup</code> like this:
<pre><code data-lang="HTML">
<soft-popup class="alert">
<span>ALERT</span>
<p>Alert message</p>
</soft-popup>
</code></pre>
<br/>
Don't see the difference ?<br/>
<b>That's because it is only the top of the iceberg.</b><br/>
When you want to create your popup dynamically, you have to create a
Javascript function creating a div, then set it the "popup" class,
then another thing and you end up with a big ass ugly function.<br/>
<b>But Soft CSS takes care of all that</b><br/>
In the "soft.js" file you will find all the constructors for the
custom elements, so if you want to create an alert popup you can do
it in <b>literally one line:</b><br/>
<pre><code data-lang="Javascript">
softPopup('alert', 'Alert header', 'Alert message');
</code></pre>
<br/>
You don't trust me ? Enter the line given in the example in the console
and watch what happens. You can also replace 'alert' by 'success',
'info' or 'warning' for more options.
<h3>Tooltips</h3>
Soft CSS comes with simple to use tooltips
<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>
</div>
<!-- OTHER !-->
<h1 class="section-header" id="section-modifiers">Modifiers classes</h1>
<div class="container-lg">
Soft CSS will ship with a lot of handy classes you can use to quickly
customize elements without a headache. Want an element to float right
without having to do some inline CSS or create a new class ? Just
use <code>.right</code><br/>
Here you can see 2 classes changing the first letter of a paragraph,
and the redefined blockquote
</div>
<div class="showcase">
<article text-justify class="first-letter-big first-letter-spacing clearfix">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Vestibulum lobortis massa a tristique ultricies. Nullam non ex erat. 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>
This is a truly verified quote inserted right into the text
</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.
<blockquote class="reverse clearfix">
A reverse quote with the source
<footer>Romain Arnaud in
<cite>40 ans toujours puceau</cite>
</footer>
</blockquote>
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>
<h1 class="section-header" id="section-animations">Animations</h1>
<div class="container-lg">
Soft CSS will also ship with a lot of beautiful CSS animations<br/>
Here is a heartbeat one ( actually there are 2 animations: one just
changes the scale of the element, the other the background color )
</div>
<div class="showcase">
<div id="heartbeat" class="animation-heartbeat">
</div>
</div>
<!--<soft-popup>
Custom element <code>soft-popup</code><br/>
Click on it to hide it
</soft-popup>!-->
<h1 class="section-header" id="section-progress">Progress</h1>
<div class="container-md">
<!--
I use table because I haven't coded the vertical lists yet :s
!-->
<table class="fullWidth flat alt text-center">
<thead>
<td>To Do</td>
<td>Doing</td>
<td>Done</td>
<tbody>
<tr>
<td>Better config file</td>
<td>Navigation menus</td>
<td>Titles</td>
</tr>
<tr>
<td>Animations</td>
<td>Forms</td>
<td>Buttons</td>
</tr>
<tr>
<td>Documentation</td>
<td>Custom elements</td>
<td>A cool front page ( yay )</td>
</tr>
<tr>
<td></td>
<td></td>
<td>Grid layout ( some bugs )</td>
</tr>
<tr>
<td></td>
<td></td>
<td>Tables</td>
</tr>
</tbody>
</table>
</div>
</main>
<!--<div class="banner-bot">
<div class="content">
<div class="container no-margin text-center">Change the theme</div>
<div class="container no-margin no-padding soft-col stack-sm">
<div class="col-4 no-margin">
<button class="fullWidth primary large" id="classic-theme">Classic</button>
</div>
<div class="col-4 no-margin">
<button class="fullWidth black large" id="dark-theme">Dark</button>
</div>
<div class="col-4 no-margin">
<button class="fullWidth secondary large" id="flashy-theme">Flashy</button>
</div>
</div>
</div>
<button class="close">Close</button>
</div>!-->
<script src="demo.js"></script>
<footer>
Papillon CSS 2016<br/>
Romain Arnaud
</footer>
</body>
</html>