Nav Bar

The nav bar is usually one of the first things you add to your webpage. The following code will produce a nav bar very simular to the one seen on this document. Put the navbar at the end of your `body` tab (before all the script tags of course). The navbar will automatically be placed at the top of the page. The reason for the navbar being added last is so that it will not be overlapped by any other elements.

You can now add colors to nav bars! You can now add red, green, blue, dark-blue, orange, light & dark or you can just leave it as it is. You can also now add an inverted class to your navbar to swap around the colors.

<ul class="navbar dark-blue">
  <li><a class="active no-link-effect" href="#">Link one</a></li>
  <li><a class="no-link-effect" href="#">Link two</a></li>
  <li><a class="no-link-effect" href="#">Link three</a></li>
  <li class="align-right"><a class="no-link-effect" href="#">Link four</a></li>
</ul>

Content & Container classes

Put all of the page's content inside the content div, This will apply a margin on the left and organise everything properly. To get a margin on the right add a `margin-right` class to the div, for a larger margin add a `large-margin` class aswell.

A container class is for the main focus of the page. Generally there is a `<h1>` tag inside with the heading of the webpage.

<div class="content margin-right large-margin">
    <div class="container">
        <h1>Inside a container div!</h1>
    </div>
    <p>Inside a `content.margin-right.large-margin` class!</p>
</div>

Buttons

Add a `.button` class to any element to add the style of a BF button.

<button>Regular button.</button>
<button class="button">Basic Framework button.</button> <br />
<button class="button red">.button.red</button>
<button class="button green">.button.green</button>
<button class="button blue">.button.blue</button>
<button class="button dark-blue">.button.dark-blue</button>
<button class="button orange">.button.orange</button>
<button class="button light">.button.light</button>
<button class="button dark">.button.dark</button> <br />
<button class="button size-xs">.button.size-xs</button>
<button class="button size-sm">.button.size-sm</button>
<button class="button size-lg">.button.size-lg</button>
<button class="button size-xl">.button.size-xl</button>

Button Groups

If you want buttons with no rounded corners you can surround a single button with the `div.button-group`.

<div class="button-group">
	<button class="button">Button 1</button>
	<button class="button">Button 2</button>
	<button class="button">Button 3</button>
	<button class="button">Button 4</button>
	<button class="button">Button 5</button>
</div>

Alerts

Alerts are for informing the user about some information. Another use for alerts is to colorize a block of text and make it stand out. Add the alert class to a div, next add the color you wish to add, the availabe colors are, red, green, blue, dark-blue, orange, light & dark if you want to, you can invert the colors by adding inverted to the class list. If you want links to share the same color as the text add a link class.

I'm an alert!

Link

<div class="alert">I'm an alert!</div>
<div class="alert red">I'm an alert!</div>
<div class="alert green">I'm an alert!</div>
<div class="alert dark-blue">I'm an alert!</div>
<div class="alert blue inverted">I'm an alert!</div>
<div class="alert orange inverted"><a href="javascript:void(0)" class="link">Link</a></div>

Forms & Input

The forms and input example utilizes Basic Framework's grid system, if you're not sure on how to use grids maybe check out the grid segment before seeing the forms and input examples.

<form class="form" action="">
  <div class="grid">
    <div class="col-6-12">
      <label><h3>First Name*</h3></label>
      <input type="text" class="input" required>
    </div>
    <div class="col-6-12">
      <label><h3>Last Name*</h3></label>
      <input type="text" class="input" required>
    </div>
    <div class="col-12-12">
      <label><h3>Email*</h3></label>
      <input type="email" class="input" required>
    </div>
    <div class="col-6-12">
      <label><h3>Password*</h3></label>
      <input type="password" class="input" required/>
    </div>
    <div class="col-6-12">
      <label><h3>Confirm Password*</h3></label>
      <input type="password" class="input" required/>
    </div>
    <div class="col-12-12">
      <input type="submit" class="button size-sm dark-blue">
    </div>
  </div>
</form>

Grids

Grids are for organising text and other elements on your webpage.

1/12

4/12

3/12

If you view this pages source you can find that it uses grids when ever possible.

If you go over the 12 columns per line limit Basic Framework will put the column that is going over the limit on the next line. To begin using the grid do the following:

Make a div with the grid class.

Fill it with divs that make up twelve columns on each line
- Children must have a class ranging from col-1-12 through col-12-12.

Remember that grid items exceeding the twelve column limit will be placed on the next line, and that all children divs are inline with eachother so use <br /> to get a new line.

<div class="grid">
  <div class="col-6-12"><p>Some text</p></div>
  <div class="col-6-12"><p>Some text</p></div>
  <div class="col-12-12"><p>Some text</p></div>
</div>

Some text

<div class="grid align-center">
  <div class="col-1-12"><div class="alert">1/12</div></div>
  <div class="col-1-12"><div class="alert">1/12</div></div>
  <div class="col-1-12"><div class="alert">1/12</div></div>
  <div class="col-1-12"><div class="alert">1/12</div></div>
  <div class="col-1-12"><div class="alert">1/12</div></div>
  <div class="col-1-12"><div class="alert">1/12</div></div>
  <div class="col-1-12"><div class="alert">1/12</div></div>
  <div class="col-1-12"><div class="alert">1/12</div></div>
  <div class="col-1-12"><div class="alert">1/12</div></div>
  <div class="col-1-12"><div class="alert">1/12</div></div>
  <div class="col-1-12"><div class="alert">1/12</div></div>
  <div class="col-1-12"><div class="alert">1/12</div></div>
  <br />
  <div class="col-4-12"><div class="alert">4/12</div></div>
  <div class="col-4-12"><div class="alert">4/12</div></div>
  <div class="col-4-12"><div class="alert">4/12</div></div>
  <br />
  <div class="col-3-12"><div class="alert">3/12</div></div>
  <div class="col-3-12"><div class="alert">3/12</div></div>
  <div class="col-3-12"><div class="alert">3/12</div></div>
  <div class="col-3-12"><div class="alert">3/12</div></div>
</div>

Progress Bars

Here are some fancy progress bars, they are animated however this only works in some modern browsers.