fluento

aPI docs

cSS configuration

: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 */
}

classes

navbar

specifies a navbar.

click here for example

syntax

<ul class="navbar">
	<li><a href="page 1 url">Page 1</a></li>
	<li><a id="active">Page 2</a></li>
</ul>

active

the active iD is used inside a navbar to specify the active page and its styling.

syntax

<li id="active">text</li>

shadowed

adds a shadow to the element using the box-shadow property

icon-button

icon buttons allow icons inside a button. as listed in the design page,fluento uses the jam icon project.

syntax

रब ने बना दी जोड़ी

class pairs

class pairs combine two or more classes to style the element differently.

glow

adds a glow effect to the element on hover

Applicable Elements

button, navbar

code

<ul class="navbar glow">
	<li><a href="page 1 url">Page 1</a></li>
	<li><a id="active">Page 2</a></li>
</ul>

sticky

makes a navbar sticky

applicable elements

navbar

code

<ul class="navbar sticky">
	<li><a href="page 1 url">Page 1</a></li>
	<li><a id="active">Page 2</a></li>
</ul>

additional requirements

none

push

adds a push effect to the element on click

applicable elements

navbar, button

Combining Class Pairs

class pairs can be combined as well. example -
a navbar with classes sticky and glow is possible! even the navigation bar on this webpage combines class pairs.

how to combine class pairs

an example to do so is a navbar. navbars are made when the class navbar is added to a list.

example

navbar + sticky = sticky navbar.

navbar + glow = navbar with glow in hovered links.

therefore, navbar + sticky + glow = the properties of sticky and the properties of glow added to the navbar

example

animations

fluento includes multiple animations out-of-the-box for developers to use. just set up the properties with values like spin, fadeback etc.

Pre-Included Animations

fluento comes pre-included with the following animations: