CSS Plugins

Responsive Navbar

Usage

Our navbar is responsive and automatically stylized to look sleek! Add class="navbar" to the <nav> tag to get started.

Demo

HTML

  <nav class="navbar">
    <label for="show-menu" class="show-menu">☰ Menu</label>
      <input type="checkbox" id="show-menu" role="button">
    <ul id="menu">
      <li class="mobile-noshow"><a href="#">LOGO</a></li>     
      <li class="active"><a href="#">Item 1</a></li>
      <li><a href="#">Item 2</a></li>
      <li><a href="#">Item 3</a></li>
      <li><a href="#">Item 4</a></li>
      <li>
        <a href="#">Dropdown ▾</a>
          <ul class="hidden">
            <li><a href="#">DropRight <span class="mobile-noshow">▸</span>
              <span class="mobile-show">▾</span></a>
              <ul class="hidden">
                <li><a href="#">DR Item1</a></li>
                <li><a href="#">DR Item2</a></li>
                <li><a href="#">DropRight2 <span class="mobile-noshow">▸</span>
                  <span class="mobile-show">▾</span></a>
                  <ul class="hidden">
                    <li><a href="#">DR2 Item1</a></li>
                    <li><a href="#">DR2 Item2</a></li>
                    <li><a href="#">DR2 Item3</a></li>
                  </ul>
                </li>
              </ul>
            </li>
          </ul>
      </li>
    </ul>
  </nav>

Hero Image

Usage

Create a beautiful header that spans 100% of the page for your website! This adds a professional look to your page. Just add class="hero" to a <div> and the code below to add your Hero Image.

Demo

YOUR MAIN TEXT HERE

YOUR SUBTITLE TEXT HERE

HTML & CSS

Add the following HTML

  <section class="row">
    <div class="hero">
      <div class="header-text">
        <h1>YOUR MAIN TEXT HERE</h1>
        <h3>YOUR SUBTITLE TEXT HERE</h3>
        <button class="btnlarge" onclick="window.location.href='#'"></button>
      </div>
    </div>
  </section>

Add the following CSS

  .hero {
      background: url("IMAGE URL HERE") no-repeat center center;
      background-size: cover;
      position:relative;
      height: 100%;
      height:100vh;
      z-index: 5;
  }

Sticky Footer

Usage

Get the footer of your website to stick to the bottom! Regardless of how much content is on the page.

First add the class="site" to the <body> tag and
then add the class="site-content" to the <main> tag and wrap your page content within.

Optionally, add the class="site-header" to the <header> or <nav> tag and
the class="site-footer" to the <footer> tag for better browser support.

Demo

HTML

    <body class="site">
      <header class="site-header">
        ...
      </header>
      <main class="site-content">
        ...
      </main>
      <footer class="site-footer">
        ...
      </footer>
    </body>

Vertical Center

Usage

Use Flexbox to align anything vertically or horizontally.

Create a parent container with the class="flex-container" and then add your vertically centered child element(s) with the class="flex-item".

Customize the vertical alignment to the top, middle or center by adding 1 of the helper classes below:
.flex-item-top
.flex-item-middle
.flex-item-bottom

The class="flex-container" has a standard style of min-height: 100%; applied. Depending on your application you might have to adjust this in your stylesheet.

Demo

Top

Middle

Bottom

HTML

    <div class="flex-container">
      <div class="flex-item flex-item-top">Top</div>
      <div class="flex-item flex-item-middle">Middle</div>
      <div class="flex-item flex-item-bottom">Bottom</div>
    </div>

Helper Classes

Clearfix

Easily clear floating elements by adding the class="clr" to an element.

Reponsive Image

Make an image responsive by adding the class="responsive-img" to an <img> tag.

No Print Class

To hide elements while printing a page and not use up valuable ink, simply add the class="no-print".

Float Elements Left or Right

Use the class="pull-left" or class="pull-right" to float elements in either direction.