How to use

1. Copy framework.js and framework.css into your project directory
2. Add these lines to the head of your page.

   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.0/normalize.min.css">
   <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
   <link rel="stylesheet" href="framework.css">

3. Add this line right before the end of thebody of your page.

   <script src="framework.js"></script>

Navbars

Vertical Navbar

<nav class="navbar text-dark mb-1 bg-white">
  <div class="container">
    <div class="navbar-brand">
      <a href="#">Logo</a>
    </div>
    <ul class="nav">   
      <li class="nav-item">
        <a href="#" class="nav-link">Link 1</a>
      </li>
      <li class="nav-item">
        <a href="#" class="nav-link">Link 2</a>
      </li>
      <li class="nav-item">
        <a href="#" class="nav-link">Link 3</a>
      </li>
    </ul>
  </div>
</nav>

Horizontal Navbar

<nav class="navbar text-dark mb-1 navbar-expand-xs bg-white">
  <div class="container d-flex flex-nowrap flex-space-between">
    <div class="navbar-brand">
      <a href="#">Logo</a>
    </div>
    <ul class="nav">   
      <li class="nav-item">
        <a href="#" class="nav-link">Link 1</a>
      </li>
      <li class="nav-item">
        <a href="#" class="nav-link">Link 2</a>
      </li>
      <li class="nav-item">
        <a href="#" class="nav-link">Link 3</a>
      </li>
    </ul>
  </div>
</nav>

Horizontal Navbar with navigation links on the left side

<nav class="navbar text-dark mb-1 navbar-expand-xs bg-white">
  <div class="container d-flex">
    <div class="navbar-brand">
      <a href="#">Logo</a>
    </div>
    <ul class="nav">   
      <li class="nav-item">
        <a href="#" class="nav-link">Link 1</a>
      </li>
      <li class="nav-item">
        <a href="#" class="nav-link">Link 2</a>
      </li>
      <li class="nav-item">
        <a href="#" class="nav-link">Link 3</a>
      </li>
    </ul>
  </div>
</nav>

Horizontal Navbar with navigation links on both sides

<nav class="navbar text-dark mb-1 navbar-expand-xs bg-white">
  <div class="container d-flex flex-nowrap">
    <div class="navbar-brand">
      <a href="#">Logo</a>
    </div>

    <div class="d-flex flex-space-between width-100">
      <ul class="nav">   
        <li class="nav-item">
          <a href="#" class="nav-link">Link 1</a>
        </li>
        <li class="nav-item">
          <a href="#" class="nav-link">Link 2</a>
        </li>
      </ul>

      <ul class="nav">   
        <li class="nav-item">
          <a href="#" class="nav-link">Link 3</a>
        </li>
        <li class="nav-item">
          <a href="#" class="nav-link">Link 4</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

Responsive Navbar

<nav class="navbar bg-white text-dark navbar-expand-md mb-1">
  <div class="container d-flex flex-space-between">
    <div class="navbar-brand">
      <a href="#">Logo</a>
    </div>
    <button class="nav-toggler" data-target="#resp_nav">
      <i class="fas fa-bars"></i>
    </button>
    <ul class="nav collapsed" id="resp_nav">   
      <li class="nav-item">
        <a href="#" class="nav-link">Link 1</a>
      </li>
      <li class="nav-item">
        <a href="#" class="nav-link">Link 2</a>
      </li>
      <li class="nav-item">
        <a href="#" class="nav-link">Link 3</a>
      </li>
    </ul>
  </div>
</nav>

Responsive Navbar with a textbox and a button

<nav class="navbar bg-white text-dark navbar-expand-md mb-1">
  <div class="container d-flex flex-space-between">
    <div class="navbar-brand">
      <a href="#">Logo</a>
    </div>
    <button class="nav-toggler" data-target="#resp_nav2">
      <i class="fas fa-bars"></i>
    </button>
    <ul class="nav collapsed" id="resp_nav2">   
      <li class="nav-item">
        <a href="#" class="nav-link">Link 1</a>
      </li>
      <li class="nav-item">
        <a href="#" class="nav-link">Link 2</a>
      </li>
      <li class="nav-item">
        <a href="#" class="nav-link">Link 3</a>
      </li>
      <li class="nav-form input-group">
        <input type="text" class="nav-textbox" placeholder="Search">
        <button class="btn nav-btn"><i class="fas fa-search"></i></button>
      </li>
    </ul>
  </div>
</nav>

Dark Navbar

