basicUI

basicUI is an open source front-end JavaScript framework designed to build webpages, created by Bekhruz Niyazov.

Setup

To get basicUI up and running the only thing you need to do is to import it.

To do that add this line as the first tag of the body of your webpage:

<script src="https://cdn.jsdelivr.net/gh/BekhruzSNiyazov/basicUI@2.1.3/src/basicUI.js" crossorigin="anonymous"></script>

After that, add a script tag that will contain all JavaScript code. You can provide the JavaScript as a seperate file or you can just write code in your HTML file.

<script type="text/javascript">
    // JavaScript code
</script>

or

<script type="text/javascript" src="filename.js"></script>

Navbar

To create a navbar with a createNavBar function. createNavBar takes 2 arguments:

Example

This code creates a default light navbar with a light background

createNavBar();

Add theme argument to change the theme of the navbar:

createNavBar("dark");

If you want to change the background color of the navbar add another argument:

createNavBar("dark", "#787878");

To change the title on the navbar you can use .setTitle method. Here is an example of how you can do that:

// creating the navbar and saving it in a variable to access it later
let navbar = createNavbar();
// changing the title of the navbar
navbar.setTitle("Example");

If you want to add an element to the navbar use .addItem method. .addItem takes 5 arguments:

Example

This code creates a dark navbar with 7 items: home, logo, link, text, input, button, dropdown:

// creating the navbar
let navbar =  createNavBar("dark");

// changing the title of the navbar
navbar.setTitle("Example");

// adding a home link to the navbar
navbar.addItem("home", "Home");

// adding a logo to the navbar
navbar.addItem("logo", "images/logo.png");

// adding a link to another page
navbar.addItem("link", ["Another Page", "/another"]);

// adding some text on the right side of the navbar
navbar.addItem("text", "Just Text", "right");

// adding an input field on the right side of the navbar
navbar.addItem("input", ["text", "Type something"], "right");

// adding a button on the right side of the navbar
navbar.addItem("button", ["primary", "Button"], "right");

// adding a dropdown
navbar.addItem("dropdown", ["Items", [["Hello", "/hello"], ["World", "/world"]]]);

Full code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
<body>
    <!-- importing basicUI -->
    <script src="https://cdn.jsdelivr.net/gh/BekhruzSNiyazov/basicUI@2.1.3/src/basicUI.js" crossorigin="anonymous"></script>
    <script type="text/javascript">
        // creating the navbar
        let navbar = createNavBar("dark");

        // changing the title of the navbar
        navbar.setTitle("Example");

        // adding a home link to the navbar
        navbar.addItem("home", "Home");

        // adding a logo to the navbar
        navbar.addItem("logo", ["images/logo.png", 175, 50]);

        // adding a link to another page
        navbar.addItem("link", ["Another Page", "/another"]);

        // adding some text on the right side of the navbar
        navbar.addItem("text", "Just Text", "right");

        // adding an input field on the right side of the navbar
        navbar.addItem("input", ["text", "Type something"], "right");

        // adding a button on the right side of the navbar
        navbar.addItem("button", ["primary", "Button"], "right");

        // adding a dropdown
        navbar.addItem("dropdown", ["Items", [["Hello", "/hello"], ["World", "/world"]]]);
    </script>
</body>
</html>

Result: result

Text

Adding text to your webpage is really simple: just call the addText function. It takes 3 arguments:

Example

addText("Hello, world!");
addText("Hello again, now in red and on the center!", "center", "red");

Heading

To add a heading you need to use the addHeading function. It takes 3 arguments:

Example

addHeading("Hello, heading", 5, "center");

Input field

To add an input field use addInput function. It takes 2 arguments:

Example

addInput("number", "Enter a number");

Button

To create a button use the addButton function. It takes 3 arguments:

Example

addButton("Click me!", "primary", "center");

Table

Creating a table is really simple. To do that, call the createTable function. It takes 3 arguments:

Example

createTable(["#", "Language", "Compiled/Interpreted"], 
    [
        ["1", "Python", "Interpreted"],
        ["2", "C", "Compiled"],
        ["3", "JavaScript", "Interpreted"]
    ],
    "center"
);

Card

To create a card call the createCard function. It takes 5 arguments:

Example

createCard("Just a card", "This is a description of the card",
    ["This is a link", "https://github.com/BekhruzSNiyazov", ""],
    "",
    "center"
);

Grid

Creating a grid is really simple, to do that just call the createGrid function. It takes 2 arguments:

Example

// creating cards
let card1 = new Card("Card One", "This is the first card.", ["Link", "#"]);
let card2 = new Card("Card Two", "This is the second card.", ["Link", "#"]);
let card3 = new Card("Card Three", "This is the third card.", ["Link", "#"]);
let card4 = new Card("Card Four", "This is the fourth card.", ["Link", "#"]);
let card5 = new Card("Card Five", "This is the fifth card.", ["Link", "#"]);
let card6 = new Card("Card Six", "This is the sixth card.", ["Link", "#"]);

// changing the position of each card
let cards = [card1, card2, card3, card4, card5, card6];
cards.forEach((card, index) => {
	card.position = "center";
});

// creating a grid
createGrid([[card1, card2, card3], [card4, card5, card6]]);

Alert

To create an alert you need to call 2 functions: - createAlertField (to create a field, where all alert messages will be stored). No arguments. - addAlert. Arguments: - text (required, the text message of the alert) - type (required, same types as buttons)

Example

createAlertField();

// code

addAlert("This is a danger alert message", "danger");

Useful functions

There are many useful built-in functions in basicUI. Here is the whole list:

Examples

Here is a link where you can find examples of usage of each function: https://github.com/BekhruzSNiyazov/basicUI/tree/master/examples