BumbleBee

This is a framework with a grid consisting of 8 columns with the use of flexbox. Columns must be put inside of a container to properly work.

It has two different types of containers: .container and .container-full.

.container-full spans the entire viewport, while .container is 75% of the viewport's width.

To implement columns, you should use col-1 through col-8. These numbers must add up to 8 to create a full row.

Rows can be declared by .rowHeader or .rowContent classes.

The difference between these is simply their padding and text styles. Rows are not necessary to use, but do help to keep consistent padding and margins. As you can see, the .rowHeader class is being used at the top of this container and this section is within a .rowContent class.

As you can see in the code snippet, the .content class is used. This gives the container a background color and some extra stylings so it can be recognized on the page. It should be used for the core content of the page, such as where you place paragraphs and the main information.

              
<div class="container content">
  <div class="col-8">
    <div class="rowHeader">
      <div class="col-2"></div>
      <div class="col-6"></div>
    </div>
    <div class="rowContent">
      <div class="col-4"></div>
      <div class="col-4"></div>
    </div>
  </div>
</div>
              
            

<nav>

This framework has eliminated the need to make a nav with a <ul> tag as it usually is. When using the <nav> tag, each navigation link simply needs to be an <a> with a column class. Using the <nav> tag allows for the use of the CSS animation that you can see on the navbar on this page.

              
<nav>
  <div class="container">
    <a href="" class="col-1">Nav</a>
  </div>
</nav>
              
            

<header>

The <header> tag can be used with the .title class to make a header complete with brand, slogan and logo image. The .title class adds padding and allows all of these classes to be categorized together. The .brand class makes the text bigger than an <h1> tag and the .logo class changes the images vertical align and makes it have a width of 70px

              
<header>
  <div class="container-full">
    <div class="col-1"></div>
    <div class="col-3 title">
      <a href="index.html">
        <img src="" class="logo"/>
        <h1 class="brand">brand</h1>
        <h4 class="slogan">slogan</h4>
      </a>
    </div>
    <div class="col-4"></div>
  </div>
</header>