<nav class="navbar text-light mb-1 navbar-expand-xs bg-black">
  <div class="container d-flex flex-nowrap flex-space-between">
    <div class="navbar-brand">
      <a href="#">Logo</a>
    </div>
    <ul class="nav">   
      <li class="nav-item">
        <a href="#" class="nav-link">Link 1</a>
      </li>
      <li class="nav-item">
        <a href="#" class="nav-link">Link 2</a>
      </li>
      <li class="nav-item">
        <a href="#" class="nav-link">Link 3</a>
      </li>
    </ul>
  </div>
</nav>

Colored Navbar

<nav class="navbar text-light mb-1 navbar-expand-xs bg-blue">
  <div class="container d-flex flex-nowrap flex-space-between">
    <div class="navbar-brand">
      <a href="#">Logo</a>
    </div>
    <ul class="nav">   
      <li class="nav-item">
        <a href="#" class="nav-link">Link 1</a>
      </li>
      <li class="nav-item">
        <a href="#" class="nav-link">Link 2</a>
      </li>
      <li class="nav-item">
        <a href="#" class="nav-link">Link 3</a>
      </li>
    </ul>
  </div>
</nav>

Themed Navbar

<nav class="navbar mb-1 navbar-expand-xs theme-navy">
  <div class="container d-flex flex-nowrap flex-space-between">
    <div class="navbar-brand">
      <a href="#">Logo</a>
    </div>
    <ul class="nav">   
      <li class="nav-item">
        <a href="#" class="nav-link">Link 1</a>
      </li>
      <li class="nav-item">
        <a href="#" class="nav-link">Link 2</a>
      </li>
      <li class="nav-item">
        <a href="#" class="nav-link">Link 3</a>
      </li>
    </ul>
  </div>
</nav>

Themed responsive Navbar with a textbox and a button

<nav class="navbar theme-navy navbar-expand-md">
  <div class="container d-flex flex-space-between">
    <div class="navbar-brand">
      <a href="#">Logo</a>
    </div>
    <button class="nav-toggler" data-target="#resp_nav3">
      <i class="fas fa-bars"></i>
    </button>
    <ul class="nav collapsed" id="resp_nav3">   
      <li class="nav-item">
        <a href="#" class="nav-link">Link 1</a>
      </li>
      <li class="nav-item">
        <a href="#" class="nav-link">Link 2</a>
      </li>
      <li class="nav-item">
        <a href="#" class="nav-link">Link 3</a>
      </li>
      <li class="nav-form input-group">
        <input type="text" class="nav-textbox theme-blue" placeholder="Search">
        <button class="btn nav-btn theme-blue"><i class="fas fa-search"></i></button>
      </li>
    </ul>
  </div>
</nav>

Grid layout

Minimum screen size breakpoints

Columns

Usage: col-{breakpoint}-{size}
size can be anywhere from 1 to 12
breakpoint can be xs, sm, md, lg or xl

The grid can be divided into 12 equal columns. Applying col-xs-8 on a grid element extends it to the 3/4 of the width of the grid on xs sized screens (e.g mobile phones). Combining it with col-md-6 will make it so that it only covers half the grid width on md sized screens (e.g. tablets) but still covers 3/4 of the grid width on xs sized screens.

<div class="row">
  <div class="col-xs-8 col-md-6 theme-aqua center">
    col-xs-8 and col-md-6
  </div>
</div>

Offsets

Offset adds a margin to the left side of the grid element.

<div class="row">
  <div class="col-xs-8 offset-xs-2 theme-black center">
    col-xs-8 <br>
    with offset-xs-2
  </div>
</div>

Forms

Basic Form

<form class="p-1 col-md-6 offset-md-3 bg-white rounded-5">
  <h2>Sign In</h2>
  <label class="form-control" for="textbox1">Username</label>
  <input type="text" id="textbox1" class="form-control input-block">
  <label class="form-control" for="password1">Password</label>
  <input type="password" id="password1" class="form-control input-block">
  <label><input type="checkbox"> Remember me</label>
  <button type="submit" class="btn input-block">Sign In</button>
</form>

Themed Form

<form class="p-1 col-md-6 offset-md-3 theme-navy rounded-5">
  <h2>Sign In</h2>
  <label for="textbox2" class="form-control">Username</label>
  <input type="text" id="textbox2" class="theme-blue form-control input-block">
  <label for="password2" class="form-control">Password</label>
  <input type="password" id="password2" class="theme-blue form-control input-block">
  <label><input type="checkbox"> Remember me</label>
  <button type="submit" class="btn input-block theme-blue">Sign In</button>
</form>

