Kite is a flexible layout helper CSS library.

  • Simple

    Kite uses `inline-block`, not the latest CSS Syntax.
    It's practical, simple to understand and easy to use.

  • Flexible

    Kite behaves like flexbox: justify-content, etc.
    You could easily create complex modules.

  • Rapidly

    Kite is based on OOCSS with MindBEMding.
    It helps you to rapidly build your components. 

// kite core components
// 1. Fill in `inline-block` gaps and then reset to `font-size` root font-size `rem`
// 2. For Android: Android doesn't fill in `inline-block` gaps. `display: table;` magic fills in them.  
// 3. For lte IE 8: IE 8 can't use `rem`. Use `medium` keyword for the purpose of reset `font-size`.

.kite {
  display: table; // 2 
  width: 100%;
  font-size: 0 !important; // 1 
}

.kite__item {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  display: inline-block;
  font-size: medium; // 3
  font-size: 1rem; // 1 
  vertical-align: top;
}

Advantages:

Works on most browsers including IE8, Android2.3.x.

Caveats:

Reset font-size inheritance at kite container.

Usage

Horizontal align

A
B
C
A
B
C
A
B
C
<div class="kite">
  <div class="kite__item">
    <div>A</div>
  </div>
  <div class="kite__item">
    <div>B</div>
  </div>
  <div class="kite__item">
    <div>C</div>
  </div>
</div>

<div class="kite kite--center">
  <div class="kite__item">
    <div>A</div>
  </div>
  <div class="kite__item">
    <div>B</div>
  </div>
  <div class="kite__item">
    <div>C</div>
  </div>
</div>

<div class="kite kite--right">
  <div class="kite__item">
    <div>A</div>
  </div>
  <div class="kite__item">
    <div>B</div>
  </div>
  <div class="kite__item">
    <div>C</div>
  </div>
</div>

Vertical align

A
B
C
A
B
C
A
B
C
<div class="kite kite--top">
  <div class="kite__item">
    <div>A</div>
  </div>
  <div class="kite__item">
    <div>B</div>
  </div>
  <div class="kite__item">
    <div>C</div>
  </div>
</div>
<div class="kite kite--middle">
  <div class="kite__item">
    <div>A</div>
  </div>
  <div class="kite__item">
    <div>B</div>
  </div>
  <div class="kite__item">
    <div>C</div>
  </div>
</div>
<div class="kite kite--bottom">
  <div class="kite__item">
    <div>A</div>
  </div>
  <div class="kite__item">
    <div>B</div>
  </div>
  <div class="kite__item">
    <div>C</div>
  </div>
</div>

Nest

A
a
b
c
<div class="kite kite--center">
  <div class="kite__item">
    <div>
      A
      <div class="kite kite--full">
        <div class="kite__item">
          <div>a</div>
        </div>
        <div class="kite__item">
          <div>b</div>
        </div>
        <div class="kite__item">
          <div>c</div>
        </div>
      </div>
    </div>
  </div>
</div>

Justify

A
B
C
D
A
BC
DE
FG
A
BC
DEF
GHIJ
<div class="kite kite--justify">
  <div class="kite__item">
    <div>A</div>
  </div>
  <div class="kite__item">
    <div>B</div>
  </div>
  <div class="kite__item">
    <div>C</div>
  </div>
  <div class="kite__item">
    <div>D</div>
  </div>
</div>

Fill

A
BC
DEF
GHIJ
A
BC
DEF
GHIJ
<div class="kite kite--fill kite--full">
  <div class="kite__item">
    <div>A</div>
  </div>
  <div class="kite__item">
    <div>BC</div>
  </div>
  <div class="kite__item">
    <div>DEF</div>
  </div>
  <div class="kite__item">
    <div>GHIJ</div>
  </div>
</div>

Position

A
<div style="position:relative;">
  <div class="kite kite--position">
    <div class="kite__item">
      <div>A</div>
    </div>
  </div>
</div>

Example

Pagination

<ul class="x-pagination kite kite--center">
  <li class="kite__item">
    <a href="#" class="x-pagination__prev"><i class="c-ico entypo-left-open"></i></a>
  </li>
  <li class="kite__item">
    <a href="#">1</a>
  </li>
  <li class="kite__item">
    <a href="#">2</a>
  </li>
  <li class="kite__item">
    <a href="#">3</a>
  </li>
  <li class="kite__item">
    <span>...</span>
  </li>
  <li class="kite__item">
    <a href="#">30</a>
  </li>
  <li class="kite__item">
    <a href="#" class="x-pagination__next"><i class="c-ico entypo-right-open"></i></a>
  </li>
</ul>

Media

Do The Interns get Glocks?

The Life Aquatic with Steve Zissou

Bill Murray

1950/09/21

Although one person I was with at the pre-screen hated it, I absolutely loved it. I think it will just be one of those kinds of films (but hey, I also loved...

Nicolas Cage

I cannot express in words how many different styles of film making Wes Anderson combined into this masterpiece. At one point hilarious, sometimes...

Charlie Sheen

 
<div class="x-quotes">
  <figure class="x-quotes__item">
    <div class="kite kite--position">
      <div class="kite__item kite__item--center">
        <blockquote class="x-quotes__word">
          <p>Do The Interns get Glocks?</p>
        </blockquote>
        <figcaption class="x-quotes__cite">
          <cite>The Life Aquatic with Steve Zissou</cite>
        </figcaption>
      </div>
    </div>
  </figure>
  <div class="kite kite--middle kite--fill x-media">
    <div class="kite__item x-media__figure">
      <img src="http://www.fillmurray.com/124/124">
    </div>
    <div class="kite__item kite__item--full x-media__body">
      <p class="x-media__name">Bill Murray</p>
      <p class="x-media__birthday">1950/09/21 </p> 
    </div>
  </div>
  <div class="x-comments">
    <a href="#" class="kite kite--fill x-comment u-tdn">
      <div class="kite__item kite__item--full x-comment__body">
        <p class="x-comment__text">Although one person...</p>
        <p class="x-comment__name">Nicolas Cage</p>
      </div>
      <div class="kite__item kite__item--right x-comment__media">
        <img src="http://placecage.com/100/100">
      </div>
    </a>
    <a href="#" class="kite kite--fill x-comment u-tdn">
      <div class="kite__item kite__item--full x-comment__body">
        <p class="x-comment__text">I cannot express...</p>
        <p class="x-comment__name">Charlie Sheen</p>
      </div>
      <div class="kite__item kite__item--right x-comment__media">
        <img src="http://placesheen.com/100/100">
      </div>
    </a>
  </div>
</div>

Modal

<div class="kite kite--position">
  <div class="kite__item">
    <button class="x-modal__button js-open-dialog" data-dialog="dialog"><i class="c-ico entypo-popup"></i></button>
  </div>
</div>

<div class="kite kite--position is-hidden is-fixed x-modal__overlay js-close-dialog" id="dialog">
  <div class="kite__item x-modal__dialog">
    <p>
      <i class="c-ico entypo-cancel-circled"></i>Close me.
    </p>
  </div>
</div>
Fork me on GitHub