This repository has been archived by the owner on Jul 31, 2021. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 6
/
index.html
330 lines (330 loc) · 16.6 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
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Butns - An advanced buttons library</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Josefin+Sans|Pacifico" rel="stylesheet">
<link rel="stylesheet" href="dist/butns.min.css">
<link rel="stylesheet" href="site/css/style.css">
<meta name="description" content="Butns is an advanced buttons library for your website, using a set of pre defined classes you can fully customize your button and step up your website's design." />
<title>Butns</title>
<link rel="apple-touch-icon" sizes="180x180" href="icon/apple-touch-icon.png">
<link rel="icon" type="image/png" href="icon/favicon-32x32.png" sizes="32x32">
<link rel="icon" type="image/png" href="icon/favicon-16x16.png" sizes="16x16">
<link rel="manifest" href="icon/manifest.json">
<link rel="mask-icon" href="icon/safari-pinned-tab.svg" color="#5bbad5">
<meta name="theme-color" content="#ffffff">
</head>
<body>
<div class="header" id="header">
<a href="https://github.com/ahmedtarek2134/Butns" class="fa fa-github fa-5x"></a>
<div class="content-wrapper">
<h1>Butns</h1>
<h3>V1.3.0</h3>
<p>An advanced buttons library making your life a bit easier :)</p>
<br>
<p id="code">npm install --save butns</p>
<br>
<a href="https://github.com/ahmedtarek2134/Butns/archive/master.zip" class="butn white outline transition shadow">
<i class="fa fa-download"></i> Download
</a>
<a href="#usage" class="butn white outline transition shadow">
<i class="fa fa-file"></i> Documentation
</a>
</div>
<p id="project">Project made by Ahmed Tarek <a href="https://github.com/ahmedtarek2134">@ahmedtarek2134</a></p>
</div>
<div class="about section">
<h1>About <span>Butns<span></h1>
<p>Butns is an advanced buttons library for your website, using a set of pre defined classes you can fully customize your button and step up your website's design.</p>
</div>
<hr>
<div class="reference section">
<h1 class="title"><span>Butns</span> Reference</h1>
<p>Inspect any button and check the classes to see how it's done!</p>
<div class="buttons">
<div class="red">
<button class="butn red">Butn</button>
<button class="butn red dark">Butn</button>
<button class="butn red light">Butn</button>
<button class="butn red outline">Butn</button>
<button class="butn red outline dark">Butn</button>
<button class="butn red outline light">Butn</button>
<button class="butn red gradient">Butn</button>
</div>
<div class="pink">
<button class="butn pink">Butn</button>
<button class="butn pink dark">Butn</button>
<button class="butn pink light">Butn</button>
<button class="butn pink outline">Butn</button>
<button class="butn pink outline dark">Butn</button>
<button class="butn pink outline light">Butn</button>
<button class="butn pink gradient">Butn</button>
</div>
<div class="purple">
<button class="butn purple">Butn</button>
<button class="butn purple dark">Butn</button>
<button class="butn purple light">Butn</button>
<button class="butn purple outline">Butn</button>
<button class="butn purple outline dark">Butn</button>
<button class="butn purple outline light">Butn</button>
<button class="butn purple gradient">Butn</button>
</div>
<div class="deep-purple">
<button class="butn deep-purple">Butn</button>
<button class="butn deep-purple dark">Butn</button>
<button class="butn deep-purple light">Butn</button>
<button class="butn deep-purple outline">Butn</button>
<button class="butn deep-purple outline dark">Butn</button>
<button class="butn deep-purple outline light">Butn</button>
<button class="butn deep-purple gradient">Butn</button>
</div>
<div class="indigo">
<button class="butn indigo">Butn</button>
<button class="butn indigo dark">Butn</button>
<button class="butn indigo light">Butn</button>
<button class="butn indigo outline">Butn</button>
<button class="butn indigo outline dark">Butn</button>
<button class="butn indigo outline light">Butn</button>
<button class="butn indigo gradient">Butn</button>
</div>
<div class="blue">
<button class="butn blue">Butn</button>
<button class="butn blue dark">Butn</button>
<button class="butn blue light">Butn</button>
<button class="butn blue outline">Butn</button>
<button class="butn blue outline dark">Butn</button>
<button class="butn blue outline light">Butn</button>
<button class="butn blue gradient">Butn</button>
</div>
<div class="light-blue">
<button class="butn light-blue">Butn</button>
<button class="butn light-blue dark">Butn</button>
<button class="butn light-blue light">Butn</button>
<button class="butn light-blue outline">Butn</button>
<button class="butn light-blue outline dark">Butn</button>
<button class="butn light-blue outline light">Butn</button>
<button class="butn light-blue gradient">Butn</button>
</div>
<div class="cyan">
<button class="butn cyan">Butn</button>
<button class="butn cyan dark">Butn</button>
<button class="butn cyan light">Butn</button>
<button class="butn cyan outline">Butn</button>
<button class="butn cyan outline dark">Butn</button>
<button class="butn cyan outline light">Butn</button>
<button class="butn cyan gradient">Butn</button>
</div>
<div class="teal">
<button class="butn teal">Butn</button>
<button class="butn teal dark">Butn</button>
<button class="butn teal light">Butn</button>
<button class="butn teal outline">Butn</button>
<button class="butn teal outline dark">Butn</button>
<button class="butn teal outline light">Butn</button>
<button class="butn teal gradient">Butn</button>
</div>
<div class="green">
<button class="butn green">Butn</button>
<button class="butn green dark">Butn</button>
<button class="butn green light">Butn</button>
<button class="butn green outline">Butn</button>
<button class="butn green outline dark">Butn</button>
<button class="butn green outline light">Butn</button>
<button class="butn green gradient">Butn</button>
</div>
<div class="light-green">
<button class="butn light-green">Butn</button>
<button class="butn light-green dark">Butn</button>
<button class="butn light-green light">Butn</button>
<button class="butn light-green outline">Butn</button>
<button class="butn light-green outline dark">Butn</button>
<button class="butn light-green outline light">Butn</button>
<button class="butn light-green gradient">Butn</button>
</div>
<div class="lime">
<button class="butn lime">Butn</button>
<button class="butn lime dark">Butn</button>
<button class="butn lime light">Butn</button>
<button class="butn lime outline">Butn</button>
<button class="butn lime outline dark">Butn</button>
<button class="butn lime outline light">Butn</button>
<button class="butn lime gradient">Butn</button>
</div>
<div class="yellow">
<button class="butn yellow">Butn</button>
<button class="butn yellow dark">Butn</button>
<button class="butn yellow light">Butn</button>
<button class="butn yellow outline">Butn</button>
<button class="butn yellow outline dark">Butn</button>
<button class="butn yellow outline light">Butn</button>
<button class="butn yellow gradient">Butn</button>
</div>
<div class="amber">
<button class="butn amber">Butn</button>
<button class="butn amber dark">Butn</button>
<button class="butn amber light">Butn</button>
<button class="butn amber outline">Butn</button>
<button class="butn amber outline dark">Butn</button>
<button class="butn amber outline light">Butn</button>
<button class="butn amber gradient">Butn</button>
</div>
<div class="orange">
<button class="butn orange">Butn</button>
<button class="butn orange dark">Butn</button>
<button class="butn orange light">Butn</button>
<button class="butn orange outline">Butn</button>
<button class="butn orange outline dark">Butn</button>
<button class="butn orange outline light">Butn</button>
<button class="butn orange gradient">Butn</button>
</div>
<div class="deep-orange">
<button class="butn deep-orange">Butn</button>
<button class="butn deep-orange dark">Butn</button>
<button class="butn deep-orange light">Butn</button>
<button class="butn deep-orange outline">Butn</button>
<button class="butn deep-orange outline dark">Butn</button>
<button class="butn deep-orange outline light">Butn</button>
<button class="butn deep-orange gradient">Butn</button>
</div>
<div class="brown">
<button class="butn brown">Butn</button>
<button class="butn brown dark">Butn</button>
<button class="butn brown light">Butn</button>
<button class="butn brown outline">Butn</button>
<button class="butn brown outline dark">Butn</button>
<button class="butn brown outline light">Butn</button>
<button class="butn brown gradient">Butn</button>
</div>
<div class="grey">
<button class="butn grey">Butn</button>
<button class="butn grey dark">Butn</button>
<button class="butn grey light">Butn</button>
<button class="butn grey outline">Butn</button>
<button class="butn grey outline dark">Butn</button>
<button class="butn grey outline light">Butn</button>
<button class="butn grey gradient">Butn</button>
</div>
<div class="blue-grey">
<button class="butn blue-grey">Butn</button>
<button class="butn blue-grey dark">Butn</button>
<button class="butn blue-grey light">Butn</button>
<button class="butn blue-grey outline">Butn</button>
<button class="butn blue-grey outline dark">Butn</button>
<button class="butn blue-grey outline light">Butn</button>
<button class="butn blue-grey gradient">Butn</button>
</div>
<div class="black-white">
<button class="butn black">Butn</button>
<button class="butn black outline">Butn</button>
<button class="butn white">Butn</button>
<button class="butn white outline">Butn</button>
</div>
</div>
</div>
<hr>
<div class="installation section">
<h1 class="title">Installing <span>Butns</span></h1>
<p>You have many options to choose from when it comes to installing <span>Butns</span></p>
<ul class="install">
<li>CDN: <code><link rel="stylesheet" href="https://unpkg.com/butns"></code></li>
<li>npm: <code>npm install butns</code></li>
<li>bower: <code>bower install butns</code></li>
<li>clone the repo: <code>git clone git://github.com/ahmedtarek2134/Butns</code></li>
<li>download the zip file from <a href="https://github.com/ahmedtarek2134/Butns">the github repo</a></li>
</ul>
</div>
<hr>
<div class="colors section">
<h1 class="title">Available colors in <span>Butns</span></h1>
<p><span>Butns</span> features all of Google's Material Design Colors with two shades of every color, a dark and a light one.</p>
<button class="butn red">red</button>
<button class="butn pink">pink</button>
<button class="butn purple">purple</button>
<button class="butn deep-purple">deep-purple</button>
<button class="butn indigo">indigo</button>
<button class="butn blue">blue</button>
<button class="butn light-blue">light-blue</button>
<button class="butn cyan">cyan</button>
<button class="butn teal">teal</button>
<button class="butn green">green</button>
<button class="butn light-green">light-green</button>
<button class="butn lime">lime</button>
<button class="butn yellow">yellow</button>
<button class="butn amber">amber</button>
<button class="butn orange">orange</button>
<button class="butn deep-orange">deep-orange</button>
<button class="butn grey">grey</button>
<button class="butn blue-grey">blue-grey</button>
<button class="butn brown">brown</button>
<button class="butn black">black</button>
<button class="butn white">white</button>
</div>
<hr>
<div class="types section">
<h1 class="title">Available button types in <span>Butns</span></h1>
<p>There are many button types to choose from in <span>Butns</span> making it more versatile</p>
<button class="butn deep-purple">Fill</button>
<button class="butn deep-purple dark">Dark</button>
<button class="butn deep-purple light">Light</button>
<button class="butn deep-purple outline">Outline</button>
<button class="butn deep-purple dark outline">Dark Outline</button>
<button class="butn deep-purple light outline">Light Outline</button>
<button class="butn deep-purple gradient">Gradient</button>
<p>Note: If you want the fill style, don't specify a type class since it is the default one.</p>
<p>Note: for a dark or a light outline, you need to specify two type classes, outline and dark or light</p>
</div>
<hr>
<div class="options section">
<h1 class="title">
Available options in <span>Butns</span>
</h1>
<p>There are many options to add to your button to give it a different look and feel.</p>
<button class="butn deep-purple small">Small</button>
<button class="butn deep-purple medium">Medium</button>
<button class="butn deep-purple large">Large</button>
<button class="butn deep-purple semi-transparent">Semi Transparent</button>
<button class="butn deep-purple outline transition">Transition</button>
<button class="butn deep-purple outline shadow">Shadow</button>
<button class="butn deep-purple outline rounded">Rounded</button>
</div>
<hr>
<div class="getting-started section" id="usage">
<h1 class="title">Using <span>Butns</span></h1>
<p>Here's how to get in with using <span>Butns</span></p>
<div class="content">
<ol>
<li>Link the butns stylesheet in your html: <code><link rel="stylesheet" href="path/to/butns.css"></code></li>
<li>Start by adding the class of "butn" to a button or an a tag: <code><button type="button" class="butn">Butn</button></code></li>
<li>Choose your color and add it as a class: <code><button type="button" class="butn deep-purple">Butn</button></code></li>
<li>Choose your type and add it as another class: <code><button type="button" class="butn deep-purple gradient">Butn</button></code></li>
<li>Choose your options and add them as another class: <code><button type="button" class="butn deep-purple gradient semi-transparent">Butn</button></code></li>
</ol>
<p>As you can see, butns is all about specifying how your button will look like using class names, its super easy to use!</p>
<p>Note: all class names should be in lower case</p>
<p>Example of using two types, dark and outline: <code><button type="button" class="butn deep-purple dark outline">Butn</button></code></p>
<p>Example of using more than one option: <code><button type="button" class="butn deep-purple rounded large shadow">Butn</button></code></p>
</div>
</div>
<hr>
<div class="license section">
<h1 class="title"><span>Butns</span> License</h1>
<p style="text-align: center;"><span>Butns</span> is licensed under the MIT license!</p>
<p>The MIT License (MIT)</p>
<p>Copyright (c) 2016 Ahmed Tarek</p>
<p>Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:</p>
<p>The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.</p>
<p>THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.</p>
<a class="butn large shadow deep-purple" href="#header" id="back">Back to top</a>
</div>
<div class="footer">
<p>Copyright © 2017 Ahmed Tarek. All rights reserved.</p>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="site/js/script.js"></script>
</body>
</html>