index.html

---
bodyClass: index
includeBanner: true
---
<div id="home" class="grid_12 panels">
    <div class="rowInside">
        <article class="grid_12 hrline"></article>
        <article class="grid_12 desc">
            <h2 class="plain">
                Chai has several interfaces that allow the developer to
                choose the most comfortable. The chain-capable BDD styles
                provide an expressive language &amp; readable style, while
                the TDD assert style provides a more classical feel.
            </h2>
          </article>
          <article class="grid_4 code contrast">
            <div class="wrap">
              <h3 class="fancy">Should</h2>
              <div class="code-sample">
                {% highlight js %}
chai.should();

foo.should.be.a('string');
foo.should.equal('bar');
foo.should.have.lengthOf(3);
tea.should.have.property('flavors')
  .with.lengthOf(3);
                {% endhighlight %}
              </div>
              <div class="more-wrap">
                <a href="/guide/styles/#should" class="more">
                  Visit Should Guide <span class="arrow">&rarr;</span>
                </a>
              </div>
          </article>
          <article class="grid_4 code contrast">
            <div class="wrap">
              <h3 class="fancy">Expect</h2>
              <div class="code-sample">
                {% highlight js %}
var expect = chai.expect;

expect(foo).to.be.a('string');
expect(foo).to.equal('bar');
expect(foo).to.have.lengthOf(3);
expect(tea).to.have.property('flavors')
  .with.lengthOf(3);
                {% endhighlight %}
              </div>
              <div class="more-wrap">
                <a href="/guide/styles/#expect" class="more">
                  Visit Expect Guide <span class="arrow">&rarr;</span>
                </a>
              </div>
          </article>
          <article class="grid_4 code contrast">
            <div class="wrap">
              <h3 class="fancy">Assert</h2>
              <div class="code-sample">
                {% highlight js %}
var assert = chai.assert;

assert.typeOf(foo, 'string');
assert.equal(foo, 'bar');
assert.lengthOf(foo, 3)
assert.property(tea, 'flavors');
assert.lengthOf(tea.flavors, 3);
                {% endhighlight %}
              </div>
              <div class="more-wrap">
                <a href="/guide/styles/#assert" class="more">
                  Visit Assert Guide <span class="arrow">&rarr;</span>
                </a>
              </div>
          </article>
    </div>
    <div class="rowInside">
      <article class="grid_12 hrline"></article>
        <article class="grid_12 desc">
            <h2 class="plain">
                Plugins extend Chai's assertions to new contexts such as
                vendor integration &amp; object construction. Developers can
                build their own plugins to share with community or use the
                plugin pattern to DRY up existing tests.
            </h2>
        </article>
        <article id="plugin-featured" class="grid_6 plugin-box contrast">
            <div class="plugin-title">
                <h2 class="plain accent-wrap">
                    <span class="accented">
                        {{site.featuredplugin.name}}
                        <span class="faccentl"></span>
                        <span class="faccentr"></span>
                    </span>
                </h2>
                <div class="action-button">
                    <a href="{{site.featuredplugin.url | prepend: site.github.url | replace: 'http://', '//'}}">
                        Learn More &amp; Install
                        <span class="arrow">&rarr;</span>
                    </a>
                </div>
            </div>
            <div class="wrap">
                <h3 class="fancy">Featured Plugin</h3>
                {{ site.featuredplugin.blurb | markdownify }}
                {% highlight js %}
                {{ site.featuredplugin.example }}
                {% endhighlight %}
            </div>
        </article>
        <article id="plugin-dir" class="grid_3 plugin-box contrast"><span class="img">
            <div class="icon"></div></span>
            <div class="wrap">
                <h3 class="fancy">Custom Plugins</h3>
                <p>Browse our growing directory of custom plugins &amp; vendor integrations to find the best tool for your needs.</p>
                <div class="more-wrap"><a href="/plugins" class="more">Browse Plugins<span class="arrow">&rarr;</span></a></div>
            </div>
        </article>
        <article id="plugin-guide" class="grid_3 plugin-box contrast"><span class="img">
            <div class="icon"></div></span>
            <div class="wrap">
                <h3 class="fancy">Develop Plugins</h3>
                <p>Chai has an extensive utility belt for plugin developers. Learn how to build your plugins &amp; share.</p>
                <div class="more-wrap"><a href="/guide/plugins" class="more">Plugin Guide<span class="arrow">&rarr;</span></a></div>
            </div>
        </article>
    </div>
    <div class="rowInside">
        <article class="grid_12 hrline"></article>
        <article class="github grid_6 contrast">
            <div class="wrap"><span class="img">&nbsp;</span>
                <h3 class="fancy">Powered by Open Source</h3>
                <p>Chai is hosted on GitHub. Have a suggestion or found a bug? Fork this project to help make Chai even better. Even this documentation site is open source and available for contribution.</p>
                <div class="more-wrap"><a href="https://github.com/chaijs/chai" target="_blank" class="more">Fork Chai on GitHub<span class="arrow">&rarr;</span></a></div>
            </div>
        </article>
        <article class="community grid_6 contrast">
            <div class="wrap">
                <h3 class="fancy">Join our Community</h3>
                <p>We have an active mailing list available at our <a href="https://groups.google.com/group/chaijs" target="_blank">Google Group</a>, or drop by freenode IRC <code>#chaijs</code> channel to get help anytime.</p>
                <div class="more-wrap"><a href="https://groups.google.com/group/chaijs" target="_blank" class="more">Visit Google Group<span class="arrow">&rarr;</span></a></div>
            </div>
        </article>
    </div>
</div>

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