BearJS Documention¶

BearJS Created to make your own website in a different way!

Load BearJS Into Your Website¶

<script src="https://truedl.github.io/BearJS/bear.min.js" type="text/javascript"></script>

Object Variable¶

Object Variable is the main variable used to make websites using BearJS.

CONTAIN

text (Function)
section (Function)
link (Function)
body (Function)
css (Function)
space (Function)
PrToPx (Function)
image (Function)
input (Function)
escape (Function)
title (Function)
list (Function)
button (Function)
byId (Function)
utf8 (Function)
form.post (Function)

Obj Object¶

Obj is the returned Object by the object variable.

CONTAIN

apply (Function)
onclick (Function)
inline (Function)
push (Function)
cursor (Function)
width (Function)
height (Function)
border (Function)
ghost (Function)
radius (Function)
padding (Function)
font (Function)
size (Function)
bold (Function)
align.center (Function)
align.left (Function)
align.right (Function)
color (Function)
underline (Function)
removeDecoration (Function)
bg.color (Function)
bg.image (Function)
bg.gradient (Function)
absolute (Function)
top (Function)
bottom (Function)
left (Function)
right (Function)
append.text (Function)
replace.text (Function)
append.html (Function)
replace.html (Function)
invisible (Function)
visible (Function)
italic (Function)
transition (Function)
mouse.enter (Function)
mouse.leave (Function)
verticalCenter (Function)
middle (Function)
textShadow (Function)
rotate (Function)
scale.X (Function)
scale.Y (Function)
scale.Z (Function)
value (Function)
red (Function)
blue (Function)
green (Function)
yellow (Function)
purple (Function)
orange (Function)
white (Function)
grey (Function)
list.append (Function)
blur (Function)
float.left (Function)
float.right (Function)
custom.css (Function)
on.load (Function)
on.change (Function)
on.resize (Function)
on.pagehide (Function)
on.pageshow (Function)
on.select (Function)
on.submit (Function)
on.keydown (Function)
on.keypress (Function)
on.keyup (Function)
on.doubleClick (Function)
on.wheel (Function)
append.object (Function)

EXAMPLES¶

// object.text(text:string)
// return: obj with paragraph

object.text("Some Text");

// object.section(name:string, type:string='div')
// return: obj with section type

object.section("SectionName");

// object.link(text:string, url:string)
// return: obj with link object

object.link("Linked Text", "https://example.org");

// object.body()
// return: obj with document.body

object.body();

// object.css(path:string)
// append css file to head

object.css("css/example.css");

// object.space(px:integer)
// padding-bottom by (x)px

object.space(10);

// object.PrToPx(percentage:integer, 'width' or 'height')
// Convert percentage to pixels

object.PrToPx(25);

// object.image(path:string)
// return: obj with img

object.image("image-path-or-url.png");

// object.input(id:string, placeholder:string, type:string='text')
// return: obj with input

object.input("SomeID", "Some Placeholder...");

// object.escape()
// simply <br>

object.escape();

// object.list()
// return: obj with ul list

object.list();

// speedrun through obj

object.text("Some Text")
  .on.click(ONCLICK_FUNCTION) /* When text clicked */
  .inline() /* inline-block */
  .push(5, "right") /* push(px, direction) ! margin-{direction}: {px}px */
  .cursor("pointer") /* cursor(name) */
  .width(100) /* Set Width */
  .height(200) /* Set Height */
  .border(5) /* border(px, color='#000', type='solid') */
  .ghost(95) /* Request Argument from 0 to 100 ! 0(Invisible)-100(Visible) */
  .radius(5) /* radius(px) ! border-radius */
  .padding(12) /* padding(px) ! padding */
  .font('sans-serif') /* Set Font */
  .size(32) /* size(px) ! font-size */
  .bold() /* bold */
  .align.center() /* align-center */
  .align.left() /* align-left */
  .align.right() /* align-right */
  .color("red") /* color */
  .underline() /* underline */
  .removeDecoration() /* Set Text Decoration to none */
  .bgcolor("purple") /* Set Background Color */
  .bgimage("path/to/image.png") /* Set Background Image */
  .absolute() /* Set Object postion to Absolute */
  .top(10) /* Set Top Value by px */
  .bottom(10) /* Set Bottom Value by px */
  .left(10) /* Set Left Value by px */
  .right(10) /* Set Right Value by px */
  .invisible() /* Make object invisible */
  .visible() /* Make object visible */
  .append.text(" More Text") /* Append text to object */
  .replace.text("Some Text") /* Replace existing text by other */
  .append.html(" <b>Bold Text</b>") /* Append html to object */
  .replace.html("Some Text") /* Replace existing html by other */
  .italic() /* Italic style */
  .verticalCenter() /* Center Element Vertically */
  .middle() /* Set the element at the middle of the page */
  .textShadow() /* textShadow(color='#000', DirectionOne=2, DirectionTwo=2, blur=2) | Add shadow to text */
  .rotate(10) /* rotate(deg) | Rotate element by deg */
  .scale.X(0) /* Change element's scaleX */
  .scale.Y(0) /* Change element's scaleY */
  .scale.Z(0) /* Change element's scaleZ */
  .red() /* Change text color to red */
  .blue() /* Change text color to blue */
  .green() /* Change text color to green */
  .yellow() /* Change text color to yellow */
  .purple() /* Change text color to purple */
  .list.append("Some Text") /* Append To List */
  .apply() /* apply(section=null) ! append obj to body(if no arguments provided) or to a section */
  .value() /* Returning element's value */;