Inline Form group

<div class="input-group col-md-6 offset-md-3 width-100 border">
  <input type="text" id="textbox2" placeholder="Search" class="form-inline width-100">
  <button type="button" class="btn flex-shrink-0">Search</button>
</div>

Inline Button group

<form class="p-1 col-md-6 offset-md-3 bg-white rounded-5">
  <h2>Subscribe</h2>
  <label for="textbox3" class="form-control">Name</label>
  <input type="text" id="textbox3" class="form-control input-block">
  <label for="textbox4" class="form-control">Email</label>
  <input type="email" id="textbox4" class="form-control input-block">

  <div class="input-group">
    <button type="reset" class="btn input-block">Reset</button>
    <button type="submit" class="btn input-block">Submit</button>
  </div>
</form>

Colors and themes

Themes

Usage: Add theme-{color} class to the element.
Replace {color} with any preset color from the grid below.
ex. theme-navy sets an element's theme to navy blue.

Background

Usage: Add bg-{color} class to the element.
Replace {color} with any preset color from the grid below.
ex. bg-navy sets an element's background color to navy blue.

Text (with shadow)

Usage: Simply add the name of the color to the class of the element.
ex. blue changes an element's text color to blue.

Border

Note: {border-width} can be anywhere from 0 to 10 (in pixels)

Border

Class: border

No border

Class: no-border

Border with custom width

Class: b-{border-width}

Border top

Class: bt-{border-width}

Border bottom

Class: bb-{border-width}

Border left

Class: bl-{border-width}

Border right

Class: br-{border-width}

Border left and right

Class: bx-{border-width}

Border top and bottom

Class: by-{border-width}

Padding

Note: {padding-width} can be anywhere from 0 to 10 (in rems)

Around

Class: p-{padding-width}

Top

Class: pt-{padding-width}

Bottom

Class: pb-{padding-width}

Left

Class: pl-{padding-width}

Right

Class: pr-{padding-width}

Top and bottom

Class: py-{padding-width}

Left and right

Class: px-{padding-width}

Margin

Note: {margin-width} can be anywhere from 0 to 10 (in rems)

Around

Class: m-{margin-width}

Top

Class: mt-{margin-width}

Bottom

Class: mb-{margin-width}

Left

Class: ml-{margin-width}

Right

Class: mr-{margin-width}

Top and bottom

Class: my-{margin-width}

Left and right

Class: mx-{margin-width}

Utilities

Display properties

• Block - d-block
• Inline - d-inline
• Inline Block - d-inline-block
• Flex - d-flex
• Hidden - hidden, d-hidden, or d-none

Float and clearfix

• Left - float-left
• Right - float-right
• Clearfix - clearfix

Text alignment

• Left - left
• Right - right
• Center - center

Flexbox properties

• Justify content

  • Start - flex-start
  • End - flex-end
  • Center - flex-center
  • Space around - flex-space-around
  • Space between - flex-space-between

• Flex direction

  • Row - flex-direction-row
  • Column - flex-direction-column

• Wrap

  • Wrap - flex-wrap
  • No wrap - flex-nowrap

• Grow and shrink

  • Grow - flex-grow-1
  • No grow - flex-grow-0
  • Shrink - flex-shrink-1
  • No shrink - flex-shrink-0

Rounded corners

• Custom radius - rounded-{radius}
radius is in pixels. It can be 0 or any multiple of 5 up to 30 (0, 5, 10, 15 ... 30) e.g.rounded-5
• Circle - rounded-circle

Border

• Around (1px) - border
• No border - no-border
• Custom width - b-{border-width}
border-width is in pixels. It can be anywhere from 0 to 10. e.g. b-5 produces a 5px border
• Partial border - b{direction}-{border-width}
possible codes for direction are: t (top), b (bottom), l (left), r (right), x (left and right) and y (top and bottom) e.g. bt-5 produces a 5px border to the top

Margin and padding

• Custom margin/padding width - m-{width} and p-{width}
width is in rem unit. It can be anywhere between 0 and 10. e.g. m-2 produces a 2 rem margin, p-2 produces a 2 rem margin
• Partial margin/padding - m{direction}-{width} and p{direction}-{width}
possible codes for direction are: t (top), b (bottom), l (left), r (right), x (left and right) and y (top and bottom) e.g. mt-2 produces a 2 rem margin to the top, px-3 produces 3 rem paddings to the left and right sides.

Others

• Text shadow - text-shadow
• Hide overflow - overflow-hidden
• Auto overflow - overflow-auto
• Code block - code-block