-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
224 lines (218 loc) · 10.1 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
<!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>