-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathapi.html
109 lines (105 loc) · 4.44 KB
/
api.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
<!DOCTYPE html>
<title>Fluento</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" href="icon.svg">
<h1 class="logo" onclick="window.location.href = 'index.html'">fluento</h1>
<ul class="navbar sticky glow push">
<li><a href="index.html">Home</a></li>
<li><a id="active">API Documentation</a></li>
<li><a href="design.html">design</a></li>
<li><a href="demo.html">Demos</a></li>
<li><a href="credits.html">credits</a></li>
<li><a href="addons.html">addons</a></li>
<li><a href="https://github.com/shaurya1709/fluento">github</a></li>
</ul>
<h1 class="head">aPI docs</h1>
<h1>cSS configuration</h1>
<pre class="code">
:root {
--main-color: /* the main color. used for things like backgrounds */
--accent-color: /* the accent color. used for things like navbar backgrounds */
--text-color: /* the color of the font used across the webpage */
--text-color-alternate: /* an alternate font color used for navbar hovers, active navbar urls and button text */
--font: /* the font family to be used across the webpage */
--page-margin: /* the margin used by the page body */
--text-case-filter: /* text casing filters. possible values are capitalize, lowercase, uppercase and none */
--scroll-style: /* set smooth scrolling for anchors leading to other elements on the page. possible values are smooth, auto */
}
</pre>
<h1>classes</h2>
<h2>navbar</h3>
<p>specifies a <span class="code">navbar</span>.</p>
<p><a href="demo.html#navbar">click here for example</a></p>
<h3>syntax</h3>
<pre class="code">
<ul class="navbar">
<li><a href="page 1 url">Page 1</a></li>
<li><a id="active">Page 2</a></li>
</ul>
</pre>
<h3>active</h3>
<p>the active iD is used inside a <span class="code">navbar</span> to specify the active page and its styling.</p>
<h3>syntax</h3>
<pre style="text-transform: none; font-family: source code pro; font-size: 14px;"><li id="active">text</li></pre>
<h2>shadowed</h2>
<p>adds a shadow to the element using the <span style="font-family: source code pro; font-size: 14px; text-transform: none;">box-shadow</span> property</p>
<h2>icon-button</h2>
<p>icon buttons allow icons inside a button. as listed in the design page,fluento uses the jam icon project.</p>
<h3>syntax</h3>
<pre class="code">रब ने बना दी जोड़ी</pre>
<h1>class pairs</h1>
<p>class pairs combine two or more <span class="code">classes</span> to style the element differently.</p>
<h2>glow</h2>
<p>adds a glow effect to the element on <span class="code">hover</span></p>
<h3>Applicable Elements</h3>
<p class="nocaps">button, navbar</p>
<h3>code</h3>
<pre class="code">
<ul class="navbar glow">
<li><a href="page 1 url">Page 1</a></li>
<li><a id="active">Page 2</a></li>
</ul>
</pre>
<h2>sticky</h2>
<p>makes a navbar sticky</p>
<h3>applicable elements</h3>
<p class="nocaps">navbar</p>
<h3>code</h3>
<pre class="code">
<ul class="navbar sticky">
<li><a href="page 1 url">Page 1</a></li>
<li><a id="active">Page 2</a></li>
</ul>
</pre>
<h3>additional requirements</h3>
<p><em>none</em></p>
<h2>push</h2>
<p>adds a push effect to the element on click</p>
<h3>applicable elements</h3>
<p class="nocaps">navbar, button</p>
<h2>Combining Class Pairs</h2>
<p><span class="code">class pairs</span> can be combined as well. example -<br> a navbar with classes sticky and glow is possible! even the navigation bar on this webpage combines class pairs.</p>
<h3>how to combine class pairs</h3>
<p>an example to do so is a navbar. navbars are made when the <span class="code">class</span> navbar is added to a list.</p>
<h4>example</h4>
<p>navbar + sticky = sticky navbar.<p>navbar + glow = navbar with glow in hovered links.<p>therefore, navbar + sticky + glow = the properties of sticky and the properties of glow added to the navbar</p>
<a href="demo.html#ccp">example</a>
<h1>animations</h1>
<p>fluento includes multiple animations out-of-the-box for developers to use. just set up the properties with values like spin, fadeback etc.</p>
<h2>Pre-Included Animations</h2>
<p>fluento comes pre-included with the following animations:</p>
<ul>
<li>fadeback</li>
<li>spin</li>
<li>flip</li>
<li>bounce</li>
<li>slideleft</li>
<li>slideright</li>
<li>slideup</li>
<li>slidedown</li>
</ul>
<style>
@import url(style.css);
h2 {text-transform: none;}
.nocaps {text-transform: none;}
</style>