index.html

<!doctype html>
<html lang="en-US" class="loading">
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

	<title>cujoJS: Javascript architectural toolkit</title>

    <meta name="viewport" content="width=device-width" />
    <link rel="stylesheet" href="theme/basic.css"/>

	<style type="text/css">html.loading .async { opacity: 0; }</style>

	<script src="lib/curl/dist/curl/curl.js"></script>
	<!--<script data-curl-run src="app/run.js"></script>-->
	<script src="app/run.min.js"></script>
</head>
<body class="home">
<header class="hero box">
    <nav>
        <ul class="main">
            <li class="active">Home</li>
            <li><a href="http://know.cujojs.com/">Know</a></li>
            <li><a href="manifesto.html">Manifesto</a></li>
        </ul>

        <ul class="social">
            <li>
                <a class="icon-twitter" href="http://twitter.com/cujojs" title="Follow us on Twitter">Twitter</a>
            </li>
            <li>
                <a class="icon-github-2" href="http://github.com/cujojs" title="Follow us on Github">Github</a>
            </li>
        </ul>
    </nav>

    <div class="header-content">
        <h1>
            <span class="prefix">cujo</span><span class="suffix">JS</span>
        </h1>
        <div class="button-container">
            <a class="button primary getit" href="#get">Get started now</a>
            <a class="button secondary" href="#see">See it in action</a>
        </div>
        <h2 class="subheader async"></h2>
    </div>
</header>

<section class="content box tagline">
        <h3>cujoJS is an architectural toolkit for building highly modular, maintainable web applications that are easy to test and refactor, with zero framework lock-in.</h3>
</section>

<section class="content box intro">
    <article class="col3">
        <h1>Sanity</h1>
        <p>Remain calm and write the code.  cujoJS is the sane architectural toolkit.  cujoJS encourages patterns that foster clean, testable code at all levels.  From HTTP to HTML and from CORS to CSS, unit test everything and get a good night’s sleep for a change.</p>
    </article>

    <article class="col3">
        <h1>Freedom</h1>
        <p>Make exactly the app you want.  cujoJS embraces standards and integrates with any reasonably open library, component, or widget with <em>zero</em> entanglement with your code.  Use as much or as little as you need, and replace third-party or cujoJS libraries easily without rewriting everything.</p>
    </article>

    <article class="col3">
        <h1>Speed</h1>
        <p>Stop writing bloated apps.  cujoJS apps are tiny and fast.  Develop at the speed of innovation.  Separation of concerns lets multiple engineering and design teams rapidly design, develop, refactor, and test iteratively and in parallel.</p>
    </article>

</section>

<section id="see" class="content box app-container cujo-hello-container">
    <h1 id="app-hello">Sample app: Hello</h1>
    <p>Your app is not a toy. But looking at even a simple toy application reveals some of the powerful aspects of cujoJS: simple, testable modules with framework-free Javascript and HTML, composed together declaratively.</p>
    <div class="async">
        <div class="app col2">
        </div>
        <div class="code col2">
            <div class="ribbon social">
                <a class="icon-github-2" href="http://github.com/know-cujojs/hello">Fork it</a>
            </div>
        </div>
    </div>
</section>

<section class="content box app-container cujo-contacts-container">
    <h1 id="app-contacts">Sample app: Contacts</h1>
    <p>Start simple and stay simple. Real apps evolve over time, as do the teams that build and maintain them. With cujoJS, your modules stay simple, your Javascript, CSS, and HTML remain editable by mere mortals, and your architecture evolves more easily.</p>
    <div class="async">
        <div class="app col2">
        </div>
        <div class="code col2">
            <div class="ribbon social">
                <a class="icon-github-2" href="http://github.com/know-cujojs/contacts">Fork it</a>
            </div>
        </div>
    </div>
</section>

<section class="content box app-container cujo-homepage-container">
    <h1 id="app-homepage">Sample app: cujoJS.com</h1>
    <p>Iterate quickly while sleeping at night, even if you want to do something crazy, like make your homepage an app that embeds two other working apps. cujoJS helps you keep everything nicely separated, testable, refactorable, and extensible. <em>Does your home page have unit tests</em>? Ours does.</p>
    <div class="async">
        <div class="app col2">
            <img class="screenshot" src="" />
        </div>
        <div class="code col2">
            <div class="ribbon social">
                <a class="icon-github-2" href="http://github.com/cujojs/cujojs.github.com">Fork it</a>
            </div>
        </div>
    </div>
</section>

<section id="get" class="content box get">
    <section>
        <h1>Get it</h1>
        <div class="col2">
            <h2>cujoJS/seed</h2><a class="button secondary" href="https://github.com/cujojs/seed">Get cujoJS/seed</a>
            <p>Overwhelmed by all the awesomeness?  Start here.  Have your first “hello world” cujoJS app up and running in under a minute.</p>

            <ol>
                <li><code>git clone https://github.com/cujojs/seed.git myapp</code></li>
                <li><code>cd myapp</code></li>
                <li><code>bower install</code></li>
                <li><code>npm install</code></li>
                <li><code>npm start</code></li>
            </ol>

            <p>Launch <code>http://localhost:8000/</code> in your browser.  Point your editor at the <code>myapp</code> folder and start coding!</p>
        </div>

        <div class="col2">
            <h2>A la carte</h2>
            <a class="button secondary" href="http://know.cujojs.com/downloads">Go to downloads</a>
            <p>Get exactly the bits of cujoJS you need using your favorite package manager, or by downloading them as zip files.</p>
            <ul class="icon-grid">
                <li><a class="icon-cola" href="http://know.cujojs.com/downloads">cola.js</a></li>
                <li><a class="icon-cram" href="http://know.cujojs.com/downloads">cram.js</a><span></span></li>
                <li><a class="icon-curl" href="http://know.cujojs.com/downloads">curl.js</a></li>
                <li><a class="icon-jiff" href="http://know.cujojs.com/downloads">jiff.js</a></li>
                <li><a class="icon-meld" href="http://know.cujojs.com/downloads">meld.js</a></li>
                <li><a class="icon-msgs" href="http://know.cujojs.com/downloads">msgs.js</a></li>
                <li><a class="icon-poly" href="http://know.cujojs.com/downloads">poly.js</a></li>
                <li><a class="icon-rest" href="http://know.cujojs.com/downloads">rest.js</a></li>
                <li><a class="icon-when" href="http://know.cujojs.com/downloads">when.js</a></li>
                <li><a class="icon-wire" href="http://know.cujojs.com/downloads">wire.js</a></li>
            </ul>
        </div>
    </section>

</section>

<footer class="footer box">
    <div class="col2">
        <p>&copy; Copyright 2013 Brian Cavalier &amp; John Hann</p>
        <p>Icons: <a href="http://adamwhitcroft.com/batch/">Batch by @adamwhitcroft</a></p>
    </div>
    <div class="col2">
        <p>See a problem on this page? <a href="https://github.com/cujojs/cujojs.github.com/issues/new">Let us know</a></p>
    </div>
</footer>

<script>
    (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
        (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
            m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
    })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

    ga('create', 'UA-40625363-1', 'cujojs.com');
    ga('send', 'pageview');

</script>
</body>
</html>